logs: Added logs-table that looks like old logs site.

2018-10-28 14:21:17 +01:00
parent 850114af2d
commit ea89975b14
7 changed files with 75 additions and 3 deletions
@@ -0,0 +1,10 @@
+const moment = require("moment")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      expand: false,
+      dateStr: moment(input.log.date).format("MMM D, YYYY"),
+    }
+  }
+}
@@ -0,0 +1,22 @@
+$ const fullNames = (input.log.characters.length < 4);
+
+<tr key=input.log.shortId class="logs-table-row color-text">
+  <td class="date color-primary">
+    <a href=("/logs/"+input.log.id)>${state.dateStr}</a>
+  </td>
+  <td class="channel color-menu">
+    <a on-click("emit", "addfilter", "channels", input.log.channelName)>${input.log.channelName}</a>
+  </td>
+  <td class="event color-tag-event">
+    <a on-click("emit", "addfilter", "events", input.log.eventName)>${(input.log.eventName || "").replace(/\s/g, " ")}</a>
+  </td>
+  <td class="characters color-menu">
+    <span for(character in input.log.characters | status-var=loop)>
+      <a on-click("emit", "addfilter", "characters", character.id) class="name">${fullNames ? character.name : character.shortName}</a>
+      <span class="comma" if(loop.getIndex() < (loop.getLength() - 1))>, </span>
+    </span>
+  </td>
+</tr>
+<tr if(state.expand) key=(input.log.shortId + "_expand") class="logs-table-row-expanded">
+
+</tr>
@@ -0,0 +1,19 @@
+tr.logs-table-row {
+  td {
+    padding: 0.25em 1ch;
+    text-align: center;
+    border-bottom: 1px solid rgba(51, 51, 51, 0.5);
+
+    a {
+      color: inherit;
+    }
+  }
+
+  td.expand {
+    width: 2%;
+  }
+
+  td.channel, td.date, td.event {
+    width: 12%;
+  }
+}