From a8f4d68f1ef4d5fba04f79096dcedce6eb8bd8e6 Mon Sep 17 00:00:00 2001
From: Gisle Aune <dev@gisle.me>
Date: Thu, 1 Nov 2018 20:56:24 +0100
Subject: [PATCH] *: Added media queries to make it less awful on mobile.

---
 marko/components/content-list-item/style.less |  5 ++++
 marko/components/menu-gap/index.marko         |  2 +-
 marko/components/menu-link/component.js       |  2 +-
 marko/components/menu/component.js            |  5 ++++
 marko/components/menu/index.marko             |  4 +++-
 marko/components/menu/style.less              | 24 +++++++++++++++++++
 marko/global/base.less                        | 11 ++++++++-
 marko/global/navbar.less                      | 12 +++++++++-
 .../data/components/data-menu/index.marko     |  2 +-
 marko/page/layout.marko                       |  7 ++++++
 .../logs-content/components/post/style.less   |  2 +-
 .../logs/components/logs-menu/index.marko     |  1 -
 .../components/logs-table-row/component.js    |  2 +-
 .../components/logs-table-row/index.marko     |  2 +-
 .../logs/components/logs-table-row/style.less |  6 +++++
 .../logs/components/logs-table/index.marko    |  2 +-
 .../logs/components/logs-table/style.less     | 14 +++++++++++
 .../components/chapter/style.less             |  2 +-
 .../story/components/story-menu/index.marko   |  1 -
 19 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/marko/components/content-list-item/style.less b/marko/components/content-list-item/style.less
index 1915b3a..b464c98 100644
--- a/marko/components/content-list-item/style.less
+++ b/marko/components/content-list-item/style.less
@@ -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 {
diff --git a/marko/components/menu-gap/index.marko b/marko/components/menu-gap/index.marko
index cce1baa..603b921 100644
--- a/marko/components/menu-gap/index.marko
+++ b/marko/components/menu-gap/index.marko
@@ -1 +1 @@
-<div class="menu-gap"></div>
\ No newline at end of file
+<div class=["menu-gap", input.class]></div>
\ No newline at end of file
diff --git a/marko/components/menu-link/component.js b/marko/components/menu-link/component.js
index 8a41406..5e9c093 100644
--- a/marko/components/menu-link/component.js
+++ b/marko/components/menu-link/component.js
@@ -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)
diff --git a/marko/components/menu/component.js b/marko/components/menu/component.js
index 5450583..5222c54 100644
--- a/marko/components/menu/component.js
+++ b/marko/components/menu/component.js
@@ -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
   }
diff --git a/marko/components/menu/index.marko b/marko/components/menu/index.marko
index 5315f53..84e0170 100644
--- a/marko/components/menu/index.marko
+++ b/marko/components/menu/index.marko
@@ -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)>
diff --git a/marko/components/menu/style.less b/marko/components/menu/style.less
index 4a0275d..e1ee8fa 100644
--- a/marko/components/menu/style.less
+++ b/marko/components/menu/style.less
@@ -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;
+  }
 }
\ No newline at end of file
diff --git a/marko/global/base.less b/marko/global/base.less
index b3c657b..b302f07 100644
--- a/marko/global/base.less
+++ b/marko/global/base.less
@@ -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;
diff --git a/marko/global/navbar.less b/marko/global/navbar.less
index 445357d..7d9ff0a 100644
--- a/marko/global/navbar.less
+++ b/marko/global/navbar.less
@@ -30,4 +30,14 @@ nav.layout-navbar {
       color: white;
     }
   }
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 700px) {
+  nav.layout-navbar {
+    position: static;
+    margin-left: 0;
+    width: 100%;
+
+    font-size: 1.25em;
+  }
+}
diff --git a/marko/page/data/components/data-menu/index.marko b/marko/page/data/components/data-menu/index.marko
index ce2227d..f2b1026 100644
--- a/marko/page/data/components/data-menu/index.marko
+++ b/marko/page/data/components/data-menu/index.marko
@@ -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>
diff --git a/marko/page/layout.marko b/marko/page/layout.marko
index f9d0642..4615e75 100644
--- a/marko/page/layout.marko
+++ b/marko/page/layout.marko
@@ -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>
diff --git a/marko/page/logs-content/components/post/style.less b/marko/page/logs-content/components/post/style.less
index 6415d59..9875b51 100644
--- a/marko/page/logs-content/components/post/style.less
+++ b/marko/page/logs-content/components/post/style.less
@@ -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 {
diff --git a/marko/page/logs/components/logs-menu/index.marko b/marko/page/logs/components/logs-menu/index.marko
index af3657f..8051914 100644
--- a/marko/page/logs/components/logs-menu/index.marko
+++ b/marko/page/logs/components/logs-menu/index.marko
@@ -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>
\ No newline at end of file
diff --git a/marko/page/logs/components/logs-table-row/component.js b/marko/page/logs/components/logs-table-row/component.js
index 83cb82b..d5c7c95 100644
--- a/marko/page/logs/components/logs-table-row/component.js
+++ b/marko/page/logs/components/logs-table-row/component.js
@@ -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"),
     }
   }
 }
\ No newline at end of file
diff --git a/marko/page/logs/components/logs-table-row/index.marko b/marko/page/logs/components/logs-table-row/index.marko
index 1a69c0d..3e64428 100644
--- a/marko/page/logs/components/logs-table-row/index.marko
+++ b/marko/page/logs/components/logs-table-row/index.marko
@@ -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)>
diff --git a/marko/page/logs/components/logs-table-row/style.less b/marko/page/logs/components/logs-table-row/style.less
index 04e4cbd..3fde21f 100644
--- a/marko/page/logs/components/logs-table-row/style.less
+++ b/marko/page/logs/components/logs-table-row/style.less
@@ -16,4 +16,10 @@ tr.logs-table-row {
   td.channel, td.date, td.event {
     width: 12%;
   }
+
+  td.character {
+    a.name {
+      white-space: nowrap;
+    }
+  }
 }
\ No newline at end of file
diff --git a/marko/page/logs/components/logs-table/index.marko b/marko/page/logs/components/logs-table/index.marko
index 5842b1e..705d60e 100644
--- a/marko/page/logs/components/logs-table/index.marko
+++ b/marko/page/logs/components/logs-table/index.marko
@@ -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") />
diff --git a/marko/page/logs/components/logs-table/style.less b/marko/page/logs/components/logs-table/style.less
index 9e37038..9f8091e 100644
--- a/marko/page/logs/components/logs-table/style.less
+++ b/marko/page/logs/components/logs-table/style.less
@@ -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;
+  }
 }
\ No newline at end of file
diff --git a/marko/page/story-content/components/chapter/style.less b/marko/page/story-content/components/chapter/style.less
index 6cd01a3..a245502 100644
--- a/marko/page/story-content/components/chapter/style.less
+++ b/marko/page/story-content/components/chapter/style.less
@@ -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;
diff --git a/marko/page/story/components/story-menu/index.marko b/marko/page/story/components/story-menu/index.marko
index d0ae65b..fab8b05 100644
--- a/marko/page/story/components/story-menu/index.marko
+++ b/marko/page/story/components/story-menu/index.marko
@@ -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>
\ No newline at end of file