From 26a1451ff62f10cb9f854fe791490668bb88dc28 Mon Sep 17 00:00:00 2001
From: Michael Serajnik <ms@mserajnik.at>
Date: Sat, 16 Dec 2017 03:45:51 +0100
Subject: [PATCH] client/css: improve mobile styling

---
 client/css/comment-control.styl               |  1 -
 client/css/comment-list-control.styl          |  5 +++
 client/css/comment-list-view.styl             | 18 +++++++---
 client/css/core-forms.styl                    | 16 +++++++--
 client/css/core-general.styl                  | 36 +++++++++++++++++++
 client/css/home-view.styl                     |  3 ++
 client/css/pager.styl                         |  2 +-
 client/css/post-list-view.styl                | 25 +++++++++++++
 client/css/post-main-view.styl                |  3 ++
 client/css/snapshots-list-view.styl           |  8 +++--
 client/css/tag-categories-view.styl           |  6 ++++
 client/css/tag-list-view.styl                 |  4 +++
 client/css/user-list-view.styl                |  3 ++
 client/html/tag_categories.tpl                | 24 +++++++------
 client/html/tags_page.tpl                     |  2 +-
 client/html/top_navigation.tpl                |  4 +++
 .../controllers/top_navigation_controller.js  |  2 ++
 client/js/views/top_navigation_view.js        | 32 +++++++++++++++++
 18 files changed, 170 insertions(+), 24 deletions(-)

diff --git a/client/css/comment-control.styl b/client/css/comment-control.styl
index 6b730172..a54dacc0 100644
--- a/client/css/comment-control.styl
+++ b/client/css/comment-control.styl
@@ -3,7 +3,6 @@ $comment-header-background-color = $top-navigation-color
 $comment-border-color = #DDD
 
 .comment-container
-    margin: 0 0 1em 0
     padding: 0 0 0 60px
 
     .avatar
diff --git a/client/css/comment-list-control.styl b/client/css/comment-list-control.styl
index 63459d64..fe847245 100644
--- a/client/css/comment-list-control.styl
+++ b/client/css/comment-list-control.styl
@@ -2,3 +2,8 @@
     list-style-type: none
     margin: 0
     padding: 0
+
+    >li
+        margin-bottom: 1em
+        &:last-child
+            margin-bottom: 0
diff --git a/client/css/comment-list-view.styl b/client/css/comment-list-view.styl
index 697b372b..bd50beb8 100644
--- a/client/css/comment-list-view.styl
+++ b/client/css/comment-list-view.styl
@@ -1,15 +1,24 @@
+@import colors
+$comment-border-color = $top-navigation-color
+
 .global-comment-list
     text-align: left
 
     &>ul
         list-style-type: none
-        margin: 1em 0
+        margin: 1em 0 0
         padding: 0
 
+        &>li
+            margin-top: 2em
+            padding-top: 2em
+            border-top: 3px solid $comment-border-color
+            &:first-child
+                margin-top: 0
+                padding-top: 0
+                border-top: none
+
         @media (max-width: 700px)
-            &>li
-                margin-bottom: 5em
-                padding: 1vw
             .post-thumbnail
                 margin-bottom: 1em
                 .thumbnail
@@ -19,7 +28,6 @@
         @media (min-width: 700px)
             &>li
                 padding-left: 13em
-                margin-bottom: 2em
             .post-thumbnail
                 float: left
                 margin: 0 0 1em -13em
diff --git a/client/css/core-forms.styl b/client/css/core-forms.styl
index a163718b..f083ffbe 100644
--- a/client/css/core-forms.styl
+++ b/client/css/core-forms.styl
@@ -31,13 +31,22 @@ form.horizontal
     margin-bottom: 1em
     .input, .buttons, ul
         display: inline-block
-        vertical-align: middle
+        vertical-align: top
         margin: 0
         padding: 0
         input
-            vertical-align: middle
+            vertical-align: top
     .buttons
         margin-right: 0.5em
+    @media (max-width: 1000px)
+        display: block
+        .input, .buttons, ul
+            display: block
+            margin-top: 0.5em
+            &:first-child
+                margin-top: 0
+        .buttons
+            margin-right: 0
 
 
 
@@ -213,10 +222,13 @@ input[type=submit]
     cursor: pointer
     font-size: 100%
     padding: 0.2em 0.7em
+    border-radius: 0
     border: 2px solid $button-enabled-background-color
     background: $button-enabled-background-color
     color: $button-enabled-text-color
     outline: 0 /* something on Chrome */
+    -moz-appearance: none
+    -webkit-appearance: none
 
     &:disabled
         cursor: default
diff --git a/client/css/core-general.styl b/client/css/core-general.styl
index 9209bc30..3892a825 100644
--- a/client/css/core-general.styl
+++ b/client/css/core-general.styl
@@ -125,6 +125,37 @@ nav
             li
                 display: inline-block
                 float: left
+            #mobile-navigation-toggle
+                display: none
+                width: 100%
+                padding: 0 1.5vw
+                line-height: 2.3em
+                font-family: inherit
+                border: none
+                background: none
+                color: $active-tab-text-color
+                .site-name
+                    display: block
+                    float: left
+                    max-width: 50vw
+                    overflow: hidden
+                    text-overflow: ellipsis
+                .toggle-icon
+                    display: block
+                    float: right
+            @media (max-width: 1000px)
+                text-align: left
+                li
+                    display: none
+                    float: none
+                    a
+                        display: block
+                        padding: 0 1.5vw
+                #mobile-navigation-toggle
+                    display: block
+                &.opened
+                    li
+                        display: block
         ul li[data-name=account],
         ul li[data-name=register],
         ul li[data-name=login],
@@ -141,6 +172,8 @@ nav
             margin-right: 0.6em
             margin-left: calc(0.6em - 1.2em)
             float: left
+            @media (max-width: 1000px)
+                display: none
 
 a .access-key
     text-decoration: underline
@@ -194,6 +227,9 @@ a .access-key
     margin-top: 0 !important
     margin-bottom: 0 !important
 
+.table-wrap
+    overflow-x: scroll
+
 /* hack to prevent text from being copied */
 [data-pseudo-content]:before {
     content: attr(data-pseudo-content)
diff --git a/client/css/home-view.styl b/client/css/home-view.styl
index 06292aea..00e46d70 100644
--- a/client/css/home-view.styl
+++ b/client/css/home-view.styl
@@ -15,6 +15,7 @@
             margin: 0 auto 2em auto
 
     form
+        display: inline-block
         width: auto
         vertical-align: middle
         margin: 0 0 2em 0
@@ -52,6 +53,8 @@
             li
                 display: inline
                 white-space: nowrap
+                @media (max-width: 800px)
+                    display: block
             .sep
                 word-spacing: 1.1em
                 background-repeat: no-repeat
diff --git a/client/css/pager.styl b/client/css/pager.styl
index df35f3e8..3976404c 100644
--- a/client/css/pager.styl
+++ b/client/css/pager.styl
@@ -8,7 +8,7 @@
     .page
         position: relative
         .page-header
-            margin: 0.5em 0.5em 0.5em 0
+            margin: 0.5em 0
             position: relative
             &:before
                 display: block
diff --git a/client/css/post-list-view.styl b/client/css/post-list-view.styl
index 10ebb6df..41d4cc13 100644
--- a/client/css/post-list-view.styl
+++ b/client/css/post-list-view.styl
@@ -145,12 +145,19 @@
         margin-bottom: 0.75em
         *
             vertical-align: top
+        @media (max-width: 1000px)
+            display: block
     input
         margin-bottom: 0.25em
         margin-right: 0.25em
     input[name=search-text]
         width: 25em
+        @media (max-width: 1000px)
+            display: block
+            width: 100%
+            margin-bottom: 0.5em
     .append
+        vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
     .bulk-edit
@@ -163,6 +170,11 @@
         &.hidden
             display: none
     .bulk-edit-tags
+        &.opened
+            .hint
+                @media (max-width: 1000px)
+                    display: block
+                    margin-bottom: 0.5em
         &:not(.opened)
             [type=text],
             .start
@@ -171,8 +183,21 @@
                 display: none
         input[name=tag]
             width: 12em
+            @media (max-width: 1000px)
+                display: block
+                width: 100%
+                margin-bottom: 0.5em
+        .append
+            &.open,
+            &.hint
+                @media (max-width: 1000px)
+                    margin-left: 0
         .hint
             margin-right: 1em
+    .bulk-edit-safety
+        .append
+            @media (max-width: 1000px)
+                margin-left: 0
 
     .safety
         margin-right: 0.25em
diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl
index cfebf591..3c08745b 100644
--- a/client/css/post-main-view.styl
+++ b/client/css/post-main-view.styl
@@ -138,6 +138,9 @@
                 margin: 0
                 padding: 0
 
+    form
+        width: auto
+
     label:not(.file-dropper)
         margin-bottom: 0.3em
         display: block
diff --git a/client/css/snapshots-list-view.styl b/client/css/snapshots-list-view.styl
index a858a07d..b059a64a 100644
--- a/client/css/snapshots-list-view.styl
+++ b/client/css/snapshots-list-view.styl
@@ -8,11 +8,16 @@ $snapshot-merged-background-color = #FEC
 
     ul
         margin: 0 auto
+        padding: 0
         width: 100%
         max-width: 35em
         list-style-type: none
 
         li
+            margin-bottom: 1em
+            &:last-child
+                margin-bottom: 0
+
             .time
                 float: right
 
@@ -39,6 +44,3 @@ $snapshot-merged-background-color = #FEC
                 background: $snapshot-merged-background-color
                 &+.details
                     background: lighten($snapshot-merged-background-color, 50%)
-
-            div.details
-                margin-bottom: 2em
diff --git a/client/css/tag-categories-view.styl b/client/css/tag-categories-view.styl
index d5f07627..b8a91802 100644
--- a/client/css/tag-categories-view.styl
+++ b/client/css/tag-categories-view.styl
@@ -17,6 +17,12 @@
                 text-align: center
             &.remove, &.set-default
                 white-space: pre
+        th
+            white-space: nowrap
+            &:first-child
+                padding-left: 0
+            &:last-child
+                padding-right: 0
         tfoot
             display: none
     form
diff --git a/client/css/tag-list-view.styl b/client/css/tag-list-view.styl
index ac4b73de..4fd167f5 100644
--- a/client/css/tag-list-view.styl
+++ b/client/css/tag-list-view.styl
@@ -11,6 +11,7 @@
         th, td
             padding: 0.1em 0.5em
         th
+            white-space: nowrap
             background: $top-navigation-color
         .names
             width: 28%
@@ -47,6 +48,9 @@
         width: auto
     input[name=search-text]
         width: 25em
+        @media (max-width: 1000px)
+            width: 100%
     .append
+        vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
diff --git a/client/css/user-list-view.styl b/client/css/user-list-view.styl
index f575a97c..1fba50b5 100644
--- a/client/css/user-list-view.styl
+++ b/client/css/user-list-view.styl
@@ -34,6 +34,9 @@
         width: auto
     input[name=search-text]
         width: 25em
+        @media (max-width: 1000px)
+            width: 100%
     .append
+        vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
diff --git a/client/html/tag_categories.tpl b/client/html/tag_categories.tpl
index f401d515..fe6b8987 100644
--- a/client/html/tag_categories.tpl
+++ b/client/html/tag_categories.tpl
@@ -1,17 +1,19 @@
 <div class='content-wrapper tag-categories'>
     <form>
         <h1>Tag categories</h1>
-        <table>
-            <thead>
-                <tr>
-                    <th class='name'>Category name</th>
-                    <th class='color'>CSS color</th>
-                    <th class='usages'>Usages</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-        </table>
+        <div class="table-wrap">
+            <table>
+                <thead>
+                    <tr>
+                        <th class='name'>Category name</th>
+                        <th class='color'>CSS color</th>
+                        <th class='usages'>Usages</th>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
 
         <% if (ctx.canCreate) { %>
             <p><a href class='add'>Add new category</a></p>
diff --git a/client/html/tags_page.tpl b/client/html/tags_page.tpl
index be3b143a..8c973984 100644
--- a/client/html/tags_page.tpl
+++ b/client/html/tags_page.tpl
@@ -1,4 +1,4 @@
-<div class='tag-list'>
+<div class='tag-list table-wrap'>
     <% if (ctx.response.results.length) { %>
         <table>
             <thead>
diff --git a/client/html/top_navigation.tpl b/client/html/top_navigation.tpl
index b0689820..f1af4610 100644
--- a/client/html/top_navigation.tpl
+++ b/client/html/top_navigation.tpl
@@ -1,5 +1,9 @@
 <nav id='top-navigation' class='buttons'><!--
     --><ul><!--
+        --><button id="mobile-navigation-toggle"><!--
+            --><span class="site-name"><%- ctx.name %></span><!--
+            --><span class="toggle-icon"><i class="fa fa-bars"></i></span><!--
+        --></button><!--
         --><% for (let item of ctx.items) { %><!--
             --><% if (item.available) { %><!--
                 --><li data-name='<%- item.key %>'><!--
diff --git a/client/js/controllers/top_navigation_controller.js b/client/js/controllers/top_navigation_controller.js
index 550400cf..0f56ddc0 100644
--- a/client/js/controllers/top_navigation_controller.js
+++ b/client/js/controllers/top_navigation_controller.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api.js');
+const config = require('../config.js');
 const topNavigation = require('../models/top_navigation.js');
 const TopNavigationView = require('../views/top_navigation_view.js');
 
@@ -64,6 +65,7 @@ class TopNavigationController {
         this._updateNavigationFromPrivileges();
         this._topNavigationView.render({
             items: topNavigation.getAll(),
+            name: config.name
         });
         this._topNavigationView.activate(
             topNavigation.activeItem ? topNavigation.activeItem.key : '');
diff --git a/client/js/views/top_navigation_view.js b/client/js/views/top_navigation_view.js
index be703fc6..2f991870 100644
--- a/client/js/views/top_navigation_view.js
+++ b/client/js/views/top_navigation_view.js
@@ -9,8 +9,22 @@ class TopNavigationView {
         this._hostNode = document.getElementById('top-navigation-holder');
     }
 
+    get _mobileNavigationToggleNode() {
+        return this._hostNode.querySelector('#mobile-navigation-toggle');
+    }
+
+    get _navigationListNode() {
+        return this._hostNode.querySelector('nav > ul');
+    }
+
+    get _navigationLinkNodes() {
+        return this._navigationListNode.querySelectorAll('li > a');
+    }
+
     render(ctx) {
         views.replaceContent(this._hostNode, template(ctx));
+
+        this._bindMobileNavigationEvents();
     }
 
     activate(key) {
@@ -19,6 +33,24 @@ class TopNavigationView {
                 'active', itemNode.getAttribute('data-name') === key);
         }
     }
+
+    _bindMobileNavigationEvents() {
+        this._mobileNavigationToggleNode.addEventListener(
+            'click', e => this._mobileNavigationToggleClick(e));
+
+        for (let navigationLinkNode of this._navigationLinkNodes) {
+            navigationLinkNode.addEventListener(
+                'click', e => this._navigationLinkClick(e));
+        }
+    }
+
+    _mobileNavigationToggleClick(e) {
+        this._navigationListNode.classList.toggle('opened');
+    }
+
+    _navigationLinkClick(e) {
+        this._navigationListNode.classList.remove('opened');
+    }
 }
 
 module.exports = TopNavigationView;