Mobile improvements

src/static/css/pad.css

@@ -72,6 +72,7 @@ a img {
   float: left;
   margin-left: 2px;
   height:32px;
+  cursor: pointer;
 }
 .toolbar ul li.separator {
   border: inherit;
@@ -187,8 +188,8 @@ a img {
   outline: none;
 }
 .toolbar ul.menu_left {
-  left:0px;
-  right:250px;
+  left: 0px;
+  right: 210px;
 }
 
 .toolbar ul.menu_right {
@@ -1113,7 +1114,7 @@ input[type=checkbox] {
       border-bottom: 1px solid #ccc;
       z-index: 10;
     }
-    .toolbar ul.menu_right {
+    .toolbar ul.menu_right, .timeslider-bar .editbarright {
       right:0px !important;
       height: 32px;
       position: fixed;

src/static/js/pad_editbar.js

@@ -209,9 +209,8 @@ var padeditbar = (function()
     redrawHeight: function(){
       var minimunEditbarHeight = self.calculateEditbarHeight();
       var editbarHeight = minimunEditbarHeight + 1 + "px";
-      var containerTop = minimunEditbarHeight + 6 + "px";
+      var containerTop = minimunEditbarHeight + 1 + "px";
       $('#editbar').css("height", editbarHeight);
-
       $('#editorcontainer').css("top", containerTop);
 
       // make sure pop ups are in the right place

src/static/skins/colibris/pad.css

@@ -85,7 +85,8 @@ h1,
 .yui-skin-sam .yui-panel .hd,
 p[data-l10n-id="ep_comments_page.comment"],
 .comment-reply-input-label span,
-.stepper, #importmessageabiword, #importmessageabiword > a
+.stepper, #importmessageabiword, #importmessageabiword > a,
+.toolbar .show-more-icon-btn
 { color: #64d29b; }
 #ui-slider-handle, #playpause_button_icon {
   background-color: #64d29b;

src/static/skins/colibris/pad.js

@@ -1,4 +1,32 @@
 function customStart()
 {
   $('#pad_title').show();
+
+  var showMoreIconBtn = $('<span class="show-more-icon-btn"></span>')
+  showMoreIconBtn.click(function() {
+    $('.toolbar').toggleClass('full-icons');
+    $('#editorcontainer').css('top', $('.menu_left').height() + 1 + 'px');
+  })
+  $('.toolbar').append(showMoreIconBtn)
+
+  var timer;
+  // on resize end
+  window.onresize = function(){
+    clearTimeout(timer);
+    timer = setTimeout(checkAllIconAreDisplayedInToolbar, 100);
+  };
+  setTimeout(checkAllIconAreDisplayedInToolbar, 300);
+  setTimeout(checkAllIconAreDisplayedInToolbar, 600);
+}
+
+function checkAllIconAreDisplayedInToolbar()
+{
+  // reset style
+  $('.toolbar').removeClass('cropped')
+  console.log("check icons displayed", $('.toolbar .menu_left')[0].scrollWidth, $('.toolbar').width());
+
+  if ($('.toolbar .menu_left')[0].scrollWidth > $('.toolbar').width()) {
+    console.log("button are hidden");
+    $('.toolbar').addClass('cropped');
+  }
 }

src/static/skins/colibris/src/components/chat.css

@@ -105,8 +105,10 @@
     bottom: 44px;
   }
 
-  #chatbox {
-    width: 100%;
+  #chatbox, #chatbox.stickyChat {
+    width: 100% !important;
+    height: 50% !important;
+    top: initial !important;
     right: 0;
   }
 

src/static/skins/colibris/src/components/popup.css

@@ -18,6 +18,7 @@
 
 .popup h1 {
   margin-bottom: 15px;
+  font-size: 2em !important;
 }
 
 .popup h2 {
@@ -28,3 +29,37 @@
   margin: 10px 0;
 }
 
+@media (max-width: 720px) {
+  .popup .column {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .popup #exportColumn {
+    padding: 0;
+    width: 100%;
+  }
+  .popup .exportlink {
+    margin: 0 0 10px 0;
+  }
+
+  .popup h1 { font-size: 1.8em !important; }
+
+  #connectivity, #embed, #import_export, #settings, #users, #mycolorpicker, #chatbox {
+    bottom: 44px  !important;
+    box-shadow: 0 0 0 1px rgba(99,114,130,.16), 3px -7px 20px 6px rgba(27, 39, 51, 0.16);
+    border-radius: 0 !important;
+  }
+  #connectivity, #embed, #import_export, #settings, #users, #mycolorpicker {
+    right: 0 !important;
+    overflow-y: auto;
+    top: initial !important;
+    max-height: 70%;
+  }
+  #users {
+    height: auto !important;
+  }
+  #embed { padding-bottom: 30px; }
+
+  #embedreadonly { margin-top: 8px; }
+}
+

src/static/skins/colibris/src/components/toolbar.css

@@ -4,7 +4,8 @@
   margin: 0;
   background-color: white !important;
   background: none;
-  border: 1px solid #d2d2d2
+  border: none;
+  border-bottom: 1px solid #d2d2d2
 }
 
 .toolbar .buttonicon {
@@ -101,16 +102,19 @@
     height: 39px;
     background: none;
     background-color: transparent;
-    overflow-x: visible;
+  }
+  .toolbar ul.menu_right li {
+    margin-left: 10px;
   }
   .toolbar ul.menu_left {
     padding: 2px 0 0 0;
   }
-  .toolbar ul.menu_right {
+  .toolbar ul.menu_right, .timeslider-bar .editbarright {
     left: 0;
     padding-left: 8px;
     padding-top: 8px;
     height: 35px !important;
+    border: none;
     border-top: 1px solid #d2d2d2;
     background-color: white;
   }
@@ -128,8 +132,6 @@
   }
   .toolbar ul li a:hover { background-color: transparent; }
 
-  #connectivity, #embed, #import_export, #settings { bottom: 42px; }
-
   li.superscript,
   li.subscript,
   li[data-key="undo"],
@@ -138,6 +140,50 @@
   }
 
   .toolbar ul li.separator { margin: 0; }
+
+  .toolbar .show-more-icon-btn {
+    display:none;
+    height: 39px;
+    width: 39px;
+    line-height: 39px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 2rem;
+    background-color: white;
+    z-index: 20;
+  }
+
+  .toolbar.cropped .menu_left {
+    width: calc(100% - 39px); /* Space for show-more-icon-button */
+    display: block;
+  }
+  .toolbar.cropped .show-more-icon-btn {
+    display: block;
+    position: absolute;
+    border-bottom: 1px solid #d2d2d2;
+    right: 0;
+    top: 0;
+  }
+  .toolbar.cropped .show-more-icon-btn:after {
+    content: "+";
+  }
+
+  .toolbar.full-icons {
+    height: auto !important;
+  }
+  .toolbar.full-icons .show-more-icon-btn  {
+    border-bottom: none;
+  }
+  .toolbar.full-icons .show-more-icon-btn:after {
+    content: "-";
+  }
+  .toolbar.full-icons .menu_left {
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    width: 100%;
+    background-color: white;
+  }
 }
 
 

src/static/skins/colibris/src/components/users.css

@@ -66,19 +66,8 @@ table#otheruserstable {
 }
 
 @media (max-width: 720px) {
-  #users {
-    bottom: 42px;
-    top: initial !important;
-    height: auto !important;
-  }
-
   #mycolorpicker {
-    width: auto;
-    height: auto;
-    right: 0;
-    bottom: 42px;
     left: initial;
-    top: initial !important;
   }
 }
 

src/static/skins/colibris/src/layout.css

@@ -8,7 +8,6 @@
 }
 
 #editorcontainer {
-  top: 41px !important;
   padding-top: 0 !important;
 }
 
@@ -28,6 +27,14 @@
 #outerdocbody.plugin-ep_author_neat {
   padding-left: 120px; /* more space for sidediv */
 }
+@media (max-width: 720px) {
+  #editorcontainer {
+    width: 100% !important;
+    right: 0 !important;
+    left: 0 !important;
+  }
+}
+
 @media (max-width:600px) {
   #outerdocbody.plugin-ep_author_neat { padding-left: 0; }
   #options-linenoscheck { display:none; }

src/static/skins/colibris/src/plugins/embedded_hyperlinks.css

@@ -3,4 +3,15 @@
   margin-top: 1px;
   margin-right: 0;
   margin-left: 2px;
-}
+}
+@media (max-width: 720px) {
+  .hyperlink-dialog {
+    left: 0 !important;
+    right: 0 !important;
+    padding: 10px;
+    display: flex;
+  }
+  .hyperlink-dialog .hyperlink-url {
+    flex: 1 auto;
+  }
+}

src/static/skins/colibris/timeslider.css

@@ -6,9 +6,11 @@
   }
 }
 
-.timeslider #import_export, .timeslider #settings{
-  top: 108px !important;
-  right: 55px;
+@media (min-width: 721px) {
+  .timeslider #import_export, .timeslider #settings{
+    top: 108px !important;
+    right: 55px;
+  }
 }
 
 .timeslider #export > p {
@@ -30,10 +32,12 @@
 .timeslider-bar { background: none; }
 .timeslider-bar p { margin: 8px; font-size: 12px;}
 
-.timeslider-bar #editbar {
-  border: none;
-  background: none !important;
-  margin-right: 10px;
+@media (min-width: 721px) {
+  .timeslider-bar #editbar {
+    border: none;
+    background: none !important;
+    margin-right: 10px;
+  }
 }
 
 .timeslider #padmain {
@@ -49,7 +53,7 @@
 }
 
 .timeslider #editorcontainerbox {
-  height: 100%;
+  min-height: 100%;
   overflow: visible;
   margin-top: 0 !important;
 }
@@ -139,4 +143,41 @@
 .timeslider #authorsList .author {
   padding: 2px 5px;
   border-radius: 3px;
+}
+
+@media (max-width: 720px) {
+  .timeslider-bar #editbar {
+    padding: 3px 0px 5px 10px;
+  }
+  .timeslider-bar #editbar ul {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .timeslider-bar #editbar ul li {
+    margin-left: 10px;
+  }
+  .timeslider #editbar .grouped-right {
+    margin: 0 !important;
+  }
+  .editbar-title h1 {
+    font-size: 1.8em !important;
+  }
+  #timeslider {
+    margin: -5px 0 -2px 0 !important;
+  }
+  #timeslider #timeslider-slider { margin: 0; }
+  #ui-slider-bar {
+    margin-right: 130px;
+  }
+  .timeslider #leftstep { right: 35px; }
+  .timeslider #rightstep { right: 5px; }
+  .timeslider #playpause_button { right: 65px; }
+  #timeslider #timer {
+    top: 5px;
+    left: 5px;
+    text-align: left;
+  }
+  .timeslider #editorcontainerbox {
+    padding-bottom: 55px !important;
+  }
 }

src/static/skins/no-skin/pad.css

@@ -2,4 +2,9 @@
   #sidediv {
     display: none !important;
   }
+}
+@media only screen and (max-width: 720px) {
+  .toolbar ul.menu_left {
+      flex-wrap: wrap;
+  }
 }