Merge pull request #1906 from ralder/fix-style-top-menu-for-small-devices

fix language menu for small screen devices

gui/assets/css/overrides.css

@@ -153,27 +153,33 @@ table.table-condensed td {
     padding-right: 15px;
 }
 
-
 /**
  * Menu for select language
  */
 
-@media (min-width:480px) {
+@media (min-width:480px) and (max-width:649px) {
+    *[language-select] > .dropdown-menu {
+        width: 230px;
+    }
+}
+
+@media (min-width:650px) {
     *[language-select] > .dropdown-menu > li {
         width: 50%;
         float: left;
     }
     *[language-select] > .dropdown-menu {
-        width: 400px;
+        width: 440px;
     }
 }
 
+
 @media (max-width:479px) {
     .dropdown-menu {
         padding-top: 55px;
     }
 
-    *[language-select] > .dropdown-toggle {
+    nav .dropdown-toggle {
         font-size: 14px;
     }
 

gui/index.html

@@ -45,10 +45,9 @@
           </button>
         </li>
         <li class="dropdown" language-select></li>
-        <li>
+        <li class="hidden-xs">
           <a href="http://docs.syncthing.net/intro/gui.html" target="_blank">
-            <span class="glyphicon glyphicon-book"></span>&nbsp;
-            <span translate>Help</span>
+            <span class="glyphicon glyphicon-book"></span>&nbsp;<span translate>Help</span>
           </a>
         </li>
         <li class="dropdown">
@@ -60,6 +59,11 @@
             <li><a href="" ng-click="shutdown()"><span class="glyphicon glyphicon-off"></span>&nbsp;<span translate>Shutdown</span></a></li>
             <li><a href="" ng-click="restart()"><span class="glyphicon glyphicon-refresh"></span>&nbsp;<span translate>Restart</span></a></li>
             <li class="divider"></li>
+            <li class="visible-xs">
+              <a href="http://docs.syncthing.net/intro/gui.html" target="_blank">
+                <span class="glyphicon glyphicon-book"></span>&nbsp;<span translate>Help</span>
+              </a>
+            </li>
             <li><a href="" ng-click="about()"><span class="glyphicon glyphicon-heart-empty"></span>&nbsp;<span translate>About</span></a></li>
           </ul>
         </li>