Panel - Changes in mobile view

src/pineapple/css/main.css

@@ -129,7 +129,7 @@ body {
     background-color: #eee;
 }
 
-.sidebar, .module-content{
+.sidebar, .module-content {
     -webkit-transition: margin 200ms ease-out;
     -moz-transition: margin 200ms ease-out;
     -o-transition: margin 200ms ease-out;
@@ -145,7 +145,7 @@ body {
         border-left: 1px solid #e7e7e7;
     }
 
-    .sidebar{
+    .sidebar {
         width: 200px;
         height: 100%;
         margin-left: -150px;
@@ -156,11 +156,11 @@ body {
         position: relative;
     }
 
-    .sidebar a{
+    .sidebar a {
         padding-right: 12px !important;
     }
 
-    .sidebar .navbar-collapse, .sidebar .container-fluid{
+    .sidebar .navbar-collapse, .sidebar .container-fluid {
         padding: 0;
     }
 
@@ -168,7 +168,8 @@ body {
         width: 100%;
     }
 
-    .sidebar:hover{
+    /*.sidebar:hover,*/
+    .sidebar-toggle {
         margin-left: 0;
     }
 }
@@ -178,7 +179,8 @@ body {
         width: calc(100% - 200px);
         margin-left: 200px;
     }
-    .sidebar{
+
+    .sidebar {
         margin-left: 0;
         float: left;
     }
@@ -290,3 +292,7 @@ body {
 #accordion .panel-heading.collapsed .panel-title:after {
     content: url('/img/chevron_down.svg');
 }
+
+.menu-toggle-icon {
+    transform: rotate(-90deg);
+}

src/pineapple/index.html

@@ -4,13 +4,10 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no">
     <title>WiFi Pineapple</title>
-
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="css/main.css">
-
     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
     <link rel="icon" href="img/favicon.ico" type="image/x-icon">
-
     <script src="js/vendor/jquery.min.js"></script>
     <script src="js/vendor/bootstrap.min.js"></script>
     <script src="js/vendor/angular.min.js"></script>
@@ -39,10 +36,10 @@
         <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">
+                    <img width="18px" src="img/notify.png"/>
                     <span class="caret"></span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-top">
+                <ul class="dropdown-menu dropdown-menu-right 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>
@@ -50,10 +47,10 @@
             </li>
             <li class="dropdown logout" ng-controller="AuthenticationController">
                 <a class="dropdown-toggle" data-toggle="dropdown" href="">
-                    <img width="18px" src="img/logout.png">
+                    <img width="18px" src="img/logout.png"/>
                     <span class="caret"></span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-top dropdown-menu-logout">
+                <ul class="dropdown-menu dropdown-menu-right 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>
@@ -67,22 +64,39 @@
     <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>
+                <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>
+                <a ng-class="getModuleClass()" onclick="$('.module-nav').collapse('toggle')" href='' data-ignore="true">
+                    <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>
+                    <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>
+            <li class="menu-toggle hidden-lg hidden-xs">
+                <a onclick="$('div.sidebar').toggleClass('sidebar-toggle')" href="">
+                    <img class="module-icon menu-toggle-icon pull-right" src="/img/chevron_down_gray.svg" data-ignore="true"/>
+                    Toggle menu
+                </a>
+            </li>
         </ul>
     </div>
 </div>
 
-<div class="module-content" ng-view>
-
-</div>
+<div class="module-content" ng-view></div>
 
 <div id="loginModal" class="modal fade" role="dialog"  data-keyboard="false" ng-controller="AuthenticationController">
     <div class="modal-dialog">
@@ -92,7 +106,7 @@
             </div>
             <div class="modal-body">
                 <div class="row">
-                    <img class="img-responsive login-logo" src="img/logo.png">
+                    <img class="img-responsive login-logo" src="img/logo.png"/>
                 </div>
                 <form role="form" ng-submit="login()">
                     <fieldset>
@@ -116,5 +130,12 @@
     </div>
 </div>
 
+<script type="text/javascript">
+    $('div.sidebar').click(function(event) {
+        if (!$(event.target).attr("data-ignore")) {
+            $('div.sidebar').removeClass('sidebar-toggle');
+        }
+    });
+</script>
 </body>
 </html>