Fix mobile view

src/pineapple/css/main.css

@@ -1,3 +1,7 @@
+body {
+    background-color: #fff;
+}
+
 .module-table > * > tr:nth-child(even) {
     background-color: #f5f5f5;
 }
@@ -32,9 +36,9 @@
 }
 
 .module-icon {
-     display: inline;
-     height: 24px;
-     width: 24px;
+    display: inline;
+    height: 24px;
+    width: 24px;
 }
 
 .fixed-addon-width {
@@ -99,10 +103,6 @@
     font-weight: normal;
 }
 
-body {
-    background-color: #f8f8f8;
-}
-
 .logout {
     cursor: pointer;
 }
@@ -129,26 +129,63 @@ body {
     background-color: #eee;
 }
 
+.sidebar, .module-content{
+    -webkit-transition: margin 200ms ease-out;
+    -moz-transition: margin 200ms ease-out;
+    -o-transition: margin 200ms ease-out;
+    transition: margin 200ms ease-out;
+}
+
 @media(min-width:768px) {
-    .sidebar {
-        z-index: 1;
+    .module-content {
         position: absolute;
-        width: 250px;
-        margin-top: 51px;
+        width: calc(100% - 50px);
+        margin-left: 50px;
+        padding: 15px 30px;
     }
 
-    .module-content {
-        position: inherit;
-        margin: 0 0 0 250px;
-        padding: 15px 30px;
-        border-left: 1px solid #e7e7e7;
+    .sidebar{
+        width: 200px;
+        margin-left: -150px;
+        float: left;
+        z-index: 99;
+        min-height: 50px;
+        border-right: 1px solid #e7e7e7;
+        position: relative;
+    }
+
+    nav.sidebar a{
+        padding-right: 13px;
     }
 
-    .navbar-top-links {
-        margin-left: 10px;
+    .sidebar .navbar-collapse, .sidebar .container-fluid{
+        padding: 0;
+    }
+
+    .sidebar li {
+        width: 100%;
+    }
+
+    .sidebar:hover{
+        margin-left: 0px;
+    }
+}
+
+@media (min-width: 1330px) {
+    .module-content {
+        width: calc(100% - 200px);
+        margin-left: 200px;
+    }
+    .sidebar{
+        margin-left: 0px;
+        float: left;
     }
 }
 
+.navbar-header {
+    width: 100%;
+}
+
 .navbar-top-links {
     margin-right: 5px;
     margin-left: 10px;
@@ -201,6 +238,16 @@ body {
     .dropdown-menu-logout {
         max-width: 50px !important;
     }
+
+    .navbar-toggle {
+        float: left;
+        margin-top: 10px;
+        margin-left: 15px;
+    }
+
+    .navbar-brand {
+        padding: 15px 15px 15px 0;
+    }
 }
 
 .login-logo {
@@ -220,4 +267,4 @@ body {
     padding-top: 3px;
     padding-left: 5px;
     float: right;
-}
+}

src/pineapple/index.html

@@ -36,47 +36,49 @@
             <span class="brand-logo"></span>
             <span class="brand-text"></span>
         </a>
+        <ul class="nav navbar-nav navbar-right pull-right navbar-top-links">
+            <li class="dropdown" ng-controller="NotificationController" ng-show="notifications.length">
+                <a class="dropdown-toggle" data-toggle="dropdown" href="">
+                    <img width="18px" src="img/notify.png">
+                    <span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-top">
+                    <li ng-repeat="notification in notifications"><a>{{ notification.message }}</a></li>
+                    <li role="separator" class="divider"></li>
+                    <li ng-click="clearNotifications()"><a><span class="text-center"><i>- Clear -</i></span></a></li>
+                </ul>
+            </li>
+            <li class="dropdown logout" ng-controller="AuthenticationController">
+                <a class="dropdown-toggle" data-toggle="dropdown" href="">
+                    <img width="18px" src="img/logout.png">
+                    <span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-top dropdown-menu-logout">
+                    <li ng-click="logout()"><a>Log Off</a></li>
+                    <li ng-click="rebootPineapple()"><a>Reboot</a></li>
+                    <li ng-click="haltPineapple()"><a>Shut Down</a></li>
+                </ul>
+            </li>
+        </ul>
     </div>
-    <ul class="nav navbar-nav navbar-right navbar-top-links">
-        <li class="dropdown" ng-controller="NotificationController" ng-show="notifications.length">
-            <a class="dropdown-toggle" data-toggle="dropdown" href="">
-                <img width="18px" src="img/notify.png">
-                <span class="caret"></span>
-            </a>
-            <ul class="dropdown-menu dropdown-menu-top">
-                <li ng-repeat="notification in notifications"><a>{{ notification.message }}</a></li>
-                <li role="separator" class="divider"></li>
-                <li ng-click="clearNotifications()"><a><span class="text-center"><i>- Clear -</i></span></a></li>
-            </ul>
-        </li>
-        <li class="dropdown logout" ng-controller="AuthenticationController">
-            <a class="dropdown-toggle" data-toggle="dropdown" href="">
-                <img width="18px" src="img/logout.png">
-                <span class="caret"></span>
-            </a>
-            <ul class="dropdown-menu dropdown-menu-top dropdown-menu-logout">
-                <li ng-click="logout()"><a>Log Off</a></li>
-                <li ng-click="rebootPineapple()"><a>Reboot</a></li>
-                <li ng-click="haltPineapple()"><a>Shut Down</a></li>
-            </ul>
-        </li>
-    </ul>
+</nav>
 
-    <div class="navbar-default sidebar" role="navigation" ng-controller="NavigationController">
-        <div class="sidebar-nav navbar-collapse collapse">
-            <ul class="nav sidebar-nav">
-                <li ng-repeat-start="systemModule in systemModules" ng-class="getClass(systemModule.name)" module="{{ systemModule.name }}"><a href="#!/modules/{{ systemModule.name }}"><img class="module-icon" ng-src="{{ systemModule.icon }}" ng-if="systemModule.icon != null"> {{ systemModule.title }}</a></li>
-                <li ng-if="$index == 3" ng-repeat-end>
-                    <a ng-class="getModuleClass()" onclick="$('.module-nav').collapse('toggle')" href=''><img class="module-icon" src="/modules/ModuleManager/module_icon.svg"> Modules <span class="caret"></span></a>
-                    <ul class="nav module-nav collapse">
-                        <li ng-class="getClass('ModuleManager')" module="ModuleManager"><a href="#!/modules/ModuleManager">Manage Modules</a></li>
-                        <li ng-class="getClass(userModule.name)" ng-repeat="userModule in userModules" module="{{ userModule.name }}"><a href="#!/modules/{{ userModule.name }}"><img class="module-icon" ng-src="{{ userModule.icon }}" ng-if="userModule.icon != null"/> {{ userModule.title }}</a></li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
+<div class="navbar-default sidebar" role="navigation" ng-controller="NavigationController">
+    <div class="sidebar-nav navbar-collapse collapse">
+        <ul class="nav sidebar-nav">
+            <li ng-repeat-start="systemModule in systemModules" ng-class="getClass(systemModule.name)" module="{{ systemModule.name }}">
+                <a href="#!/modules/{{ systemModule.name }}"><img class="module-icon pull-right" ng-src="{{ systemModule.icon }}" ng-if="systemModule.icon != null"> {{ systemModule.title }}</a>
+            </li>
+            <li ng-if="$index == 3" ng-repeat-end>
+                <a ng-class="getModuleClass()" onclick="$('.module-nav').collapse('toggle')" href=''><img class="module-icon pull-right" src="/modules/ModuleManager/module_icon.svg"> Modules <span class="caret"></span></a>
+                <ul class="nav module-nav collapse">
+                    <li ng-class="getClass('ModuleManager')" module="ModuleManager"><a href="#!/modules/ModuleManager">Manage Modules</a></li>
+                    <li ng-class="getClass(userModule.name)" ng-repeat="userModule in userModules" module="{{ userModule.name }}"><a href="#!/modules/{{ userModule.name }}"><img class="module-icon pull-right" ng-src="{{ userModule.icon }}" ng-if="userModule.icon != null"/> {{ userModule.title }}</a></li>
+                </ul>
+            </li>
+        </ul>
     </div>
-</nav>
+</div>
 
 <div class="module-content" ng-view>