From e7adbffa479cc92cb3c5d36965d086b79aba2712 Mon Sep 17 00:00:00 2001
From: Tor Hveem <tor@hveem.no>
Date: Mon, 7 Oct 2013 00:49:20 +0200
Subject: [PATCH] improve chatpanes with scrolling and fix nav

---
 css/glowingbear.css |  7 +++++-
 index.html          | 58 +++++++++++++++++++++++----------------------
 2 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/css/glowingbear.css b/css/glowingbear.css
index 54e6ad8..c2de348 100644
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@@ -4,9 +4,14 @@ body {
     padding: 5px;
 }
 .bufferlines {
-    font-family: sans-serif;
+    font-family: monospace;
+    overflow: scroll-y;
+    height: 100%; 
 }
 
+.navbar-fixed-bottom {
+    margin: 5px;
+}
 .color-light-green {
     color: chartreuse;
 }
diff --git a/index.html b/index.html
index 80e2574..f0b3e27 100644
--- a/index.html
+++ b/index.html
@@ -58,35 +58,37 @@
       </div>
       <div ng-show="connected">
 
-        <ul class="nav nav-pills">
-          <li class="label" ng-class="{'active': content.notification }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
-          <a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }}</a>
-          </li>
-        </ul>
-        <div class="bufferlines" ng-repeat="bufferline in activeBuffer.lines">
-          <span class="date text-muted">
-            {{ bufferline.date | date:'HH:mm' }}
-          </span>
-
-          <span ng-repeat="part in bufferline.message" class="text" style="{{ part.fg }}">
-            {{ part.text }}
-          </span>
-
-          <div ng-repeat="metadata in bufferline.metadata">
-            <div ng-show="metadata.visible">
-              <a ng-click="metadata.visible = false">Hide additional content</a>
-              <div ng-bind-html-unsafe="metadata.content"></div>
-
-            </div>
-            <div ng-hide="metadata.visible">
-              <a ng-click="metadata.visible = true">Show additional content</a>
-            </div>
-            
-          </div>
-
-
-
+        <div class="navbar navbar-inverse navbar-fixed-top">
+          <ul class="nav nav-pills">
+            <li class="label" ng-class="{'active': content.notification }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
+            <a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }}</a>
+            </li>
+          </ul>
         </div>
+        <div class="bufferlines">
+          <div class="bufferline" ng-repeat="bufferline in activeBuffer.lines">
+            <span class="date text-muted">
+              {{ bufferline.date | date:'HH:mm' }}
+            </span>
+
+            <span ng-repeat="part in bufferline.message" class="text" style="{{ part.fg }}">
+              {{ part.text }}
+            </span>
+
+            <div ng-repeat="metadata in bufferline.metadata">
+              <div ng-show="metadata.visible">
+                <a ng-click="metadata.visible = false">Hide additional content</a>
+                <div ng-bind-html-unsafe="metadata.content"></div>
+
+              </div>
+              <div ng-hide="metadata.visible">
+                <a ng-click="metadata.visible = true">Show additional content</a>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
         <div class="navbar navbar-inverse navbar-fixed-bottom">
             <form class="form form-horizontal" ng-submit="sendMessage()">
               <div class="input-group">