*: 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
@@ -7,6 +7,11 @@ tr.content-list-item {
    text-align: center;
    width: 2.5ch;
    outline: 0.05px solid;
+
+    @media screen and (max-width: 700px) {
+      width: 1.25ch;
+      font-size: 1.5em;
+    }    
  }

  > td.content {
@@ -1 +1 @@
-<div class="menu-gap"></div>
+<div class=["menu-gap", input.class]></div>
@@ -6,7 +6,7 @@ module.exports = class {
  }

  onInput(input) {
-    this.state.classes = ["menu-link", "color-menu"]
+    this.state.classes = ["menu-link", "color-menu"].concat(input.class)

    if (input.dark) {
      this.state.classes.push(input)
@@ -3,9 +3,14 @@ module.exports = class {
    this.state = {
      loggingIn: false,
      loggingOut: false,
+      enabled: false,
    }
  }

+  toggleEnabled() {
+    this.state.enabled = !this.state.enabled
+  }
+
  loginClicked() {
    this.state.loggingIn = true
  }
@@ -1,5 +1,7 @@
-<div class="menu">
+<div class=["menu", state.enabled ? "enabled" : "disabled"]>
  <div class="menu-body">
+    <menu-link icon=(state.enabled ? "<" : ">") on-click("toggleEnabled") class="showhide">${state.enabled ? "Hide Menu" : "Show Menu"}</menu-link>
+    <menu-gap class="showhide" />
    <include(input.renderBody) />
  </div>
  <if(input.user != null)>
@@ -12,4 +12,28 @@
  user-select: none;
  overflow-x: hidden;
  overflow-y: auto;
+
+  .showhide {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .menu.disabled {
+    .menu-link, .menu-header, .menu-blurb, .menu-gap {
+      display: none;
+    }
+  }
+
+  .showhide {
+    display: block !important;
+  }
+
+  .menu {
+    position: static;
+    width: 100%;
+    box-sizing: border-box;
+    margin-left: -0.25ch;
+    font-size: 1.25em;
+  }
 }
@@ -16,10 +16,19 @@ body {
  }
 }

+@media screen and (max-width: 700px) {
+  body {
+    main {
+      margin-left: 0.25ch;
+      width: 100%;
+    }
+  }
+}
+
 /* 
 * Less glaring chrome/ium scrollbars.
 */
- ::-webkit-scrollbar {
+::-webkit-scrollbar {
  width: 2px;
  /* for vertical scrollbars */
  height: 2px;
@@ -30,4 +30,14 @@ nav.layout-navbar {
      color: white;
    }
  }
-}
+}
+
+@media screen and (max-width: 700px) {
+  nav.layout-navbar {
+    position: static;
+    margin-left: 0;
+    width: 100%;
+
+    font-size: 1.25em;
+  }
+}
@@ -2,8 +2,8 @@
  <menu-header>List</menu-header>
  <menu-link key="characters" selected=input.selected.characters icon="C" href="/data/characters/">Characters</menu-link>
  <menu-link key="channels" selected=input.selected.channels icon="#" href="/data/channels/">Channels</menu-link>
-  <menu-gap />
  <if-permitted user=input.user permission=["member", "character.add", "channel.add"]>
+    <menu-gap />
    <menu-header>Add</menu-header>
    <if-permitted user=input.user permission=["character.add", "member"]>
      <menu-link dark key="characters_add" icon="+" on-click("emit", "open", "character.add")>Character</menu-link>
@@ -4,6 +4,13 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8"/>
+    <head>
+      <meta content="AiteStory is a timeline of aiterp IC content that doesn't fit the wiki format" name="description" />
+      <meta charset="UTF-8" />
+      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" name="viewport" />
+      <meta content="#111111" name="theme-color" />
+      <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+    </head>
    <title>${input.title ? `${input.title} - Aite RP` : "Aite RP"}</title>
    <lasso-head/>
  </head>
@@ -9,7 +9,7 @@ div.post {
  div.options {
    position: absolute;
    text-align: right;
-    width: calc(100% - 35.5ch);
+    width: calc(100% - 38.75ch);
    max-width: 95ch;

    a {
@@ -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;
+  }
 }
@@ -22,7 +22,7 @@
  .options {
    position: absolute;
    text-align: right;
-    width: calc(100% - 35.5ch);
+    width: calc(100% - 38.75ch);
    max-width: 95ch;

    pointer-events: none;
@@ -18,5 +18,4 @@
  <menu-gap />
  <menu-header>Categories</menu-header>
  <menu-link for(category in (input.categories||[])) key=(category.name) selected=(input.selected.category == category.name) href=("/story/by-category/"+category.name) icon=category.name.charAt(0)>${category.name}</menu-link>
-  <menu-gap />
 </menu>