Fix toolbar on mobile

Partially fixes ether#3697 Makes the toolbar more responsive.
pkrasicki · Mar 13, 2020 · 0c71683 · 0c71683
1 parent bb868be
commit 0c71683
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 154 deletions.
diff --git a/src/static/css/pad.css b/src/static/css/pad.css
@@ -66,7 +66,7 @@ a img {
   padding-left: 1px;
   z-index: 2;
   overflow: hidden;
-  float: left
+  float: left;
 }
 .toolbar ul li {
   float: left;
@@ -1002,19 +1002,121 @@ input[type=checkbox] {
   border-left: 1px solid #ccc !important;
 }
 
-@media screen and (max-width: 600px) {
-  .toolbar ul li.separator {
-    display: none;
+@media (max-width: 630px) {
+  #users {
+    top: auto;
+    right:0px !important;
+    bottom: 33px;
+    border-radius: 0px !important;
+    height: 55px !important;
+    overflow: auto;
   }
-  .toolbar ul li a {
-    padding: 4px 1px
+  #mycolorpicker {
+    left: 0px;
+    top:37px !important;
+    position:fixed;
+    /* #mycolorpicker: width -#users: width */;
+  }
+  #editorcontainer {
+    margin-bottom: 33px
+  }
+  /* cancel non-mobile border (will be defined on ".toolbar ul.menu_left" bellow) */
+  .toolbar {
+    border-bottom: 0;
+  }
+  .toolbar ul {
+    background: #f7f7f7;
+    background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%);
+    background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%);
+    background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%);
+    background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%);
+    background: linear-gradient(#f7f7f7, #f1f1f1 80%);
+    width: 100%;
+    overflow: hidden;
+  }
+  .toolbar ul.menu_left {
+    right:0px;
+    position: fixed;
+    top: 0;
+    padding-top: 4px;
+    border-bottom: 1px solid #ccc;
+    z-index: 10;
+  }
+  .toolbar ul.menu_right {
+    right:0px !important;
+    height: 32px;
+    position: fixed;
+    bottom: 0;
+    border-top: 1px solid #ccc;
+  }
+  .toolbar ul.menu_right > li:last-child {
+    float: right;
+  }
+  .toolbar ul.menu_right > li a {
+    border-radius: 0;
+    border: none;
+    background: none;
+    margin: 0;
+    padding: 8px;
+  }
+  .toolbar ul li a.selected {
+    background: none !important
+  }
+  li[data-key="showusers"] > a {
+
+    margin-top:-10px;
+    padding-top:2px !important;
+    line-height:20px;
+    vertical-align:top !important;
+  }
+  #chaticon {
+    position:fixed;
+    right:48px;
   }
+  .popup {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  #settings,
+  #import_export,
+  #connectivity,
+  #embed {
+    top:auto;
+    left: 0;
+    bottom: 33px;
+    right: 0;
+  }
+  .toolbar ul li .separator {
+    display: none
+  }
+  #online_count {
+    line-height: 24px
+  }
+  #chatbox{
+    position:fixed;
+    bottom:33px !important;
+    margin: 65px 0 0 0;
+  }
+  #gritter-notice-wrapper{
+    bottom:43px !important;
+    right:10px !important;
+  }
+}
+
+@media (max-width: 600px) {
   .toolbar ul.menu_left {
     left:0px;
     right:150px;
   }
 }
-@media all and (max-width: 400px){
+
+@media (max-width: 400px) {
   #gritter-notice-wrapper{
     max-height:172px;
     overflow:hidden;
@@ -1058,6 +1160,7 @@ input[type=checkbox] {
   #editbar {
     height: 62px;
   }
+
   .toolbar ul.menu_left {
     left:0px;
     right:100px;
@@ -1073,112 +1176,22 @@ input[type=checkbox] {
   }
 }
 
-/* Mobile devices */
-@media only screen and (min-device-width: 320px) and (max-device-width: 720px) {
-    #users {
-      top: auto;
-      right:0px !important;
-      bottom: 33px;
-      border-radius: 0px !important;
-      height: 55px !important;
-      overflow: auto;
-    }
-    #mycolorpicker {
-      left: 0px;
-      top:37px !important;
-      position:fixed;
-      /* #mycolorpicker: width -#users: width */;
-    }
-    #editorcontainer {
-      margin-bottom: 33px
-    }
-    /* cancel non-mobile border (will be defined on ".toolbar ul.menu_left" bellow) */
-    .toolbar {
-      border-bottom: 0;
-    }
-    .toolbar ul {
-      background: #f7f7f7;
-      background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%);
-      background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%);
-      background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%);
-      background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%);
-      background: linear-gradient(#f7f7f7, #f1f1f1 80%);
-      width: 100%;
-      overflow: hidden;
-    }
-    .toolbar ul.menu_left {
-      right:0px;
-      position: fixed;
-      top: 0;
-      padding-top: 4px;
-      border-bottom: 1px solid #ccc;
-      z-index: 10;
-    }
-    .toolbar ul.menu_right {
-      right:0px !important;
-      height: 32px;
-      position: fixed;
-      bottom: 0;
-      border-top: 1px solid #ccc;
-    }
-    .toolbar ul.menu_right > li:last-child {
-      float: right;
-    }
-    .toolbar ul.menu_right > li a {
-      border-radius: 0;
-      border: none;
-      background: none;
-      margin: 0;
-      padding: 8px;
-    }
-    .toolbar ul li a.selected {
-      background: none !important
-    }
-    li[data-key="showusers"] > a {
+@media (max-width: 385px) {
+  .toolbar ul li.separator {
+    display: none;
+  }
+}
 
-      margin-top:-10px;
-      padding-top:2px !important;
-      line-height:20px;
-      vertical-align:top !important;
-    }
-    #chaticon {
-      position:fixed;
-      right:48px;
-    }
-    .popup {
-      -webkit-border-radius: 0;
-      -moz-border-radius: 0;
-      border-radius: 0;
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      -ms-box-sizing: border-box;
-      box-sizing: border-box;
-      width: 100%;
-    }
-    #settings,
-    #import_export,
-    #connectivity,
-    #embed {
-      top:auto;
-      left: 0;
-      bottom: 33px;
-      right: 0;
-    }
-    .toolbar ul li .separator {
-      display: none
-    }
-    #online_count {
-      line-height: 24px
-    }
-    #chatbox{
-      position:fixed;
-      bottom:33px !important;
-      margin: 65px 0 0 0;
-    }
-    #gritter-notice-wrapper{
-      bottom:43px !important;
-      right:10px !important;
-    }
+@media (max-width: 340px) {
+  .toolbar ul li a {
+    padding: 4px 3px
+  }
+}
+
+@media (max-width: 300px) {
+  #chaticon #chatlabel {
+    display: none;
+  }
 }
 
 #passwordRequired{

diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css
@@ -99,7 +99,7 @@
   right: 30px;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 630px) {
   #chaticon {
     right: 0;
     bottom: 44px;

diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css
@@ -97,49 +97,15 @@
 }
 
 @media (max-width: 720px) {
-.toolbar ul {
-    height: 39px;
-    background: none;
-    background-color: transparent;
-    border: none !important;
-    padding: 0 !important;
-    overflow-x: visible;
-  }
-  .toolbar ul.menu_left {
-    padding-top: 2px !important;
-  }
-  .toolbar ul.menu_right {
-    left: 0;
-    padding-left: 8px !important;
-    padding-top: 8px !important;
-    height: 35px !important;
-    border-top: 1px solid #d2d2d2 !important;
-    background-color: white;
-  }
-  .toolbar ul li a {
-    padding: 4px 5px !important;
-  }
-
-  .toolbar ul li[data-key=showusers] {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-  .toolbar ul li[data-key=showusers] a {
-    padding-top: 9px !important;
-  }
-  .toolbar ul li a:hover { background-color: transparent; }
-
   #connectivity, #embed, #import_export, #settings { bottom: 42px; }
 
-  li.superscript,
-  li.subscript,
-  li[data-key="undo"],
-  li[data-key="redo"] {
-    display: none;
-  }
-
   .toolbar ul li.separator { margin: 0; }
 }
 
-
+@media (max-width: 630px) {
+  .toolbar ul.menu_left {
+    position: relative;
+    padding-top: 0;
+    left: 0;
+  }
+}