~ev/tildeprotocol

47d926f5a4a51e5103ffc8140d66b9e5b3012eca — Ev Bogue 2 years ago b82b3ae
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%;
}