gui: Improve navigation header layout on mobile

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3240

gui/default/assets/css/overrides.css

@@ -135,12 +135,27 @@ table.table-condensed td.no-overflow-ellipse {
     display: none;
 }
 
+*[language-select] > .dropdown-menu {
+    width: 450px;
+}
+
+*[language-select] > .dropdown-menu > li {
+    float: left;
+    width: 50%;
+}
+
+*[language-select] > .dropdown-menu > li > a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .nav>li{
     float: left;
 }
 .navbar-right {
     /* to align with panel */
     padding-right: 15px;
+    float: right;
 }
 
 .panel-body .table-condensed {
@@ -160,7 +175,7 @@ table.table-condensed td.no-overflow-ellipse {
  */
 
 .panel-icon{
-    float:left;
+    float: left;
     margin-right: 15px;
 }
 
@@ -257,8 +272,29 @@ ul.three-columns li, ul.two-columns li {
         position: relative;
     }
 
-    .nav>li {
-        float:right;
+    .navbar-nav .open .dropdown-menu {
+        position: absolute;
+        left: auto;
+        right: 0;
+        background-color: #ffffff;
+        border: 1px solid #cccccc;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+        border-radius: 2px;
+    }
+
+    *[language-select] {
+        position: static !important;
+    }
+
+    *[language-select] > .dropdown-menu {
+        margin-left: 15px;
+        margin-right: 15px;
+        margin-top: -12px !important;
+        max-width: 450px;
+        height: 265px;
+        overflow-y: scroll;
     }
 
     table.table-condensed td {
@@ -268,47 +304,17 @@ ul.three-columns li, ul.two-columns li {
     }
 }
 
-@media (min-width:650px) {
-    *[language-select] > .dropdown-menu > li {
-        width: 50%;
-        float: left;
-    }
-    *[language-select] > .dropdown-menu {
-        width: 440px;
-    }
-}
-
-/**
- * Menu for select language
- */
-@media (min-width:480px) and (max-width:649px) {
-    *[language-select] > .dropdown-menu {
-        width: 230px;
-    }
-}
-
 @media (max-width:479px) {
-    .dropdown-menu {
-        padding-top: 55px;
-    }
 
     nav .dropdown-toggle {
         font-size: 1em;
     }
 
-    .dropdown-toggle {
-        float: left;
-    }
-
-    .logo{
-        margin:auto;
-    }
-
     .navbar-nav .open .dropdown-menu > li > a {
         padding: 12px 15px 12px 25px;
     }
 
-    .navbar-fixed-bottom li{
-         width:100%;
-     }
+    .navbar-fixed-bottom li {
+         width: 100%;
+    }
 }

gui/default/index.html

@@ -40,22 +40,29 @@
       <ul class="nav navbar-nav navbar-right">
         <li ng-if="upgradeInfo && upgradeInfo.newer" class="upgrade-newer">
           <button type="button" class="btn navbar-btn btn-primary btn-sm" ng-click="upgrade()">
-            <span class="fa fa-arrow-circle-up"></span>&nbsp;<span translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
+            <span class="fa fa-arrow-circle-up"></span>
+            <span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
           </button>
         </li>
         <li ng-if="upgradeInfo && upgradeInfo.majorNewer" class="upgrade-newer-major">
           <button type="button" class="btn navbar-btn btn-danger btn-sm" ng-click="upgradeMajor()">
-            <span class="fa fa-arrow-circle-up"></span>&nbsp;<span translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
+            <span class="fa fa-arrow-circle-up"></span>
+            <span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
           </button>
         </li>
         <li class="dropdown" language-select></li>
         <li>
           <a class="navbar-link" href="https://docs.syncthing.net/intro/gui.html" target="_blank">
-            <span class="fa fa-question-circle"></span>&nbsp;<span  class="hidden-xs" translate>Help</span>
+            <span class="fa fa-question-circle"></span>
+            <span class="hidden-xs" translate>Help</span>
           </a>
         </li>
         <li class="dropdown action-menu">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-cog"></span>&nbsp;<span class="hidden-xs" translate>Actions</span> <span class="caret"></span></a>
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <span class="fa fa-cog"></span>
+            <span class="hidden-xs" translate>Actions</span>
+            <span class="caret"></span>
+          </a>
           <ul class="dropdown-menu">
             <li><a href="" ng-click="editSettings()"><span class="fa fa-fw fa-cog"></span>&nbsp;<span translate>Settings</span></a></li>
             <li><a href="" ng-click="idDevice(thisDevice())"><span class="fa fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li>