Adds different colors

assets/pages/Container.vue

@@ -1,7 +1,7 @@
 <template lang="html">
-  <pre ref="logs">
+  <ul ref="events" class="events">
     
-  </pre>
+  </ul>
 </template>
 
 <script>
@@ -15,14 +15,27 @@ export default {
     ws.onclose = e => console.log("Connection closed.");
     ws.onerror = e => console.error("Connection error: " + e.data);
     ws.onmessage = e => {
-      const parent = this.$refs.logs;
-      const item = document.createTextNode(e.data);
+      const parent = this.$refs.events;
+      const item = document.createElement("li");
+      item.classList.add("event");
+      item.innerHTML = e.data;
       parent.appendChild(item);
-      parent.scrollIntoView({block: "end"});
+      item.scrollIntoView();
     };
   }
 };
 </script>
 <style>
-
+.events {
+  color: #ddd;
+  background-color: #111;
+  padding: 10px;
+}
+.event {
+  font-family: monaco, monospace;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 15px 0 30px;
+  word-wrap: break-word;  
+}
 </style>

assets/pages/Index.vue

@@ -5,10 +5,11 @@
         <ul class="is-marginless is-paddless">
       <li v-for="item in containers" class="columns unstyled box">
         <div class="column is-4">
-          <router-link :to="{name: 'container', params: {id: item.Id}}">{{ item.Names[0] }}</router-link>
+          <router-link :to="{name: 'container', params: {id: item.Id}}"><h2 class="is-2">{{ item.Names[0] }}</h2></router-link>
+          <span class="subtitle is-6">{{ item.Command}}</span>
         </div>
-        <div class="column is-4">
-          <code>{{ item.Image }}</code>
+        <div class="column is-4 image-name">
+          <code>{{ item.Image }} {{ item.Image }}</code>
         </div>
         <div class="column is-4">
           <span class="subtitle is-7">{{ item.Status}}</span>
@@ -35,4 +36,9 @@ export default {
 </script>
 
 <style lang="css">
+.image-name {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
 </style>