From 5dd7a15db9656fc28f26dac77e5e9f6dc0d4dbc9 Mon Sep 17 00:00:00 2001
From: Bryan Newbold <bnewbold@archive.org>
Date: Tue, 20 Oct 2020 15:02:51 -0700
Subject: html: several small tweaks and accessibility improvements

---
 fatcat_scholar/templates/base.html          | 35 +++++++++++++++++++--
 fatcat_scholar/templates/search.html        | 15 +++++++--
 fatcat_scholar/templates/search_macros.html | 48 +++++++++++++++--------------
 3 files changed, 69 insertions(+), 29 deletions(-)

(limited to 'fatcat_scholar/templates')

diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index 0bc92f2..fdd7099 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -53,6 +53,10 @@
       color: #28629c!important;
       border-color: #28629c!important;
     }
+    .ui.basic.orange.label {
+      color: #c54e00!important;
+      border-color: #c54e00!important;
+    }
     .ui.card .meta, .ui.cards>.card .meta {
       color: rgba(0,0,0,0.55);
     }
@@ -88,6 +92,31 @@
       }
     }
 
+    .ui.serp.card {
+      margin-bottom: 0.2em;
+      border-radius: 0;
+    }
+    .ui.serp.card img {
+      max-width: 100%;
+    }
+    .hit-count {
+      font-weight: bold;
+      line-height: 1.28571429em;
+    }
+
+    {# fix RTL dividers #}
+    {% if locale in ['ar'] %}
+    .ui.divided.grid:not([class*="vertically divided"])>.column:not(.row), .ui.divided.grid:not([class*="vertically divided"])>.row>.column {
+      box-shadow: 1px 0 0 0 rgba(34,36,38,.15);
+    }
+    nav.ui.divided.grid.column {
+      box-shadow: 0;
+    }
+    .ui.inverted.divided.grid:not([class*="vertically divided"])>.column:not(.row), .ui.inverted.divided.grid:not([class*="vertically divided"])>.row>.column {
+      box-shadow: 1px 0 0 0 rgba(255,255,255,.1);
+    }
+    {% endif %}
+
     {# for fulltext search result highlighting #}
     .search_highlights em {
       {# yellow #}
@@ -115,7 +144,7 @@
       border-radius: 0;
     }
 
-    .ui.card a:hover {
+    a:hover .ui.card {
       opacity: 0.75;
     }
 
@@ -197,7 +226,7 @@
         </div>
       </div>
       <div class="ui twelve wide column">
-        <form class="" id="search_form" action="{{ lang_prefix }}/search" method="get" role="search" aria-label="papers" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
+        <form class="" id="search_form" name="search_form" action="{{ lang_prefix }}/search" method="get" role="search" aria-label="papers" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
           <meta itemprop="target" content="https://{{ settings.SCHOLAR_DOMAIN }}/fulltext/search?q={q}"/>
           <div class="ui form">
             <div class="ui action input large fluid">
@@ -235,7 +264,7 @@
           </div>
           <div class="one wide column computer only"></div>
           <div class="thirteen wide twelve wide computer column">
-            <h3>Internet Archive</h3>
+            <h4 style="font-size: 1.28571429rem;">Internet Archive</h4>
             <p style="color: rgba(255, 255, 255, 0.5);">
             {% trans %}We are a US 501(c)(3) non-profit library, building a global archive of Internet sites and other cultural artifacts in digital form.{% endtrans %}
 
diff --git a/fatcat_scholar/templates/search.html b/fatcat_scholar/templates/search.html
index 49af012..35ecfa5 100644
--- a/fatcat_scholar/templates/search.html
+++ b/fatcat_scholar/templates/search.html
@@ -33,7 +33,7 @@
   </details>
 
   {% if hits %}
-    <span style="font-size: 1.5em;">{{ "{:,}".format(hits.count_found) }}</span>
+    <span class="hit-count" style="font-size: 1.5em;">{{ "{:,}".format(hits.count_found) }}</span>
     Hits
     <span style="color: rgba(0,0,0,0.55);">in {{ format_query_time(hits.query_time_ms) }}</span>
   {% else %}
@@ -46,7 +46,16 @@
   <nav class="ui tablet-hide two wide column">
     {% if hits %}
       <div style="width: 100%; text-align: end;">
-        <h3 style="font-size: {% if hits.count_found >= 10000000 %}1.0em{% elif hits.count_found >= 1000 %}1.5em{% else %}2.0em{% endif %};">{{ "{:,}".format(hits.count_found) }}</h3>
+        {% if hits.count_found >= 10000000 %}
+          {% set count_size = "1.0em" %}
+        {% elif hits.count_found >= 1000 %}
+          {% set count_size = "1.5em" %}
+        {% else %}
+          {% set count_size = "2.0em" %}
+        {% endif %}
+        <span class="hit-count" style="display: block; font-size: {{ count_size }};">
+          {{ "{:,}".format(hits.count_found) }}
+        </span>
         {{ _("Hits") }}
       </div>
       <div style="text-align: end;">
@@ -55,7 +64,7 @@
       <div class="ui clearing divider"></div>
     {% endif %}
 
-    <div style="text-align: end; white-space: nowrap;">
+    <div style="white-space: nowrap; direction: {% if locale in ['ar'] %}ltr{% else %}rtl{% endif %};">
       {{ search_macros.query_option(query.time_options, query.filter_time) }}
       {{ search_macros.query_option(query.type_options, query.filter_type) }}
       {{ search_macros.query_option(query.availability_options, query.filter_availability) }}
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index 66dd975..a114986 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -20,7 +20,7 @@
   {% elif tag.startswith("lang:") %}
     <span class="ui label basic black small" title="ISO Language Code">{{ tag }}</span>
   {% else %}
-    <span class="ui label small">{{ _(tag) }}</span>
+    <span class="ui label basic grey small">{{ _(tag) }}</span>
   {% endif %}
 {% endmacro %}
 
@@ -28,7 +28,7 @@
 <div class="ui grid">
 <div class="thirteen wide column serp-hit-box">
   {# ### TITLE ROW #}
-  <div style="margin-bottom: 0.1em; font-size: 1.2em; font-weight: bold;">
+  <h3 style="margin-bottom: 0.1em; font-size: 1.2em; font-weight: bold; line-height: 1.2em;">
 
     {% if paper.doc_type == "work" %}
       <a href="https://fatcat.wiki/release/{{ paper.biblio.release_ident }}" style="color: #2224c7;" target="_blank" rel="noopener">
@@ -65,11 +65,11 @@
       <span style="font-weight: normal; text-transform: uppercase; font-weight: bold;">[{{ _("page") }}]</span>
     {% endif %}
 
-  </div>
+  </h3>
 
   {# ### AUTHOR ROW #}
   {% if paper.biblio.contrib_names %}
-    <div style="margin-top: 0.1em; margin-bottom: 0.2em; font-size: 1.1em;">
+    <div style="margin-top: 0; margin-bottom: 0.2em; font-size: 1.1em;">
     {{ ", ".join(paper.biblio.contrib_names[:12]) }}
     {% if paper.biblio.contrib_names|length > 12 %}<i>(+{{ paper.biblio.contrib_names|length - 12 }} others)</i>{% endif %}
     </div>
@@ -260,22 +260,25 @@
 </div>
 <div class="three wide left aligned column" style="padding-top: 0.5em; padding-right: 0.5em;">
   {% if paper.fulltext and paper.fulltext.access_url %}
-    {% if paper.fulltext.thumbnail_url %}
-      <div class="ui serp card" style="margin-bottom: 0.2em;">
-        <a class="image" target="_blank" rel="noopener" href="{{ paper.fulltext.access_url}}" alt="{{ _('fulltext PDF download') }}">
-          <img src="{{ paper.fulltext.thumbnail_url }}" alt="{{ _('fulltext thumbnail') }}">
-        </a>
-      </div>
+    {% if paper.fulltext.file_mimetype == "application/pdf" %}
+      {% set access_alt = _('fulltext PDF download') %}
+    {% elif paper.fulltext.access_type == "ia_sim" %}
+      {% set access_alt = _('read fulltext microfilm') %}
     {% else %}
-      <div class="ui serp card" style="margin-bottom: 0.2em; box-shadow: none;">
-        <a class="image" target="_blank" rel="noopener" href="{{ paper.fulltext.access_url}}" style="background: none;">
-          <img src="/static/document-icon.svg" style="opacity: 0.6;">
-        </a>
-      </div>
+      {% set access_alt = _('fulltext access') %}
     {% endif %}
+
+    <a target="_blank" rel="noopener" href="{{ paper.fulltext.access_url}}" title="{{ access_alt }}">
+      {% if paper.fulltext.thumbnail_url %}
+        <div class="ui serp card">
+          <img src="{{ paper.fulltext.thumbnail_url }}" alt="fulltext thumbnail">
+        </div>
+      {% else %}
+        <div class="ui serp card" style="box-shadow: none;">
+          <img src="/static/document-icon.svg" style="opacity: 0.6;" alt="">
+        </div>
+      {% endif %}
     <div class="fulltext-link" style="width: 100%; opacity: 1.0; text-align: center; overflow: hidden;">
-      <a target="_blank" rel="noopener" href="{{ paper.fulltext.access_url}}">
-        <span>
         {% if paper.fulltext.access_type == "wayback" %}
           web.archive.org
         {% elif paper.fulltext.access_type in ["ia_sim", "ia_file"] %}
@@ -286,9 +289,8 @@
         {% elif paper.fulltext.access_type == "ia_sim" %}
           <i class="film icon" style="margin-right: 0;"></i>
         {% endif %}
-        </span>
-      </a>
     </div>
+    </a>
   {% else %}
     {# No Fulltext #}
   {% endif %}
@@ -298,11 +300,11 @@
 
 {% macro search_pagination(hits, top) %}
 {% if hits.offset > 0 %}
-  <button class="text-button" form="search_form" type="submit" name="offset" value="{{ hits.offset - hits.limit }}" style="margin-right: 2em;">
+  <button class="text-button" form="search_form" type="submit" name="offset" value="{{ hits.offset - hits.limit }}" style="margin-right: 2em;" rel="prev">
     <a>&#xab; {% trans %}Previous{% endtrans %}</a>
   </button>
 {% else %}
-  <span style="color:gray; margin-right: 2em;">&#xab; {% trans %}Previous{% endtrans %}</span>
+  <span style="color:rgba(0,0,0,0.55); margin-right: 2em;">&#xab; {% trans %}Previous{% endtrans %}</span>
 {% endif %}
 <i>
   {% trans trimmed start=hits.offset, end=(hits.offset + hits.limit), total="{:,}".format(hits.count_found) %}
@@ -310,10 +312,10 @@
   {% endtrans %}
 </i>
 {% if hits.offset + hits.limit < hits.count_found %}
-<button class="text-button" form="search_form" type="submit" name="offset" value="{{ hits.offset + hits.limit }}" style="margin-left: 2em;">
+<button class="text-button" form="search_form" type="submit" name="offset" value="{{ hits.offset + hits.limit }}" style="margin-left: 2em;" rel="next">
   <a>{% trans %}Next{% endtrans %} &#xbb;</a>
 {% else %}
-  <span style="color:gray; margin-left: 2em;">{% trans %}Next{% endtrans %} &#xbb;</span>
+  <span style="color:rgba(0,0,0,0.55); margin-left: 2em;">{% trans %}Next{% endtrans %} &#xbb;</span>
 {% endif %}
 </button>
 {% endmacro %}
-- 
cgit v1.2.3