serp: replace thumbnails with vertical buttons

2 files changed, 87 insertions, 32 deletions

diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index 595b8c9..268d97a 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -35,6 +35,16 @@
     nav.ui.inverted.menu .item:before { background: none; }
     nav.ui.menu { border-radius: 0; }
 
+    .ui.button.serp_button {
+      border-radius: 0;
+      margin-bottom: 0.3em;
+      text-align: left;
+    }
+
+    .ui.blue.button.serp_button {
+      background-color: #2224c7ad;
+    }
+
     @media only screen and (max-width: 767px) {
       .mobile-hide { display: none !important; }
     }
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index b7ff922..3ce49f6 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -189,11 +189,78 @@
       {{ tag_label("lang:" + paper.biblio.lang_code) }}
     {% endif %}
 
+  </div>
+
+</div>
+
+<div class="three wide left aligned column" style="padding-top: 0.5em; padding-right: 0.5em; min-width: 10em;">
+  {# ### ACCESS LINKS #}
+
+  {# trusted platform fulltext links #}
+  {# TODO: DOAJ, dblp #}
+  {% if paper.biblio.arxiv_id %}
+    <a target="_blank" rel="noopener" href="https://arxiv.org/abs/{{ paper.biblio.arxiv_id }}" title="arxiv.org access">
+      <button class="ui fluid compact blue button serp_button">
+        <i class="linkify icon"></i>
+        arxiv.org
+      </button>
+    </a>
+  {% elif paper.biblio.pmid %}
+    <a target="_blank" rel="noopener" href="https://pubmed.ncbi.nlm.nih.gov/{{paper.biblio.pmid }}" title="pubmed link">
+      <button class="ui fluid compact blue button serp_button">
+        <i class="linkify icon"></i>
+        Pubmed
+      </button>
+    </a>
+  {% endif %}
+
+  {# publisher (DOI) link #}
+  {# TODO: detect prefix? JSTOR, biorxiv, medrxiv, zenodo, figshare, dryad, etc #}
+  {% if paper.biblio.doi %}
+    <a target="_blank" rel="external noopener noreferrer" href="https://doi.org/{{paper.biblio.doi }}" style="color: green;">
+      <button class="ui fluid left aligned compact blue button serp_button">
+        <i class="linkify icon"></i>
+        Publisher
+      </button>
+    </a>
+  {% endif %}
+
+  {# archive links (if available) #}
+  {% if paper.fulltext and paper.fulltext.access_url %}
+    {% 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 %}
+      {% set access_alt = _('fulltext access') %}
+    {% endif %}
+    <a target="_blank" rel="noopener" href="{{ paper.fulltext.access_url}}" title="{{ access_alt }}" {% if settings.ENABLE_GOATCOUNTER %}data-goatcounter-click="serp-fulltext-button"{% endif %}>
+      <button class="ui fluid compact black button serp_button">
+        <img src="static/ia-logo.svg" style="height: 1em; margin-right: 0.2em;">
+        {# <i class="archive icon"></i> #}
+        {% if paper.fulltext.access_type == "wayback" %}
+          web.archive.org
+        {% elif paper.fulltext.access_type == "ia_sim" %}
+          IA Microfilm
+        {% elif paper.fulltext.access_type == "ia_file" %}
+          archive.org
+        {% else %}
+          other
+        {% endif %}
+      </button>
+    </a>
+  {% endif %}
+
+  <button class="ui fluid compact grey basic button serp_button">
+    <i class="quote left icon"></i>
+    Cite
+  </button>
+
   {# ### VERSIONS #}
   {% if (paper.access and paper.access|length > 1) or (paper.releases and paper.releases|length > 1) %}
-    <div class="ui basic label blue small simple dropdown item">
+    <div class="ui fluid left aligned compact basic blue button dropdown item serp_button">
       <i class="ui icon add"></i>
-      {% trans %}Multiple Versions{% endtrans %}
+      {% trans %}Versions{% endtrans %}
 
       <div class="menu" style="font-weight: normal;">
         <table class="ui celled table">
@@ -271,21 +338,17 @@
 
   {# ### COLLAPSED HITS  #}
   {% if paper._collapsed_count > 0 %}
-    <button class="ui basic label blue small button" form="search_form" type="submit" name="collapse_key" value="{{ paper.collapse_key }}">
+    <button class="ui fluid left aligned basic blue compact button serp_button" form="search_form" type="submit" name="collapse_key" value="{{ paper.collapse_key }}">
       <i class="ui icon zoom-in"></i>
       {% trans trimmed count=paper._collapsed_count %}
-        Show {{ count }} additional result from this issue
-      {% pluralize %}
-        Show {{ count }} additional results from this issue
+        Issue ({{ count }})
       {% endtrans %}
     </button>
   {% endif %}
-
-  </div>
-
 </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 %}
+
+<div class="one wide left aligned column" style="padding-top: 0.5em; padding-right: 0.5em;">
+  {% if paper.fulltext and paper.fulltext.access_url and paper.fulltext.thumbnail_url and 0 %}
     {% if paper.fulltext.file_mimetype == "application/pdf" %}
       {% set access_alt = _('fulltext PDF download') %}
     {% elif paper.fulltext.access_type == "ia_sim" %}
@@ -295,27 +358,9 @@
     {% endif %}
 
     <a target="_blank" rel="noopener" href="{{ paper.fulltext.access_url}}" title="{{ access_alt }}" {% if settings.ENABLE_GOATCOUNTER %}data-goatcounter-click="serp-fulltext"{% endif %}>
-      {% 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;">
-        {% if paper.fulltext.access_type == "wayback" %}
-          web.archive.org
-        {% elif paper.fulltext.access_type in ["ia_sim", "ia_file"] %}
-          archive.org
-        {% endif %}
-        {% if paper.fulltext.file_mimetype == "application/pdf" %}
-          <i class="file pdf outline icon" style="margin-right: 0;"></i>
-        {% elif paper.fulltext.access_type == "ia_sim" %}
-          <i class="film icon" style="margin-right: 0;"></i>
-        {% endif %}
-    </div>
+      <div class="ui serp card">
+        <img src="{{ paper.fulltext.thumbnail_url }}" alt="fulltext thumbnail">
+      </div>
     </a>
   {% else %}
     {# No Fulltext #}