diff options
| author | Bryan Newbold <bnewbold@robocracy.org> | 2019-06-27 12:22:16 -0700 |
|---|---|---|
| committer | Bryan Newbold <bnewbold@robocracy.org> | 2019-06-27 12:22:16 -0700 |
| commit | 5d9d3b5985991167f53cc07ba3b33b560db9bcac (patch) | |
| tree | c7b4eea7d350d8d7c3235375b2c87691d07c220b | |
| parent | 847304be39c01ab7ca82dbc81ef92c1459e0ed23 (diff) | |
| download | fatcat-5d9d3b5985991167f53cc07ba3b33b560db9bcac.tar.gz fatcat-5d9d3b5985991167f53cc07ba3b33b560db9bcac.zip | |
webface UI tweaks, mostly for mobile
| -rw-r--r-- | python/fatcat_web/templates/base.html | 16 | ||||
| -rw-r--r-- | python/fatcat_web/templates/entity_base.html | 5 | ||||
| -rw-r--r-- | python/fatcat_web/templates/home.html | 3 | ||||
| -rw-r--r-- | 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> |