html&css changes for mobile usage

css/glowingbear.css

@@ -263,60 +263,7 @@ input[type=text], input[type=password], .badge {
 .navbar-inverse {
     background-color: #181818;
 }
-@media (max-width: 968px) {
+
-    #sidebar {
-        font-size: normal;
-        z-index: 1;
-        width: 0;
-    }
-    #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;
-        height: auto;
-        max-width: 100%;
-        border: 0;
-    }
-    #nicklist {
-        width: 100%;
-        text-align: center;
-    }
-    #bufferlines {
-        padding-bottom: 38px; /* navbar fixed bottom */
-    }
-    .navbar-fixed-bottom {
-        margin: 0;
-    }
-    .navbar {
-        min-height: 0%;
-    }
-    #bufferlines td.time {
-        display: inline;
-        padding-right: 0;
-    }
-    #bufferlines td.prefix {
-        display: inline;
-        padding-right: 0;
-        border: 0;
-    }
-    #bufferlines td.message {
-        padding-left: 0;
-        display: inline;
-    }
-    #bufferlines td.prefix:before {
-        content: "<";
-    }
-    #bufferlines td.prefix:after {
-        content: ">";
-    }
-}
 .color-light-green {
     color: chartreuse;
 }
@@ -363,3 +310,92 @@ img.embed {
 table.notimestamp td.time {
     display: none;
 }
+
+
+/* */
+/* Mobile layout */
+/* */
+@media (max-width: 968px) {
+    .message span {
+        color: #C7C7C7;
+    }
+
+    .bufferline {
+        line-height: 25px;
+    }
+
+    #sidebar {
+        font-size: normal;
+        z-index: 1;
+        bottom: 0px;
+        width: 60%;
+        top: 0px;
+    }
+
+    #sidebar.in, #sidebar.collapsing {
+        -webkit-box-shadow: 0px 0px 120px #000;
+        box-shadow: 0px 0px 120px #000;
+        bottom: 0px;
+    }
+
+    #topbar .title {
+        left: 40px;
+    }
+
+    #bufferlines, #nicklist {
+        position: relative;
+        min-height: 0;
+        margin-left: 0;
+        height: auto;
+        max-width: 100%;
+        border: 0;
+    }
+
+    #nicklist {
+        width: 160px;
+        text-align: center;
+        -webkit-box-shadow: 0px 0px 120px #000;
+        box-shadow: 0px 0px 120px #000;
+        position: fixed;
+        margin-top: 10px;
+        background: #282828;
+        bottom: 0px;
+    }
+
+    #bufferlines {
+        padding-bottom: 38px;
+     /* navbar fixed bottom */;
+    }
+
+    .navbar-fixed-bottom {
+        margin: 0;
+    }
+
+    .navbar {
+        min-height: 0%;
+    }
+
+    #bufferlines td.time {
+        display: inline;
+        padding-right: 0;
+    }
+
+    #bufferlines td.prefix {
+        display: inline;
+        padding-right: 0;
+        border: 0;
+    }
+
+    #bufferlines td.message {
+        padding-left: 0;
+        display: inline;
+    }
+
+    #bufferlines td.prefix:before {
+        content: "<";
+    }
+
+    #bufferlines td.prefix:after {
+        content: ">";
+    }
+}

index.html

@@ -17,6 +17,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-sanitize.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-touch.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
     <script type="text/javascript" src="3rdparty/inflate.min.js"></script>
     <script type="text/javascript" src="js/localstorage.js"></script>
@@ -270,7 +271,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           </a>
         </div>
       </div>
-      <div bindonce id="sidebar" class="vertical-line collapse in">
+      <div bindonce id="sidebar" ng-swipe-left="swipeSidebar()" class="vertical-line collapse in">
         <ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey')}">
           <li class="bufferfilter">
             <form role="form">
@@ -287,7 +288,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
         </ul>
       </div>
       <div bindonce id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist}">
-        <div id="nicklist" ng-show="showNicklist" class="vertical-line-left">
+        <div id="nicklist" ng-show="showNicklist" ng-swipe-right="closeNick()" class="vertical-line-left">
           <ul class="nicklistgroup list-unstyled" ng-repeat="group in activeBuffer().nicklist">
             <li ng-repeat="nick in group.nicks|orderBy:'name'" ng-click="openBuffer(nick.name)">
               <a ng-click="nickAction(nick)"><span bo-class="nick.prefixClasses" bo-text="nick.prefix"></span><span bo-class="nick.nameClasses" bo-text="nick.name"></span></a>
@@ -305,7 +306,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
               </td>
             </tr>
           </tbody>
-          <tbody ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
+          <tbody ng-swipe-right="swipeSidebar()" ng-swipe-left="openNick()" ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
             <tr class="bufferline">
               <td class="time">
                 <span class="date" bo-class="{'repeated-time': bufferline.shortTime==bufferlines[$index-1].shortTime}">