aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--fatcat_scholar/templates/about.html7
-rw-r--r--fatcat_scholar/templates/base.html52
-rw-r--r--fatcat_scholar/templates/home.html8
-rw-r--r--fatcat_scholar/templates/search.html69
-rw-r--r--fatcat_scholar/templates/search_macros.html6
5 files changed, 100 insertions, 42 deletions
diff --git a/fatcat_scholar/templates/about.html b/fatcat_scholar/templates/about.html
new file mode 100644
index 0000000..ad984ce
--- /dev/null
+++ b/fatcat_scholar/templates/about.html
@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+
+{% block main %}
+<h1>Some About Content</h1>
+
+<p>Lorem ipsum
+{% endblock %}
diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index eb3deaa..78d4f29 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -34,8 +34,12 @@
.ui.inverted.menu .item:before { background: none; }
@media only screen and (max-width: 479px) {
- .mobile-hide{ display: none !important; }
+ .mobile-hide { display: none !important; }
}
+ @media only screen and (min-width: 480px) {
+ .mobile-only { display: none !important; }
+ }
+
{# for fulltext search result highlighting #}
.search_highlights em {
{# yellow #}
@@ -44,6 +48,13 @@
font-weight: bold;
}
+ .search_filters summary::marker {
+ display: none;
+ }
+ .search_filters summary::-webkit-details-marker {
+ display: none;
+ }
+
footer p a {
color: rgba(255, 255, 255, 0.5);
}
@@ -115,16 +126,15 @@
</div>
</header>
-{% block fullmain %}
+{% block fullbody %}
<div class="ui vertical stripe segment" style="background-color: #dedede;">
- <div class="ui container" style="padding: 1em; padding-bottom: 0.0em;">
- <div class="ui equal height grid">
+ <div class="ui container" style="padding-top: 1em; padding-bottom: 0; padding-left: 0; padding-right: 0;">
+ <div class="ui equal height stackable grid">
<div class="ui four wide column">
- <div style="display: flex; justify-content: center; align-items: center; height:100%; width: 100%;">
+ <div style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;">
<a href="{{ lang_prefix }}/">
<span style="font-size: 1.5rem; font-weight: bold;">[scholar.archive.org]</span>
{# hack to align vertically with search box #}
- <br>&nbsp;
</a>
</div>
</div>
@@ -137,34 +147,36 @@
<button class="ui green button" style="border-radius: 0; background-color: #44a25a; font-size: 1.2rem;">{{ _("Search") }}</button>
</div>
</div>
- <div style="float: right; padding-top: 0.5em;">
- <a href="#">User Guide</a>
- </div>
</form>
</div>
</div>
+ <div style="display: flex; width: 100%; justify-content: space-between; padding-top: 0.5em;">
+ <div></div>
+ <div>
+ <a href="#" style="order: -1;">User Guide</a>
+ </div>
+ </div>
</div>
</div>
-<main class="ui main container">
-{% block fullbody %}
- <div class="ui container text">
- {% block body %}Nothing to see here.{% endblock %}
+<main class="ui main container" style="min-height: 50vh;">
+{% block fullmain %}
+ <div class="ui container text" style="margin-top: 2em;">
+ {% block main %}Nothing to see here.{% endblock %}
</div>
{% endblock %}
</main>
{% endblock %}
-<div style="height: 24em;">
-</div>
-<footer class="ui inverted vertical footer segment" style="padding: 5em 0em; position: absolute; bottom: 0px; width: 100%;">
+<footer class="ui inverted vertical footer segment" style="padding: 4em 0em; margin-top: 3em; width: 100%;">
<div class="ui container">
- <div class="ui stackable inverted divided equal height grid">
+ <div class="ui stackable mobile reversed inverted divided equal height grid">
<div class="nine wide column">
<div class="ui grid">
- <div class="three wide column" style="padding-top: 4em;">
- <img class="logo" src="{{ url_for('static', path='/ia-logo.svg') }}" style="width: 4em; opacity: 0.5;">
+ <div class="three wide two wide computer column" style="padding-top: 4em; padding-right: 0;">
+ <img class="logo" src="{{ url_for('static', path='/ia-logo.svg') }}" style="width: 100%; opacity: 0.5;">
</div>
- <div class="twelve wide column">
+ <div class="one wide column computer only"></div>
+ <div class="thirteen wide eleven wide computer column">
<h3>Internet Archive</h3>
<p style="color: rgba(255, 255, 255, 0.5);">We are a 501(c)(3) non-profit, building a digital library of Internet sites and other cultural artifacts in digital form. Other projects include the <a href="https://web.archive.org">Wayback Machine</a>, <a href="https://archive.org">archive.org</a> <a href="https://openlibrary.org">openlibrary.org</a> and <a href="https://archive-it.org">archive-it.org</a>
<div class="ui horizontal inverted link list">
diff --git a/fatcat_scholar/templates/home.html b/fatcat_scholar/templates/home.html
index 2092326..66e216f 100644
--- a/fatcat_scholar/templates/home.html
+++ b/fatcat_scholar/templates/home.html
@@ -1,11 +1,11 @@
{% extends "base.html" %}
-{% block fullmain %}
+{% block fullbody %}
<div class="ui vertical stripe segment" style="background-color: #dedede;">
- <div class="ui container" style="padding: 3em;">
+ <div class="ui container" style="padding-top: 3em; padding-bottom: 3em;">
<div class="ui centered grid">
- <div class="ui fourteen wide column">
+ <div class="ui sixteen wide mobile twelve wide computer column">
<div style="width: 100%; text-align: center;">
<h1>Search Inside Millions of Research Papers</h1>
<br>
@@ -29,7 +29,7 @@
</div>
<div class="ui container" style="padding: 1em; margin-top: 2em;">
- <div class="ui four cards">
+ <div class="ui four doubling cards">
<div class="ui card">
<a class="image" href="https://web.archive.org/web/20171006225602/https://burnstrauma.biomedcentral.com/track/pdf/10.1186/s41038-017-0090-z?site=burnstrauma.biomedcentral.com">
diff --git a/fatcat_scholar/templates/search.html b/fatcat_scholar/templates/search.html
index 6d9fec2..10eda61 100644
--- a/fatcat_scholar/templates/search.html
+++ b/fatcat_scholar/templates/search.html
@@ -1,20 +1,40 @@
{% import "search_macros.html" as search_macros %}
{% extends "base.html" %}
-{% block fullbody %}
-<div class="ui equal height divided grid" style="margin-top: 1em;">
- <div class="ui two wide column">
+{% block fullmain %}
+<div class="mobile-only" style="margin-top: 1.0em;">
+ <details class="search_filters">
+ <summary style="float: right;"><i class="filter icon"></i>Filters</summary>
+ <p>
+ {{ 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) }}
+ {{ search_macros.query_option(query.sort_options, query.sort_order) }}
+ </p>
+ </details>
+
+ {% if hits %}
+ {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #}
+ <span style="font-size: 1.5em;">{{ "{:,}".format(hits.count_found) }}</span>
+ Hits
+ <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span>
+ {% endif %}
+</div>
+
+<div class="ui equal height stackable divided grid" style="margin-top: 1em;">
+
+ <div class="ui mobile-hide two wide column">
{% if hits %}
- <div style="width: 100%; text-align: right;">
- {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #}
- <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>
- Hits
- </div>
- <div style="text-align: right;">
- <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span>
- </div>
- <div class="ui clearing divider"></div>
+ <div style="width: 100%; text-align: right;">
+ {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #}
+ <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>
+ Hits
+ </div>
+ <div style="text-align: right;">
+ <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span>
+ </div>
+ <div class="ui clearing divider"></div>
{% endif %}
<div style="text-align: right;">
@@ -25,20 +45,39 @@
</div>
</div>
- <div class="ui thirteen wide column">
+
+ <div class="ui fourteen wide column">
{% if search_error %}
<div class="ui error message">
<div class="header">Query Error</div>
<p>{{ search_error }}</p>
</div>
- {% elif hits %}
+ {% elif hits and hits.results %}
{% if hits.results %}
{% for paper in hits.results %}
{{ search_macros.fulltext_search_result_row(paper) }}
{% endfor %}
{% endif %}
+ {% elif hits %}
+ <div class="ui placeholder segment" style="height: 100%;">
+ <div class="ui icon header">
+ <i class="search icon"></i>
+ We didn't find any documents matching your query
+ </div>
+ <div class="inline">
+ <a href="https://archive.org/search.php?sin=TXT&query={{ query.q|urlencode }}" class="ui button" style="margin: 0.5em;">Try archive.org</a>
+ <a href="https://fatcat.wiki/search&q={{ query.q|urlencode }}" class="ui button" style="margin: 0.5em;">Try fatcat.wiki</a>
+ <a href="https://www.semanticscholar.org/search?q={{ query.q|urlencode }}" class="ui button" style="margin: 0.5em;">Try Semantic Scholar</a>
+ <a href="https://scholar.google.com/scholar?q={{ query.q|urlencode }}" class="ui button" style="margin: 0.5em;">Try Google Scholar</a>
+ </div>
+ </div>
{% else %}
- No search submitted? Some message should go here.
+ <div class="ui placeholder segment" style="height: 100%;">
+ <div class="ui icon header">
+ <i class="search icon"></i>
+ Enter a query in the box above to get started
+ </div>
+ </div>
{% endif %}
</div>
</div>
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index bb96b61..b1ccc69 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -141,18 +141,18 @@
</div>
</div>
-<div class="three wide left aligned column" style="padding-top: 0em; padding-right: 0em;">
+<div class="three wide left aligned column" style="padding-top: 0em; padding-right: 0.5em;">
{% if paper.fulltext.access_url %}
{# <img src="{{ settings.COVID19_FULLTEXT_HOST }}{{ paper.fulltext.thumbnail_url }}" style="border: 1px solid grey; max-height: 12em; max-width: 100%;"> #}
{% if paper.fulltext.thumbnail_url %}
- <div class="ui card" style="margin-bottom: 0.4em;">
+ <div class="ui card" style="margin-bottom: 0.2em;">
<a class="image" href="{{ paper.fulltext.access_url}}">
<img src="{{ paper.fulltext.thumbnail_url }}">
</a>
</div>
{% endif %}
<a href="{{ paper.fulltext.access_url}}">
- <div style="width: 100%; padding-left: 0.5em; padding-right: 0.5em; opacity: 0.5; text-align: center;">
+ <div style="width: 100%; opacity: 0.65; text-align: center;">
{# TODO: could have other hover info, like mimetype icon and file size? #}
<span>
{% if paper.fulltext.access_type == "wayback" %}
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-28 23:37:01 +0000