code refactor

src/index.html

@@ -242,36 +242,46 @@
     </div>
 
     <footer class="main-footer">
-        <a class="sidebar-toggle" data-toggle="offcanvas" role="button" title="{{'Toggle Navigation' | translate}}"></a>
+        <nav class="navbar" role="navigation">
+            <div class="navbar-toolbar">
+                <ul class="nav navbar-nav">
+                    <li>
+                        <a data-toggle="offcanvas" role="button" title="{{'Toggle Navigation' | translate}}">
+                            <i class="fa fa-bars"></i>
+                        </a>
+                    </li>
+                    <li class="divider"></li>
+                    <li class="dropup">
+                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" title="{{'Quick Setting' | translate}}">
+                            <i class="fa fa-wrench"></i>
+                            <span translate>Quick Setting</span>
+                            <i class="fa fa-caret-right fa-right-bottom fa-rotate-45 fa-half" aria-hidden="true"></i>
+                        </a>
+                        <ul class="dropdown-menu" role="menu">
+                            <li>
+                                <a class="pointer-cursor" ng-click="showQuickSettingDialog('globalSpeedLimit', 'Global Speed Limit')">
+                                    <span translate>Global Speed Limit</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
 
-        <div class="toolbar dropup">
+            <div class="pull-right ng-cloak" ng-if="globalStatusContext.isEnabled">
-            <a class="dropdown-toggle" data-toggle="dropdown" role="button" title="{{'Quick Setting' | translate}}">
+                <a class="global-status" title="{{('Click to pin' | translate)}}" ng-pop-chart ng-data="globalStatusContext.data"
-                <i class="fa fa-wrench"></i>
+                   ng-container="body" ng-placement="top" ng-trigger="click hover" ng-popover-class="global-status-chart">
-                <span translate>Quick Setting</span>
-                <i class="fa fa-caret-right fa-right-bottom fa-rotate-45 fa-half" aria-hidden="true"></i>
-            </a>
-            <ul class="dropdown-menu" role="menu">
-                <li>
-                    <a class="pointer-cursor" ng-click="showQuickSettingDialog('globalSpeedLimit', 'Global Speed Limit')">
-                        <span translate>Global Speed Limit</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-
-        <div class="pull-right ng-cloak" ng-if="globalStatusContext.isEnabled">
-            <a class="global-status" title="{{('Click to pin' | translate)}}" ng-pop-chart ng-data="globalStatusContext.data"
-               ng-container="body" ng-placement="top" ng-trigger="click hover" ng-popover-class="global-status-chart">
                 <span class="realtime-speed">
                     <i class="icon-download fa fa-arrow-down"></i>
                     <span ng-bind="(globalStat.downloadSpeed | readableVolume) + '/s'"></span>
                 </span>
-                <span class="realtime-speed">
+                    <span class="realtime-speed">
                     <i class="icon-upload fa fa-arrow-up"></i>
                     <span ng-bind="(globalStat.uploadSpeed | readableVolume) + '/s'"></span>
                 </span>
-            </a>
+                </a>
-        </div>
+            </div>
+        </nav>
     </footer>
 
     <ng-setting-dialog setting="quickSettingContext"></ng-setting-dialog>

src/styles/core/core.css

@@ -69,8 +69,27 @@ td {
     overflow-y: scroll;
 }
 
-.main-footer .toolbar {
+.main-footer > .navbar {
+    margin-bottom: 0;
+    min-height: inherit;
+}
+
+.main-footer > .navbar > .navbar-toolbar > .nav {
+    float: left;
+    margin: 0;
+}
+
+.main-footer > .navbar > .navbar-toolbar > .nav > li {
     display: inline-block;
+    float: left;
+}
+
+.main-footer > .navbar > .navbar-toolbar > .nav > li > a {
+    padding: 0 10px 0 10px;
+}
+
+.main-footer > .navbar > .navbar-toolbar > .nav > li:first-child > a {
+    padding-left: 0;
 }
 
 .dropdown-menu.right-align {
@@ -103,6 +122,11 @@ td {
         border: 1px solid #eee;
         background-color: #fff;
     }
+
+    .main-footer > .navbar > .navbar-toolbar > .nav > li > a {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
 }
 
 /* toolbar */

src/styles/theme/default.css

@@ -40,14 +40,6 @@
     top: 15px;
 }
 
-.skin-aria-ng .main-header .navbar .sidebar-toggle, .skin-aria-ng .main-footer .sidebar-toggle, .skin-aria-ng .main-footer .toolbar > a {
-    color: #707070;
-}
-
-.skin-aria-ng .main-header .navbar .sidebar-toggle:hover, .skin-aria-ng .main-footer .sidebar-toggle:hover, .skin-aria-ng .main-footer .toolbar > a:hover, .skin-aria-ng .main-footer .toolbar.open > a {
-    color: #0080ff;
-}
-
 .skin-aria-ng .main-header .navbar .navbar-searchbar .form-control-icon {
     color: #999999;
 }
@@ -210,16 +202,30 @@
     font-size: 12px;
 }
 
-.skin-aria-ng .main-footer .sidebar-toggle {
+.skin-aria-ng .main-footer > .navbar {
-    float: left;
+    border: 0;
-    background-color: transparent;
-    background-image: none;
-    padding: 0 15px 0 0;
-    font-family: fontAwesome;
 }
 
-.skin-aria-ng .main-footer .sidebar-toggle:before {
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li.divider {
-    content: "\f0c9";
+    padding-top: 16px;
+    margin-left: 4px;
+    margin-right: 4px;
+    border-right: 1px solid #ccc;
+    position: relative;
+    top: 0;
+}
+
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a {
+    color: #707070;
+    line-height: 17px;
+}
+
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a:hover,
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a:active,
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a:focus,
+.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li.open > a {
+    color: #0080ff;
+    background: none;
 }
 
 .skin-aria-ng .global-status {