aboutsummaryrefslogtreecommitdiffstats
path: root/python/fatcat_web/templates
diff options
context:
space:
mode:
authorBryan Newbold <bnewbold@robocracy.org>2019-06-27 12:22:16 -0700
committerBryan Newbold <bnewbold@robocracy.org>2019-06-27 12:22:16 -0700
commit5d9d3b5985991167f53cc07ba3b33b560db9bcac (patch)
treec7b4eea7d350d8d7c3235375b2c87691d07c220b /python/fatcat_web/templates
parent847304be39c01ab7ca82dbc81ef92c1459e0ed23 (diff)
downloadfatcat-5d9d3b5985991167f53cc07ba3b33b560db9bcac.tar.gz
fatcat-5d9d3b5985991167f53cc07ba3b33b560db9bcac.zip
webface UI tweaks, mostly for mobile
Diffstat (limited to 'python/fatcat_web/templates')
-rw-r--r--python/fatcat_web/templates/base.html16
-rw-r--r--python/fatcat_web/templates/entity_base.html5
-rw-r--r--python/fatcat_web/templates/home.html3
-rw-r--r--python/fatcat_web/templates/stats.html6
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>