webface: refactoring of style

author: Bryan Newbold <bnewbold@archive.org> 2020-04-02 16:14:22 -0700
committer: Bryan Newbold <bnewbold@archive.org> 2020-04-02 16:14:22 -0700
commit: cbfa0d9e1ed1dca6fa34f134cf81d4dd8a0a99f8 (patch)
tree: 79da5f6715b1f3b2bdf46ffe7fe3b7cff74b84ca /fatcat_covid19/templates
parent: d87b5392ede1e191448cf053ca27ad7cac5c2297 (diff)
download: fatcat-covid19-cbfa0d9e1ed1dca6fa34f134cf81d4dd8a0a99f8.tar.gz
fatcat-covid19-cbfa0d9e1ed1dca6fa34f134cf81d4dd8a0a99f8.zip
4 files changed, 138 insertions, 77 deletions
diff --git a/fatcat_covid19/templates/base.html b/fatcat_covid19/templates/base.html
index 0ca8471..07632dc 100644
--- a/fatcat_covid19/templates/base.html
+++ b/fatcat_covid19/templates/base.html
@@ -22,14 +22,13 @@
 </head>
 <body style="margin-bottom: 130px;">
 
-<header class="ui fixed inverted menu">
+<header class="ui fixed inverted menu"> {# style="background-color: #590013;" #}
   <div class="ui container">
-    <a href="/" class="header item">
+    <a href="{{ url_for("search.page_home") }}" class="header item">
       <!-- <img class="logo" src="assets/images/logo.png"> -->
-      <span style="color: red;">COVID-19</span>
+      fatcat &nbsp;<span style="color: red;">[COVID-19]</span>
     </a>
-    <a href="https://fatcat.wiki/" class="item mobile-hide">Fatcat</a>
-    <a href="/about" class="item mobile-hide">About</a>
+    <a href="{{ url_for("search.page_about") }}" class="item mobile-hide">About</a>
     <div class="right menu">
       <div class="item" style="padding: 0;">
         <form class="" action="/fulltext/search" method="get" role="search" aria-label="Papers">
@@ -54,6 +53,23 @@
   </div>
 </header>
 
+<div class="ui vertical stripe yellow inverted segment">
+  <div class="ui text container">
+  <div class="ui centered grid" style="padding-top: 2.1em;">
+    <div class="row" style="padding-bottom: 0.5em;">
+      <div class="sixteen wide column" style="font-size: 1.1rem; color: black;">
+      <center>
+        <i class="exclamation triangle icon"></i>
+        <b>{{ _("Prototype") }}:</b>
+        {{ _("These resources do not constitute medical advice or research consensus!") }}
+        <i class="exclamation triangle icon mobile-hide"></i>
+      </center>
+      </div>
+    </div>
+  </div>
+  </div>
+</div>
+
 {% block fullmain %}
 <!-- 4em top margin is "enough" -->
 <main class="ui main container" style="margin-top: 6em; margin-bottom: 2em;" {% block main_extra_attr %}{% endblock %}>
@@ -87,6 +103,7 @@
       <a class="item" href="/sources">Sources</a>
       <a class="item" href="https://github.com/bnewbold/covid19-fatcat-wiki/">Code</a>
       <a class="item" href="https://github.com/bnewbold/covid19-fatcat-wiki/tree/{{ config.GIT_REVISION }}"><code>{{ config.GIT_REVISION }}</code></a>
+      <a class="item" href="#" style="color: red;"><b>[COVID-19]</b></a>
     </div>
   </div>
 </footer>
diff --git a/fatcat_covid19/templates/entity_macros.html b/fatcat_covid19/templates/entity_macros.html
index 9cded8a..66f0eb2 100644
--- a/fatcat_covid19/templates/entity_macros.html
+++ b/fatcat_covid19/templates/entity_macros.html
@@ -1,8 +1,28 @@
 
 {% macro fulltext_search_result_row(paper) -%}
-<div>
-  <h4 style="margin-top: 1em; margin-bottom: 0px; font-size: 1.1em;">
-    <a href="/release/{{ paper.ident }}" style="color: #2224c7;">
+<div class="row">
+<div class="four wide right aligned column" style="padding: 1em;">
+  {% if paper.fulltext.t_thumbnail_url %}
+    <a href="{{ config.COVID19_FULLTEXT_HOST }}{{ paper.fulltext.pdf_url.replace('//', '/') }}">
+      <img src="{{ config.COVID19_FULLTEXT_HOST }}{{ paper.fulltext.t_thumbnail_url.replace('//', '/') }}" style="border: 1px solid grey; max-height: 12em;">
+    </a>
+  {% else %}
+    No Fulltext
+  {% endif %}
+</div>
+<div class="twelve wide column">
+  {# ### TITLE ROW #}
+  <h4 style="margin-top: 1em; margin-bottom: 0px; font-size: 1.2em;">
+
+    {# "best URL" calculation #}
+    {% if paper.pmcid %}
+    <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/{{ paper.pmcid }}/"
+    {% elif paper.pmid %}
+    <a href="https://pubmed.ncbi.nlm.nih.gov/{{ paper.pmid }}/"
+    {% else %}
+    <a href="https://fatcat.wiki/release/{{ paper.fatcat_ident }}"
+    {% endif %}
+    style="color: #2224c7;">
       {% if paper.title %}
         {{ paper.title[:512] }}
         {% if paper.title|length > 512 %}...{% endif %}
@@ -10,53 +30,74 @@
         [blank]
       {% endif %}
     </a>
+
+    {% if paper.release_type in ("article-journal", "paper-conference") %}
+      {# pass #}
+    {% elif paper.release_type in ("book", "chapter", "dataset") %}
+      <b style="text-transform: uppercase;">[{{ paper.release_type }}]</b>
+    {% elif not paper.release_type %}
+      <b style="text-transform: uppercase; color: red;">[media?]</b>
+    {% else %}
+      <b style="text-transform: uppercase;">[{{ paper.release_type }}]</b>
+    {% endif %}
   </h4>
+  <div style="float: right; padding: 4px;">
+  &nbsp;&nbsp;<a href="{{ config.ELASTICSEARCH_BACKEND }}/{{ config.ELASTICSEARCH_FULLTEXT_INDEX }}/release/{{ paper.fatcat_ident }}" class="ui grey tag label"><i class="file icon"></i>json</a>
+  </div>
   {% if paper.best_pdf_url %}
   <div style="float: right; padding: 4px;">
   &nbsp;&nbsp;<a href="{{ paper.best_pdf_url }}" class="ui violet tag label"><i class="file icon"></i>fulltext</a>
   </div>
   {% endif %}
-  {#
-  <h5 style="margin-top: 4px; margin-bottom: 4px; font-size: 1em;">{{ ", ".join(paper.contrib_names[:12]) }}
-    {% if paper.contrib_names|length > 12 %}<i>(+{{ paper.contrib_names|length - 12 }} others)</i>{% endif %}
-  </h5>
-  #}
+
+
+  {# ### AUTHOR ROW #}
   {% if paper.contrib_names %}
-    <div style="margin-top: 0px; margin-bottom: 0px; font-size: 1em;">
+    <div style="margin-top: 0.1em; margin-bottom: 0.1em; font-size: 1.1em;">
     <b>
     {{ ", ".join(paper.contrib_names[:12]) }}
     {% if paper.contrib_names|length > 12 %}<i>(+{{ paper.contrib_names|length - 12 }} others)</i>{% endif %}
     </b>
     </div>
   {% endif %}
+
+
+  {# ### JOURNAL ROW #}
   {% if paper.release_year %}
     {{ paper.release_year }}
   {% endif %}
-  {% if paper.release_type %}
-    {% if paper.release_type in ("article-journal", "paper-conference") %}
-      <span class="ui black basic label small">{{ paper.release_type }}</span>
-    {% elif paper.release_type in ("book") %}
-      <span class="ui brown basic label small">{{ paper.release_type }}</span>
+  {% if paper.release_year and paper.container_name %}
+    |
+  {% endif %}
+  {% if paper.container_name %}
+    {% if paper.container_id %}
+      <a href="https://fatcat.wiki/container/{{ paper.container_id }}" style="color: black;">{{ paper.container_name }}</a>
     {% else %}
-      <span class="ui grey basic label small">{{ paper.release_type }}</span>
+      {{ paper.container_name }}
     {% endif %}
+    {% if paper.container_is_oa %}<i class="icon unlock orange small"></i>{% endif %}
   {% endif %}
   {% if paper.withdrawn_status %}
-    <span class="ui red label small">{{ paper.withdrawn_status }}</span>
+    <b style="color: red;"><code>[{{ paper.withdrawn_status }}]</code></b>
   {% endif %}
   {% if paper.release_stage and paper.release_stage != "published" %}
-    <span class="ui pink basic label small">{{ paper.release_stage }}</span>
+    <b style="color: pink;"><code>[{{ paper.release_stage }}]</code></b>
   {% elif not paper.release_stage %}
-    <span class="ui red basic label small">unknown</span>
+    <b style="color: red;"><code>[unpublished?]</code></b>
   {% endif %}
-  {% if paper.container_name %}
-    {% if paper.container_id %}
-      <a href="/container/{{ paper.container_id }}" style="color: black;">{{ paper.container_name }}</a>
-    {% else %}
-      {{ paper.container_name }}
-    {% endif %}
-    {% if paper.container_is_oa %}<i class="icon unlock orange small"></i>{% endif %}
+
+  {# ### ABSTRACT / QUERY HIGHLIGHT #}
+  {% if paper.abstract %}
+    <div style="padding: 1em;">
+      {% if paper.abstract[0]|length > 500 %}
+        {{ paper.abstract[0][:500] }}...
+      {% else %}
+        {{ paper.abstract[0][:500] }}...
+      {% endif %}
+    </div>
   {% endif %}
+
+  {# ### IDENTIFIERS #}
   {% if paper.doi or paper.pmid or paper.arxiv_id or paper.jstor_id %}
   <br>
   {% endif %}
@@ -74,6 +115,7 @@
   <a href="/work/{{ paper.work_id }}"><i class="sitemap icon"></i> and 5 other versions of the same work!</a>
   {% endif %}
 </div>
+</div>
 {% endmacro %}
 
 
diff --git a/fatcat_covid19/templates/fulltext_search.html b/fatcat_covid19/templates/fulltext_search.html
index dd42f9b..f1f2c6b 100644
--- a/fatcat_covid19/templates/fulltext_search.html
+++ b/fatcat_covid19/templates/fulltext_search.html
@@ -12,7 +12,7 @@
 
 {% block fullmain %}
 
-<div class="ui vertical stripe segment" style="background-color: #EEE; padding-top: 4.5em;">
+<div class="ui vertical stripe segment" style="background-color: #EEE; padding-top: 2.5em;">
   <div class="ui container text">
     <h1>Search all COVID-19 Resources</h1>
     <form class="" role="search" action="/fulltext/search" method="get">
@@ -31,42 +31,58 @@
   </div>
 </div>
 
-<div class="ui container text">
-<br>
 
 {% if found %}
-{% if found.results %}
-    {{ entity_macros.top_results(found) }}
+  {% if found.results %}
 
-  {% for paper in found.results %}
-  {{ entity_macros.fulltext_search_result_row(paper) }}
-{% endfor %}
-{% if found.results|length > 8 %}
-  <div class="ui divider"></div>
-  <div style="text-align: center">
-  {{ entity_macros.bottom_results(found)}}
-  </div>
-{% endif %}
-{% else %}
+    <div class="ui container text" style="padding: 1em;">
+      {{ entity_macros.top_results(found) }}
+    </div>
+    <div class="ui container">
+      <div class="ui centered grid">
+        {% for paper in found.results %}
+          {{ entity_macros.fulltext_search_result_row(paper) }}
+        {% endfor %}
+      </div>
+    </div>
+    {% if found.results|length > 8 %}
+      <div class="ui container text">
+        <div class="ui divider"></div>
+        <div style="text-align: center">
+          {{ entity_macros.bottom_results(found)}}
+        </div>
+      </div>
+    {% endif %}
 
-Raw query was: <i>{{ found.query.q }}</i>
+  {% else %}
+    {# "did a query, but no results" #}
+    <div class="ui container text">
+      <br>
+      Raw query was: <i>{{ found.query.q }}</i>
 
-<div class="ui centered stackable grid" style="padding-top: 15%;">
-  <div class="row">
-    <div class="four wide column">
-      <img src="/static/paper_man_confused.gif" alt="confused paper man">
+      <div class="ui centered stackable grid" style="padding-top: 15%;">
+        <div class="row">
+          {#
+          <div class="four wide column">
+            <img src="/static/paper_man_confused.gif" alt="confused paper man">
+          </div>
+          #}
+          <div class="six wide column">
+            <h2>No results found!</h2>
+            <p>You could try elsewhere:</p>
+            <ul>
+            <li>Search <a href="https://dissem.in/search?q={{ found.query.q | urlencode }}">dissem.in</a></li>
+            <li>Search <a href="https://www.base-search.net/Search/Results?lookfor={{ found.query.q | urlencode }}">BASE</a></li>
+            <li>Search <a href="https://scholar.google.com/scholar?q={{ found.query.q | urlencode }}">Google Scholar</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="six wide column">
-  <h2>No results found!</h2>
-  <p>You could try elsewhere:</p>
-  <ul>
-    <li>Search <a href="https://dissem.in/search?q={{ found.query.q | urlencode }}">dissem.in</a></li>
-    <li>Search <a href="https://www.base-search.net/Search/Results?lookfor={{ found.query.q | urlencode }}">BASE</a></li>
-    <li>Search <a href="https://scholar.google.com/scholar?q={{ found.query.q | urlencode }}">Google Scholar</a></li>
-  </ul>
-</div>
-{% endif %}
+
+  {% endif %}
+{% else %}
+    {# "no query submitted" #}
 {% endif %}
 
-</div>
 {% endblock %}
diff --git a/fatcat_covid19/templates/home.html b/fatcat_covid19/templates/home.html
index dbfb833..b78cb1c 100644
--- a/fatcat_covid19/templates/home.html
+++ b/fatcat_covid19/templates/home.html
@@ -9,10 +9,10 @@
 
 {% block fullmain %}
 
-<div class ="ui vertical inverted masthead center aligned segment" style="padding-top: 12em; padding-bottom: 10em;">
+<div class ="ui vertical inverted violet masthead center aligned segment" style="padding-top: 7em; padding-bottom: 10em;">
   <div class="ui text container">
     <h1 class="ui header inverted huge centered">
-      {{ _("Search tens of thousands of COVID-19 research papers and documents") }}
+      {{ _("Search Tens of Thousands of COVID-19 Research Papers and Reports") }}
     </h1>
     <br>
     <form class="" action="{{ url_for("search.fulltext_search") }}" method="get" role="search" aria-label="papers" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
@@ -27,20 +27,6 @@
   </div>
 </div>
 
-<div class="ui vertical stripe segment" style="background-color: #fffaf3; color: #573a08;">
-  <div class="ui text container">
-  <div class="ui centered grid">
-    <div class="row">
-      <div class="fourteen wide column" style="font-size: 1.1rem;">
-        <b>{{ _("Project Status") }}: {{ _("Prototype") }}</b>
-        &nbsp;
-        {{ _("These resources are not qualified medical advice!") }}
-      </div>
-    </div>
-  </div>
-  </div>
-</div>
-
 {#
 <div class="ui vertical stripe segment" style="padding-top: 2em; padding-bottom: 2em;">
   <div class="ui text container" style="max-width: 800px!important;">
author	Bryan Newbold <bnewbold@archive.org>	2020-04-02 16:14:22 -0700
committer	Bryan Newbold <bnewbold@archive.org>	2020-04-02 16:14:22 -0700
commit	cbfa0d9e1ed1dca6fa34f134cf81d4dd8a0a99f8 (patch)
tree	79da5f6715b1f3b2bdf46ffe7fe3b7cff74b84ca /fatcat_covid19/templates
parent	d87b5392ede1e191448cf053ca27ad7cac5c2297 (diff)
download	fatcat-covid19-cbfa0d9e1ed1dca6fa34f134cf81d4dd8a0a99f8.tar.gz fatcat-covid19-cbfa0d9e1ed1dca6fa34f134cf81d4dd8a0a99f8.zip