From 2fade2f08c183e8e3ca78d5b0e09edb0666528df Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Sat, 21 May 2016 11:17:11 +0200
Subject: [PATCH] client/css: improve appearance on small screens

---
 client/css/forms.styl               |  2 +-
 client/css/help.styl                | 14 ++++++--
 client/css/main.styl                | 11 ++++--
 client/css/tags.styl                | 52 +++++++++++++++++++----------
 client/css/users.styl               |  5 +--
 client/html/help_search_general.tpl |  6 ++--
 6 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/client/css/forms.styl b/client/css/forms.styl
index 2a294bc0..7a2a6f62 100644
--- a/client/css/forms.styl
+++ b/client/css/forms.styl
@@ -36,13 +36,13 @@ form.tabular
         li
             display: table-row
             label:not(.radio):not(.checkbox):not(.file-dropper)
+                box-sizing: border-box
                 display: table-cell
                 width: 33%
                 text-align: right
                 padding-right: 1em
     .messages, .buttons
         margin-left: 33%
-        padding-left: 1em
 
 form.horizontal
     display: inline-block
diff --git a/client/css/help.styl b/client/css/help.styl
index dfd3bcd5..d90e0c57 100644
--- a/client/css/help.styl
+++ b/client/css/help.styl
@@ -1,7 +1,8 @@
 @import colors
 
 #help
-    width: 40em
+    width: 100%
+    max-width: 45em
     nav
         margin-bottom: 1.5em
     td, th
@@ -16,9 +17,18 @@
         &:first-child
             margin-top: 0
     nav
-        text-align: center
         ul
             margin: 0 auto
             text-align: left
     nav.secondary
         font-size: 0.95em
+
+    @media (max-width: 600px)
+        th, thead
+            display: none
+        table, tr, td, tbody
+            display: block
+        tr
+            margin-bottom: 0.8em
+        pre
+            white-space: pre-wrap
diff --git a/client/css/main.styl b/client/css/main.styl
index c580e126..863b4f97 100644
--- a/client/css/main.styl
+++ b/client/css/main.styl
@@ -13,6 +13,12 @@ body
     font-family: 'Droid Sans', sans-serif
     font-size: 12pt
     line-height: 18pt
+    @media (max-width: 800px)
+        font-size: 10pt
+        line-height: 15pt
+    @media (max-width: 1200px)
+        font-size: 11pt
+        line-height: 16.5pt
 
 h1, h2, h3
     font-weight: normal
@@ -40,9 +46,10 @@ form .fa-question-circle-o
     vertical-align: middle
 
 #content-holder
-    margin: 2em
+    padding: 1.5vw
     text-align: center
     >.content-wrapper
+        box-sizing: border-box /* make max-width: 100% on this element include padding */
         text-align: left
         display: inline-block
         margin: 0 auto
@@ -50,7 +57,7 @@ form .fa-question-circle-o
             margin-top: 0
     >.content-wrapper:not(.transparent)
         background: $top-nav-color
-        padding: 2em
+        padding: 2vw
 
 hr
     border: 0
diff --git a/client/css/tags.styl b/client/css/tags.styl
index db56f799..8dcc7977 100644
--- a/client/css/tags.styl
+++ b/client/css/tags.styl
@@ -31,6 +31,10 @@
                 display: inline
                 &:not(:last-child):after
                     content: ', '
+        @media (max-width: 800px)
+            .implications, .suggestions
+                display: none
+
 .tag-list-header
     text-align: left
     form
@@ -41,22 +45,36 @@
         font-size: 0.95em
         color: $inactive-link-color
 
-.tag-categories
-    td, th
-        padding: .2em
-        &:first-child
-            padding-left: 0
-        &:last-child
-            padding-right: 0
-        &.name
-            width: 12em
-        &.color
-            text-align: center
-            width: 5em
-        &.usages
-            text-align: center
-            width: 5em
-    tfoot
-        display: none
+.content-wrapper.tag
+    width: 100%
+    max-width: 30em
+    form
+        width: 100%
+        label:not(.radio):not(.checkbox):not(.file-dropper)
+            width: 6em
+        .messages, .buttons
+            margin-left: 6em
+
+.content-wrapper.tag-categories
+    width: 100%
+    max-width: 35em
+    table
+        width: 100%
+        td, th
+            padding: .2em
+            &:first-child
+                padding-left: 0
+            &:last-child
+                padding-right: 0
+            &.name
+                width: 35%
+            &.color
+                text-align: center
+                width: 35%
+            &.usages
+                text-align: center
+                width: 10%
+        tfoot
+            display: none
     .messages, form
         width: auto
diff --git a/client/css/users.styl b/client/css/users.styl
index 6c96a8df..5759c16f 100644
--- a/client/css/users.styl
+++ b/client/css/users.styl
@@ -25,8 +25,9 @@
 
 
 #user
-    width: 30em
-    .text-nav
+    width: 100%
+    max-width: 35em
+    nav.text-nav
         margin-bottom: 1.5em
 
     #user-summary
diff --git a/client/html/help_search_general.tpl b/client/html/help_search_general.tpl
index c473f9e9..a7b05d83 100644
--- a/client/html/help_search_general.tpl
+++ b/client/html/help_search_general.tpl
@@ -13,17 +13,17 @@ can be of following form:</p>
         <tr>
             <td><code>&lt;value&gt;</code></td>
             <td>anonymous tokens</td>
-            <td>basic filters</td>
+            <td>used for basic filters</td>
         </tr>
         <tr>
             <td><code>&lt;key&gt;:&lt;value&gt;</code></td>
             <td>named tokens</td>
-            <td>advanced filters</td>
+            <td>used for advanced filters</td>
         </tr>
         <tr>
             <td><code>sort:&lt;style&gt;</code></td>
             <td>sort style tokens</td>
-            <td>sort the results</td>
+            <td>used to sort the results</td>
         </tr>
         <tr>
             <td><code>special:&lt;value&gt;</code></td>