From 5d9d3b5985991167f53cc07ba3b33b560db9bcac Mon Sep 17 00:00:00 2001
From: Bryan Newbold <bnewbold@robocracy.org>
Date: Thu, 27 Jun 2019 12:22:16 -0700
Subject: webface UI tweaks, mostly for mobile

---
 python/fatcat_web/templates/base.html        | 16 ++++++++++------
 python/fatcat_web/templates/entity_base.html |  5 ++++-
 python/fatcat_web/templates/home.html        |  3 +++
 python/fatcat_web/templates/stats.html       |  6 +++---
 4 files changed, 20 insertions(+), 10 deletions(-)
diff --git a/python/fatcat_web/templates/base.html b/python/fatcat_web/templates/base.html
index ba62eaba..b853f413 100644
--- a/python/fatcat_web/templates/base.html
+++ b/python/fatcat_web/templates/base.html
@@ -2,7 +2,8 @@
 <html lang="en" style="position: relative; min-height: 100%; height: auto;">
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="referrer" content="origin-when-cross-origin">
 
   <title>{%- block title -%}
     {%- if config.FATCAT_DOMAIN.startswith('qa.') -%}
@@ -12,14 +13,17 @@
     {%- endif -%}
     fatcat!
   {%- endblock -%}</title>
-  <meta name="referrer" content="origin-when-cross-origin">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"
     crossorigin="anonymous">
   <style>
     {# bnewbold: fix light grey bars in header #}
     .ui.inverted.menu .item:before { background: none; }
+
+    @media only screen and (max-width: 479px) {
+      .mobile-hide{ display: none !important; }
+    }
   </style>
   {% block extra_head %}{% endblock %}
 </head>
@@ -44,9 +48,9 @@
       <!-- <img class="logo" src="assets/images/logo.png"> -->
       fatcat!
     </a>
-    <a href="/about" class="item">About</a>
-    <a href="https://guide.{{ config.FATCAT_DOMAIN }}/" class="item">Guide</a>
-    <a href="/changelog" class="item">Changelog</a>
+    <a href="/about" class="item mobile-hide">About</a>
+    <a href="https://guide.{{ config.FATCAT_DOMAIN }}/" class="item mobile-hide">Guide</a>
+    <a href="/changelog" class="item mobile-hide">Changelog</a>
     <div class="right menu">
       <div class="item" style="padding: 0;">
         <form class="" action="/search" method="get" role="search" aria-label="Papers">
diff --git a/python/fatcat_web/templates/entity_base.html b/python/fatcat_web/templates/entity_base.html
index 5f9f9f46..b846614d 100644
--- a/python/fatcat_web/templates/entity_base.html
+++ b/python/fatcat_web/templates/entity_base.html
@@ -57,7 +57,9 @@
             <br>
           {% endif %}
         {% endif %}
-        <div class="ui container" style="min-width: 40em;">
+        <!-- these nested div make tabs scrollable on mobile -->
+        <div class="ui container" style="min-width: 100%; overflow-x: auto;">
+        <div style="min-width: 40em;">
           <div class="ui small tabular compact menu">
             {{ entity_tab("overview", "Overview", "") }}
             {% if entity_type == "release" %}
@@ -77,6 +79,7 @@
             </div>
           {% endif %}
         </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/python/fatcat_web/templates/home.html b/python/fatcat_web/templates/home.html
index 84899c8d..0aced300 100644
--- a/python/fatcat_web/templates/home.html
+++ b/python/fatcat_web/templates/home.html
@@ -119,6 +119,8 @@
 
 <br>
 
+{# this div makes the table scrollable on mobile #}
+<div style="max-width: 100%; overflow-x: auto;">
 <table class="ui single line unstackable table centered" style="max-width: 800px; font-size: 1.1rem; margin-right: auto; margin-left: auto;">
 <thead>
 <tr><th>Entity Type
@@ -237,6 +239,7 @@
 {% endif %}
     <td>
 </table>
+</div>
 
 </div>
 
diff --git a/python/fatcat_web/templates/stats.html b/python/fatcat_web/templates/stats.html
index f11ca820..eaff8f8d 100644
--- a/python/fatcat_web/templates/stats.html
+++ b/python/fatcat_web/templates/stats.html
@@ -13,7 +13,7 @@ You can also fetch these numbers <a href="./stats.json">as JSON</a>.
 
 <table class="ui structured table">
   <tbody>
-    <tr><td rowspan="5" class="active top aligned center aligned"><b>"Papers"</b></td>
+    <tr><td rowspan="5" class="active top aligned center aligned" style="padding-top:0px;"><b>"Papers"</b></td>
         <td>Total</td>
         <td class="right aligned">{{ "{:,}".format(stats.papers.total) }}</td>
     <tr>
@@ -29,14 +29,14 @@ You can also fetch these numbers <a href="./stats.json">as JSON</a>.
         <td>On web, not in Keepers</td>
         <td class="right aligned">{{ "{:,}".format(stats.papers.in_web_not_kbart) }}</td>
 
-    <tr><td rowspan="2" class="active top aligned center aligned"><b>Releases</b></td>
+    <tr><td rowspan="2" class="active top aligned center aligned" style="padding-top:0px;"><b>Releases</b></td>
         <td>Total</td>
         <td class="right aligned">{{ "{:,}".format(stats.release.total) }}</td>
     <tr>
         <td>References (raw, unlinked)</td>
         <td class="right aligned">{{ "{:,}".format(stats.release.refs_total) }}</td>
 
-    <tr><td rowspan="1" class="active top aligned center aligned"><b>Containers</b></td>
+    <tr><td rowspan="1" class="active top aligned center aligned" style="padding-top:0px;"><b>Containers</b></td>
         <td>Total</td>
         <td class="right aligned">{{ "{:,}".format(stats.container.total) }}</td>
   </tbody>
-- 
cgit v1.2.3


"Papers"
	"Papers"	Total	{{ "{:,}".format(stats.papers.total) }}
		On web, not in Keepers	{{ "{:,}".format(stats.papers.in_web_not_kbart) }}
		Releases
		Releases	Releases	Total	{{ "{:,}".format(stats.release.total) }}
References (raw, unlinked)		{{ "{:,}".format(stats.release.refs_total) }}	Releases
Containers
Containers	Total	{{ "{:,}".format(stats.container.total) }}