Align nicks on the right. Fixes #19.

css/glowingbear.css

@@ -24,6 +24,16 @@ input#sendMessage {
     width: 100%;
 }
 
+td#time {
+    padding-right: 5px;
+}
+
+td#nickname {
+    text-align: right;
+    vertical-align: middle;
+    padding-right: 5px;
+}
+
 /* Lastly, apply responsive CSS fixes as necessary */
 @media (max-width: 767px) {
     #footer {
@@ -59,13 +69,17 @@ input#sendMessage {
     height: 100%; 
     min-height: 100%; 
 }
+span.text {
+    white-space: nowrap;
+}
+
 .bufferlines {
     font-family: monospace;
     overflow-y: auto;
     margin-left: 14%;
     width: auto;
     position: relative;
-    padding-bottom: 60px;
+    padding-bottom: 55px;
 }
 .text {
     word-wrap: break-word;

index.html

@@ -107,11 +107,18 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
         </ul>
       </div>
       <div class="bufferlines">
-        <div class="bufferline" ng-repeat="bufferline in activeBuffer().lines">
+        <table>
+          <tbody>
+            <tr class="bufferline" ng-repeat="bufferline in activeBuffer().lines">
+              <td id="time">
                 <span class="date text-muted">
                   {{ bufferline.date | date:'HH:mm' }}
                 </span>
-
+              </td>
+              <td id="nickname">
+                <span ng-repeat="part in bufferline.prefix" class="text" style="{{ part.fg }}">{{ part.text }}</span>
+              </td>
+              <td id="content">
                 <span ng-repeat="part in bufferline.content" class="text" style="{{ part.fg }}">{{ part.text }} </span>
 
                 <div ng-repeat="metadata in bufferline.metadata">
@@ -124,8 +131,12 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
                     <a ng-click="metadata.visible = true">Show additional content</a>
                   </div>
                 </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      </div>
+      <div class="push"></div>
     </div>
     <div id="footer" ng-show="connected">
       <div class="navbar navbar-inverse navbar-fixed-bottom">

js/models.js

@@ -47,17 +47,25 @@ models.service('models', ['colors', function(colors) {
      */
     this.BufferLine = function(message) {
 
+        function formatTextElement(textElement) {
+
+            textElement = colors.parse(textElement);
+
+            if (textElement && ('fg' in textElement)) {
+                textElement['fg'] = colors.prepareCss(textElement['fg']);
+            }
+
+            return textElement;
+        }
+
         /*
          * Parse the text elements from the buffer line added
          *
          * @param message weechat message
          */
         function parseLineAddedTextElements(message) {
-            var prefix = colors.parse(message['prefix']);
+            var text = colors.parse(message['message']);
-
+            text_elements =_.map(text, function(text_element) {
-            var buffer = message['buffer'];
-            text_elements = _.union(prefix, text);
-            text_elements =_.map(text_elements, function(text_element) {
                 if (text_element && ('fg' in text_element)) {
                     text_element['fg'] = colors.prepareCss(text_element['fg']);
                 }
@@ -71,17 +79,24 @@ models.service('models', ['colors', function(colors) {
 
         var buffer = message['buffer'];
         var date = message['date'];
-        var text = colors.parse(message['message']);
+
+
+        var prefix = formatTextElement(message['prefix']);
+        console.log(message['prefix'])
+        console.log(prefix);
+
         var tags_array = message['tags_array'];
         var displayed = message['displayed'];
         var highlight = message['highlight'];
         var content = parseLineAddedTextElements(message);
+
         var rtext = "";
-        if(text[0] != undefined) {
+        if(content[0] != undefined) {
-            rtext = text[0]['text'];
+            rtext = content[0]['text'];
         }
 
         return {
+            prefix: prefix,
             content: content,
             date: date,
             buffer: buffer,