aboutsummaryrefslogtreecommitdiffstats
path: root/fatcat_scholar/templates
diff options
context:
space:
mode:
authorBryan Newbold <bnewbold@archive.org>2020-10-20 15:02:51 -0700
committerBryan Newbold <bnewbold@archive.org>2020-10-20 15:02:51 -0700
commit5dd7a15db9656fc28f26dac77e5e9f6dc0d4dbc9 (patch)
treecc35bea00d5aec1b56a6184998d530d3086c25d7 /fatcat_scholar/templates
parent41aa0edaf826cd6561b4b12d1040d403db51e4ea (diff)
downloadfatcat-scholar-5dd7a15db9656fc28f26dac77e5e9f6dc0d4dbc9.tar.gz
fatcat-scholar-5dd7a15db9656fc28f26dac77e5e9f6dc0d4dbc9.zip
html: several small tweaks and accessibility improvements
Diffstat (limited to 'fatcat_scholar/templates')
-rw-r--r--fatcat_scholar/templates/base.html35
-rw-r--r--fatcat_scholar/templates/search.html15
-rw-r--r--fatcat_scholar/templates/search_macros.html48
3 files changed, 69 insertions, 29 deletions
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 %}