style: Main message list

style.css

@@ -26,6 +26,17 @@ a:active, a:hover, a:focus {
   outline: 0;
 }
 
+pre {
+  width: 100%;
+  height: 100%;
+  max-height: 90vh;
+  overflow: auto;
+  word-wrap: normal;
+  word-break: keep-all;
+  white-space: pre-wrap;
+  justify-self: flex-start;
+}
+
 #v5shoutbox {
   height: 100%
 }
@@ -81,3 +92,29 @@ a:active, a:hover, a:focus {
   width: 100%;
   height: 100%;
 }
+
+.message {
+  display: flex;
+}
+
+.message .message-author {
+  margin-right: 6px;
+  font-size: 0.9em;
+  color: #777777;
+  min-width: 70px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.message .message-content {
+  flex-grow: 1;
+  margin: 0;
+}
+
+.message .message-date {
+  color: #949494;
+  margin-left: 5px;
+  font-size: 0.8em;
+  order: 3;
+  flex-shrink: 0;
+}

v5shoutbox.js

@@ -492,14 +492,6 @@ let shoutbox = new function() {
     view.style.display = "none";
     this.eChannels.appendChild(view);
 
-    let header = document.createElement("header");
-    header.textContent = channel;
-    view.appendChild(header);
-
-    /* TODO: Better display for channels */
-    let messages = document.createElement("pre");
-    view.appendChild(messages);
-
     let button = document.createElement("button");
     button.appendChild(document.createTextNode(channel));
     button.dataset.channel = channel;
@@ -522,10 +514,21 @@ let shoutbox = new function() {
     if(author.endsWith("[s]"))
       author = author.substr(0, author.length - 3);
 
-    /* TODO: Better text element x) */
-    const pre = view.querySelector("pre");
-    pre.innerHTML += "[" + date.toLocaleTimeString() + "] [" + author + "] "
-                      + message + "\n";
+    let messageElement = document.createElement("div");
+    messageElement.classList.add("message");
+    let authorElement = document.createElement("div");
+    authorElement.appendChild(document.createTextNode(author));
+    authorElement.classList.add("message-author");
+    messageElement.appendChild(authorElement);
+    let messageContentElement = document.createElement("p");
+    messageContentElement.classList.add("message-content");
+    messageContentElement.appendChild(document.createTextNode(message));
+    messageElement.appendChild(messageContentElement);
+    let dateElement = document.createElement("div");
+    dateElement.classList.add("message-date");
+    dateElement.appendChild(document.createTextNode(date.toLocaleTimeString()));
+    messageElement.appendChild(dateElement);
+    view.appendChild(messageElement);
   }.bind(this);
 
   this.setChannelBackgroundActivity = function(channel, activity) {