~ev/tildeprotocol: style the message a bit and render handles + timestamps

4 files changed, 41 insertions(+), 7 deletions(-)

M app.js
M index.html
M render.js
A style.css

M app.js => app.js +1 -4

@@ 10,10 10,7 @@ function route (keys) {
 
   if (src[0] === '~') {
     console.log(src)
-    open(src, keys).then(msg => {
-      console.log(msg)
-      scroller.appendChild(render(msg))
-    })
+    scroller.appendChild(render(src, keys))
   }
 
   if (src === 'key') {

M index.html => index.html +1 -0

@@ 3,6 3,7 @@
     <title>~protocol</title>
     <meta name='viewport' content='width=device-width initial-scale=1' />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <link rel='stylesheet' href='style.css' />
   </head>
   <body>
     <script src="./node_modules/localforage/dist/localforage.min.js"></script>

M render.js => render.js +20 -3

@@ 1,6 1,23 @@
-function render (msg, keys) {
-  var div = h('div')
-  div.appendChild(h('span', [msg]))
+function render (src, keys) {
+  var div = h('div', {classList: 'message'})
+  open(src, keys).then(msg => {
+    var tildes = msg.split('~')
+
+    var timestamp = human(new Date(Number(tildes[tildes.length - 3])))
+
+    div.appendChild(h('span', [tildes[tildes.length - 4] + ' ']))
+
+    div.appendChild(h('span', {classList: 'right'}, [timestamp]))
+
+    var rest = h('span')
+
+    for (var i = 0; i < tildes.length -4; i++) {
+      rest.appendChild(h('span', [tildes[i]]))
+    }
+
+    div.appendChild(h('span', [rest]))
+    div.appendChild(h('pre', ['~' + tildes[tildes.length - 2] + '~' + tildes[tildes.length - 1]]))
+  })
   
   return div
 }

A style.css => style.css +19 -0

@@ 0,0 1,19 @@
+body {
+  background: #333;
+  color: #f5f5f5;
+}
+
+#scroller {
+  width: 90%;
+  margin-left: auto; margin-right: auto;
+}
+
+.message {
+  border-bottom: 1px solid cyan;
+}
+
+.right { float: right;}
+
+textarea {
+  width: 100%;
+}