Use sidebar instead of top nav

12 years ago · 1f4579748c
parent 01f7b616b3
commit 1f4579748c
2 changed files with 41 additions and 22 deletions
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@ -37,29 +37,55 @@ input#sendMessage {
 body {
    color: white;
    background-color: #222;
-    padding-left: 5px;
+    padding-left: 0;
    padding-right: 5px;
    padding-bottom:70px;
-    padding-top: 70px;
 }

 input#sendMessage {
    border: 0;
    width: 100%;
 }
+#sidebar {
+    position: fixed;
+    width: 12%;
+    min-height: 100%;
+    height: 100%;
+    min-width: 130px;
+    overflow: auto;
+    background: #282828;
+}
 .content {
    height: 100%; 
    min-height: 100%; 
-    display: block;
 }
 .bufferlines {
    font-family: monospace;
    overflow-y: auto;
+    margin-left: 14%;
+    width: auto;
+    position: relative;
 }

+.navbar-fixed-bottom {
+    margin: 0 5px 0 14%;
+}
+@media (max-width: 968px) {
+    #sidebar, .bufferlines {
+        position: relative;
+        min-height: 0;
+        margin-left: 0;
+        max-width: 100%;
+        border: 0;
+    }
+    #sidebar {
+        width: 100%;
+        text-align: center;
+    }
    .navbar-fixed-bottom {
        margin: 0 5px 0 5px;
    }
+}
 .color-light-green {
    color: chartreuse;
 }
--- a/index.html
+++ b/index.html
@ -19,23 +19,6 @@
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </head>
  <body ng-controller="WeechatCtrl">
-    <nav ng-show="connected" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-      </div>
-      <div class="navbar-collapse collapse">
-        <ul class="nav navbar-nav ">
-          <li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
-          <a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">{{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span> <span class="badge" ng-class="{'danger': content.notification }" ng-bind="content.unread"></span></a>
-          </li>
-        </ul>
-      </div>
-    </nav>
    <div ng-hide="connected" class="container">
      <h2>
        <img src="img/favicon.png">
@ -87,6 +70,16 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
          </form>
        </div>
    <div class="content" ng-show="connected">
+      <div id="sidebar">
+        <ul class="nav nav-pills nav-stacked">
+          <li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
+            <a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">
+              <span class="badge pull-right" ng-class="{'danger': content.notification }" ng-bind="content.unread"></span>
+              {{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
+            </a>
+          </li>
+        </ul>
+      </div>
      <div class="bufferlines">
        <div class="bufferline" ng-repeat="bufferline in activeBuffer().lines">
          <span class="date text-muted">