gui: Improve header and footer layout on small screens

gui/default/assets/css/overrides.css

@@ -163,64 +163,14 @@ table.table-condensed td.no-overflow-ellipse {
     display: none;
 }
 
-@media (max-width:767px) {
+.nav>li{
-    table.table-condensed td {
+    float: left;
-        /* for mobile phones to allow linebreaks in long repro folder/shared with
-        * columns. */
-        white-space: normal;
-    }
 }
-
 .navbar-right {
     /* to align with panel */
     padding-right: 15px;
 }
 
-/**
- * Menu for select language
- */
-
-@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: 440px;
-    }
-}
-
-
-@media (max-width:479px) {
-    .dropdown-menu {
-        padding-top: 55px;
-    }
-
-    nav .dropdown-toggle {
-        font-size: 14px;
-    }
-
-    .dropdown-toggle {
-        float: left;
-    }
-
-    .navbar-brand {
-        padding-left: 0;
-        padding-top: 16px;
-    }
-
-    .navbar-nav .open .dropdown-menu > li > a {
-        padding: 12px 15px 12px 25px;
-    }
-}
-
-
 .panel-body .table-condensed {
     margin-bottom: 0;
 }
@@ -267,7 +217,6 @@ ul.three-columns li, ul.two-columns li {
 }
 
 /** Footer nav on small devices **/
-
 @media (max-width: 1199px) {
     /* Stay at the end of the page, with space reserved for the footer
     usually taking up two rows. */
@@ -297,4 +246,59 @@ ul.three-columns li, ul.two-columns li {
     .navbar-fixed-bottom {
         position: relative;
     }
+
+    .nav>li {
+        float:right;
+    }
+
+    table.table-condensed td {
+        /* for mobile phones to allow linebreaks in long repro folder/shared with
+        * columns. */
+        white-space: normal;
+    }
+}
+
+@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%;
+     }
 }

gui/default/index.html

@@ -30,27 +30,30 @@
 
   <nav class="navbar navbar-top navbar-default" role="navigation">
     <div class="container">
-      <span class="navbar-brand"><img class="logo" src="assets/img/logo-horizontal.svg" height="32" width="117"/></span>
+      <span class="navbar-brand">
+        <img class="logo hidden-xs" src="assets/img/logo-horizontal.svg" height="32" width="117"/>
+        <img class="logo hidden visible-xs" src="assets/img/favicon.png" height="32"/>
+      </span>
       <p class="navbar-text hidden-xs" ng-class="{'hidden-sm':upgradeInfo && upgradeInfo.newer}">{{thisDeviceName()}}</p>
       <ul class="nav navbar-nav navbar-right">
-        <li ng-if="upgradeInfo && upgradeInfo.newer">
+        <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>
           </button>
         </li>
-        <li ng-if="upgradeInfo && upgradeInfo.majorNewer">
+        <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>
           </button>
         </li>
         <li class="dropdown" language-select></li>
-        <li class="hidden-xs">
+        <li>
           <a href="https://docs.syncthing.net/intro/gui.html" target="_blank">
-            <span class="fa fa-book"></span>&nbsp;<span translate>Help</span>
+            <span class="fa fa-question-circle"></span>&nbsp;<span  class="hidden-xs" translate>Help</span>
           </a>
         </li>
-        <li class="dropdown">
+        <li class="dropdown action-menu">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-cog"></span>&nbsp;<span translate>Actions</span> <span class="caret"></span></a>
+          <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>
           <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>

gui/default/syncthing/core/languageSelectDirective.js

@@ -4,7 +4,7 @@ angular.module('syncthing.core')
         return {
             restrict: 'EA',
             template:
-                    '<a ng-if="visible" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="fa fa-globe"></span>&nbsp;{{localesNames[currentLocale] || "English"}} <span class="caret"></span></a>'+
+                    '<a ng-if="visible" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="fa fa-globe"></span><span class="hidden-xs">&nbsp;{{localesNames[currentLocale] || "English"}}</span> <span class="caret"></span></a>'+
                     '<ul ng-if="visible" class="dropdown-menu">'+
                         '<li ng-repeat="(i,name) in localesNames" ng-class="{active: i==currentLocale}">'+
                             '<a href="#" data-ng-click="changeLanguage(i)">{{name}}</a>'+