*: Added media queries to make it less awful on mobile.

2018-11-01 20:56:24 +01:00
parent b57873091b
commit a8f4d68f1e
19 changed files with 93 additions and 13 deletions
@@ -8,5 +8,4 @@
  <menu-header key="filters">Filters</menu-header>
  <menu-link for(filter in state.filters) textClass=filter.color unselectable icon=filter.icon on-click("emit", "removefilter", filter.type, filter.id)>${filter.text}</menu-link>
  <menu-link key="add_filter" dark on-click("select", "filter.add") icon="+">Add Filter</menu-link>
-  <menu-gap />
 </menu>
@@ -4,7 +4,7 @@ module.exports = class {
  onCreate(input) {
    this.state = {
      expand: false,
-      dateStr: moment(input.log.date).format("MMM D, YYYY"),
+      dateStr: moment(input.log.date).format("MMM D, YYYY"),
    }
  }
 }
@@ -8,7 +8,7 @@ $ const fullNames = (input.log.characters.length < 4);
    <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>
+    <a on-click("emit", "addfilter", "events", input.log.eventName)>${(input.log.eventName || "")}</a>
  </td>
  <td class="characters color-menu">
    <span for(character in input.log.characters | status-var=loop)>
@@ -16,4 +16,10 @@ tr.logs-table-row {
  td.channel, td.date, td.event {
    width: 12%;
  }
+
+  td.character {
+    a.name {
+      white-space: nowrap;
+    }
+  }
 }
@@ -4,7 +4,7 @@ import moment from "moment"
  <tr key="_header">
    <th>Date</th>
    <th>Channel</th>
-    <th>Event</th>
+    <th class="event">Event</th>
    <th>Characters</th>
  </tr>
  <logs-table-row for(log in input.logs) key=log.shortId log=log on-addfilter("emit", "addfilter") />
@@ -8,4 +8,18 @@ table.logs-table {
    cursor: pointer;
    text-decoration: underline;
  }
+
+  @media screen and (max-width: 900px) {
+    td.event, th.event {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 700px) {
+    td.date {
+      white-space: normal !important;
+    }
+
+    font-size: 0.66em;
+  }
 }