Collapsable sidebar for mobile sized screens

css/glowingbear.css

@@ -116,19 +116,19 @@ input[type=text], input[type=password], .badge {
 #topbar {
     position: fixed;
     width: 100%;
-    height: 25px;
+    height: 35px;
-    max-height: 25px;
+    max-height: 35px;
-    z-index: 1;
+    z-index: 2;
-    line-height: 25px;
+    line-height: 35px;
     white-space: nowrap;
 }
 #topbar .brand {
     float: left;
-    height: 25px;
+    height: 35px;
     padding-left: 5px;
 }
     #topbar .brand img {
-        height: 25px;
+        height: 32px;
     }
 #topbar .title {
     position: fixed;
@@ -155,8 +155,9 @@ input[type=text], input[type=password], .badge {
     width: 140px;
     min-height: 100%;
     height: 100%;
-    overflow: auto;
+    overflow-y: auto;
-    padding-top: 35px; /* topbar */
+    overflow-x: hidden;
+    margin-top: 35px; /* topbar */
     font-size: smaller;
   }
 #sidebar form {
@@ -175,7 +176,7 @@ input[type=text], input[type=password], .badge {
     overflow-x: hidden;
     right: 0;
     top: 0;
-    padding-top: 25px; 
+    padding-top: 35px; 
     padding-left: 5px;
     padding-bottom: 35px;
 }
@@ -225,7 +226,7 @@ input[type=text], input[type=password], .badge {
     overflow-y: auto;
     margin-left: 145px;    /* sidebar */
     width: auto;
-    top: 25px; /* topbar */
+    top: 35px; /* topbar */
     padding-bottom: 10px;
     margin-right: -5px;
 }
@@ -243,10 +244,19 @@ input[type=text], input[type=password], .badge {
     background-color: #181818;
 }
 @media (max-width: 968px) {
-    #topbar .title {
+    #sidebar {
-        left: 36px;
+        font-size: normal;
+        z-index: 1;
+        width: 60%;
     }
-    #sidebar, #bufferlines, #nicklist {
+    #sidebar.in, #sidebar.collapsing {
+        -webkit-box-shadow: 0px 0px 120px #000;
+                box-shadow: 0px 0px 120px #000;
+    }
+    #topbar .title {
+        left: 40px;
+    }
+    #bufferlines, #nicklist {
         position: relative;
         min-height: 0;
         margin-left: 0;
@@ -254,7 +264,7 @@ input[type=text], input[type=password], .badge {
         max-width: 100%;
         border: 0;
     }
-    #sidebar, #nicklist {
+    #nicklist {
         width: 100%;
         text-align: center;
     }
@@ -287,23 +297,6 @@ input[type=text], input[type=password], .badge {
     #bufferlines td.prefix:after {
         content: ">";
     }
-    .nav li.bufferfilter {
-        margin-top: 2px;
-        height: 47px;
-    }
-    .nav li form, .nav li form input {
-        height: 100%;
-    }
-    .nav-stacked li {
-        float: left;
-    }
-    .nav-stacked li a {
-        min-width: 80px;
-        padding: 15px;
-    }
-    .hide-mobile {
-        display: none;
-    }
 }
 .color-light-green {
     color: chartreuse;

index.html

@@ -163,7 +163,9 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
     <div class="content" ng-show="connected">
       <div id="topbar" class="horizontal-line">
             <div class="brand">
-              <img alt="brand" src="img/favicon.png" title="Connected to {{ host }}:{{ port}}">
+              <a href="#" data-target="#sidebar" data-toggle="collapse">
+                <img alt="brand" src="img/favicon.png" title="Connected to {{ host }}:{{ port}}">
+              </a>
             </div>
             <button ng-show="debugMode" ng-click="countWatchers()">Count Watchers</button>
             <div class="title" ng-bind-html="activeBuffer().title | linky:'_blank'"></div>
@@ -251,7 +253,7 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
               </a>
             </div>
       </div>
-      <div id="sidebar" class="vertical-line">
+      <div id="sidebar" class="vertical-line collapse in">
         <ul class="nav nav-pills nav-stacked">
           <li class="bufferfilter">
             <form role="form">

js/websockets.js

@@ -552,6 +552,16 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     $store.bind($scope, "orderbyserver", false);
     // Save setting for displaying embeds in rootscope so it can be used from service
     $rootScope.visible = $scope.noembed === false;
+
+    // If we are on mobile chhange some defaults
+    // We use 968 px as the cutoff, which should match the value in glowingbear.css
+    if(document.body.clientWidth < 968) {
+        $scope.nonicklist = true;
+        $scope.noembed = true;
+        $scope.notimestamp = true;
+    }
+
+
     // Watch model and update show setting when it changes
     $scope.$watch('noembed', function() {
         $rootScope.visible = $scope.noembed === false;
@@ -564,6 +574,11 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     $rootScope.predicate = $scope.orderbyserver ? 'serverSortKey' : 'number';
 
     $scope.setActiveBuffer = function(bufferId, key) {
+        // If we are on mobile we need to collapse the menu on sidebar clicks
+        // We use 968 px as the cutoff, which should match the value in glowingbear.css
+        if(document.body.clientWidth<968) {
+            $('#sidebar').collapse();
+        }
         return models.setActiveBuffer(bufferId, key);
     };