html: more UI tweaks and fixes

4 files changed, 174 insertions, 149 deletions

diff --git a/fatcat_scholar/static/scholar.css b/fatcat_scholar/static/scholar.css
index e0cc2a3..2d506d5 100644
--- a/fatcat_scholar/static/scholar.css
+++ b/fatcat_scholar/static/scholar.css
@@ -1,233 +1,258 @@
 a {
-    /* accessibility/contrast */
-    color: #28629c;
+  /* accessibility/contrast */
+  color: #28629c;
 }
 .ui.basic.blue.label {
-    color: #28629c!important;
-    border-color: #28629c!important;
+  color: #28629c!important;
+  border-color: #28629c!important;
 }
 .ui.basic.orange.label {
-    color: #c54e00!important;
-    border-color: #c54e00!important;
+  color: #c54e00!important;
+  border-color: #c54e00!important;
 }
 .ui.card .meta, .ui.cards>.card .meta {
-    color: rgba(0,0,0,0.55);
+  color: rgba(0,0,0,0.55);
 }
 
 /* bnewbold: fix light grey bars in header, and "rounded" header */
-nav.ui.inverted.menu .item:before { background: none; }
-nav.ui.menu { border-radius: 0; }
+nav.ui.inverted.menu .item:before {
+  background: none;
+}
+nav.ui.menu {
+  border-radius: 0;
+}
 
 .ui.button.serp-button {
-    border-radius: 0;
-    margin-bottom: 0.4em;
-    text-align: left;
+  box-sizing: border-box;
+  border-radius: 0;
+  margin-bottom: 0.4em;
+  text-align: left;
+  width: 14em;
 }
 
 .ui.blue.button.serp-button {
-    background-color: #6b6ebb;
+  background-color: #6b6ebb;
+}
+
+.ui.basic.blue.button.serp-button > .icon {
+  background-color: transparent;
 }
 
 .ui.labeled.icon.button.serp-button {
-    padding-left: 3.0em!important;
-    padding-right: 1em!important;
-    width: 14em;
-    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
+  padding-left: 3.0em!important;
+  padding-right: 0.5em!important;
+  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
 }
 
 .ui.labeled.icon.button.serp-button .menu.fulltext-thumbnail {
-    left: calc(-100% + 0.3em);
-    margin-top: -2.4em;
-    background-color: black;
-    min-width: 186px;
-    border: 3px solid black;
-    border-bottom: 0;
-    box-shadow: none;
+  left: calc(-100% + 0.3em);
+  margin-top: -2.4em;
+  background-color: black;
+  min-width: 186px;
+  border: 3px solid black;
+  border-bottom: 0;
+  box-shadow: none;
 }
 
 .ui.labeled.icon.button.serp-button .menu.fulltext-thumbnail:after {
-    z-index: -1;
-    background-color: black;
+  z-index: -1;
+  background-color: black;
 }
 
 .action-bar {
-    display: flex;
-    justify-content: center;
-    column-gap: 0.3em;
-    min-width: 14em;
-    max-width: 15em;
+  display: flex;
+  justify-content: center;
+  column-gap: 0.3em;
+  min-width: 14em;
+  max-width: 15em;
 }
 
 @media only screen and (max-width: 767px) {
-    .mobile-hide { display: none !important; }
-    .ui.items>.item>.image:not(.ui) { width: auto };
+  .mobile-hide { display: none !important; }
+  .ui.items>.item>.image:not(.ui) { width: auto };
 }
 @media only screen and (min-width: 768px) {
-    .mobile-only { display: none !important; }
+  .mobile-only { display: none !important; }
 }
 @media only screen and (max-width: 991px) {
-    .tablet-hide { display: none !important; }
-    .ui.items>.item>.image:not(.ui) { width: auto };
-    .ui.grid>[class*="fourteen wide"].column.serp-column {
+  .tablet-hide {
+    display: none !important;
+  }
+  .ui.items>.item>.image:not(.ui) {
+    width: auto;
+  }
+  .ui.grid>[class*="fourteen wide"].column.serp-column {
     width: 100% !important;
     box-shadow: none !important;
-    }
+  }
 }
 @media only screen and (min-width: 992px) {
-    .tablet-only { display: none !important; }
+  .tablet-only {
+    display: none !important;
+  }
 }
 @media only screen and (min-width: 1200px) {
-    .ui.container {
+  .ui.container {
     font-size: 16px;
     line-height: 20px;
-    }
-    div.fulltext-link {
+  }
+  div.fulltext-link {
     width: 180px;
-    }
-    div.biblio-record {
+  }
+  div.biblio-record {
     padding-left: 1.1em;
-    }
+  }
 }
 
 .ui.serp.card {
-    max-width: 180px;
-    margin-bottom: 0.2em;
-    border-radius: 0;
+  max-width: 180px;
+  margin-bottom: 0.2em;
+  border-radius: 0;
 }
 .hit-count {
-    font-weight: bold;
-    line-height: 1.28571429em;
+  font-weight: bold;
+  line-height: 1.28571429em;
 }
 
 .biblio-record .biblio-title {
-    margin-bottom: 0.1em;
-    font-size: 1.2em;
-    font-weight: bold;
-    line-height: 1.2em;
+  margin-bottom: 0.1em;
+  font-size: 1.2em;
+  font-weight: bold;
+  line-height: 1.2em;
+}
+.biblio-record .biblio-title .link {
+  cursor: pointer;
+  color: #2224c7;
 }
 .biblio-record .biblio-title a {
-    color: #2224c7;
+  color: #2224c7;
 }
 .biblio-record .release-type {
-    text-transform: uppercase;
-    font-weight: bold;
+  text-transform: uppercase;
+  font-weight: bold;
 }
 .biblio-record .original-title {
-    font-style: italic;
-    font-weight: normal;
+  font-style: italic;
+  font-weight: normal;
 }
 .biblio-record .author-row {
-    margin-top: 0;
-    margin-bottom: 0.2em;
-    font-size: 1.1em;
+  margin-top: 0;
+  margin-bottom: 0.2em;
+  font-size: 1.1em;
 }
 .biblio-record .release-stage {
-    color: brown;
-    font-weight: bold;
-    text-transform: uppercase;
+  color: brown;
+  font-weight: bold;
+  text-transform: uppercase;
 }
 .biblio-record details > summary {
-    list-style-type: none;
-    color: #28629c;
-    text-decoration: underline;
-    margin-left: 0.3em;
+  list-style-type: none;
+  color: #28629c;
+  text-decoration: underline;
+  margin-left: 0.3em;
 }
 .biblio-record details > summary::-webkit-details-marker {
-    display: none;
+  display: none;
 }
 
 /* for fulltext search result highlighting */
 .search_highlights em {
-    {# yellow #}
-    {# background-color: #FFFFBB; #}
-    font-style: normal;
-    font-weight: bold;
+  font-style: normal;
+  font-weight: bold;
 }
 
 .search_filters summary::marker {
-    display: none;
+  display: none;
 }
 .search_filters summary::-webkit-details-marker {
-    display: none;
+  display: none;
 }
 
 footer p a {
-    color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.5);
 }
 footer p a:hover {
-    color: rgba(255, 255, 255, 1.0);
-    opacity: 1.0;
+  color: rgba(255, 255, 255, 1.0);
+  opacity: 1.0;
 }
 
 .ui.label.small {
-    border-radius: 0;
+  border-radius: 0;
 }
 
 a:hover .ui.card {
-    opacity: 0.75;
+  opacity: 0.75;
 }
 
 .text-button {
-    border: none;
-    background-color: inherit;
-    padding: 0;
-    font-family: inherit;
-    cursor: pointer;
-    display: inline-block;
+  border: none;
+  background-color: inherit;
+  padding: 0;
+  font-family: inherit;
+  cursor: pointer;
+  display: inline-block;
 }
 
 details.access-options summary {
-    text-decoration: none;
-    color: inherit;
+  text-decoration: none;
+  color: inherit;
 }
 details.access-options .menu {
-    margin: 0.5em;
-    margin-top: 1.5em;
-    width: auto;
+  margin: 0.5em;
+  margin-top: 1.5em;
+  width: auto;
 }
 details.access-options .meta {
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-decoration: underline;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: underline;
 }
 
 details.serp-action-menu[open] > summary .ui.basic.button {
-    box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset, 0 1px 4px 0 rgba(34,36,38,.15) inset;
-    background: #f8f8f8!important;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset, 0 1px 4px 0 rgba(34,36,38,.15) inset;
+  background: #f8f8f8!important;
 }
 details.serp-action-menu > summary {
-    list-style: none;
+  list-style: none;
 }
 details.serp-action-menu > summary::-webkit-details-marker {
-    display: none;
+  display: none;
 }
 details.serp-action-menu > .citation-menu {
-    min-width: 50em;
-    height: auto;
-    position: absolute;
-    display: block;
-    background: #fff;
-    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
-    border: 1px solid rgba(34,36,38,.15);
-    z-index: 11;
-    min-width: 30em;
-    border-radius: .28571429rem;
-    right: 50%;
-    margin-top: -2em;
-    margin-right: 1.5em;
-    padding: 1em;
+  min-width: 50em;
+  height: auto;
+  position: absolute;
+  display: block;
+  background: #fff;
+  box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
+  border: 1px solid rgba(34,36,38,.15);
+  z-index: 11;
+  min-width: 30em;
+  border-radius: .28571429rem;
+  right: 50%;
+  margin-top: -2em;
+  margin-right: 1.5em;
+  padding: 1em;
 }
 @media only screen and (max-width: 767px) {
-    details.serp-action-menu > .citation-menu {
-        overflow-x: scroll;
-        width: calc(100vw - 3em);
-        height: auto;
-        min-width: 0;
-        left: 0.5em;
-        margin-top: 0em;
-    }
+  details.serp-action-menu > .citation-menu {
+    overflow-x: scroll;
+    width: calc(100vw - 3em);
+    height: auto;
+    min-width: 0;
+    left: 0.5em;
+    margin-top: 0em;
+  }
+}
+
+.citation-menu ul.ui.list {
+  width: 100%;
+  text-align: center;
+}
+.citation-menu ul.ui.list li.item:before {
+  visibility: hidden;
 }
 
 .translate-dropdown {
diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index 19d28a4..85ddd25 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -52,7 +52,7 @@
       <img class="mobile-hide" src="/static/ia-wordmark.svg" style="margin-left: 10px; width: 180px;" alt="Internet Archive">
     </a>
     <span style="margin-top: 0.5em;">
-      <a class="ui grey label" style="background-color: #fbbd08a6;" href="{{ lang_prefix }}/#alphanotice"><i>alpha</i></a>
+      <a class="ui grey label" style="background-color: #fbbd08a6;" href="{{ lang_prefix }}/help#bugs"><i>alpha</i></a>
     </span>
 
     <div class="right menu">
diff --git a/fatcat_scholar/templates/home.html b/fatcat_scholar/templates/home.html
index 3840841..9d7b59b 100644
--- a/fatcat_scholar/templates/home.html
+++ b/fatcat_scholar/templates/home.html
@@ -21,7 +21,7 @@
         <br>
         <br>
         <b>{% trans %}Search Millions of Research Papers{% endtrans %}</b>
-        <p style="margin-top: 0.5em;">{% trans %}This fulltext search index includes over 25 million research articles and other scholarly documents preserved in the Internet Archive.{% endtrans %} {% trans %}The collection spans from digitized copies of eighteenth century journals though the latest Open Access conference proceedings and pre-prints crawled from the World Wide Web.{% endtrans %}
+        <p style="margin-top: 0.5em;">{% trans %}This fulltext search index includes over 25 million research articles and other scholarly documents preserved in the Internet Archive.{% endtrans %} {% trans %}The collection spans from digitized copies of eighteenth century journals though the latest Open Access conference proceedings and pre-prints crawled from the World Wide Web.{% endtrans %} <a href="http://localhost:9819/about">{% trans %}More &raquo;{% endtrans %}</a>
       </div>
     </div>
   </div>
@@ -32,9 +32,10 @@
   <div class="ui container" style="">
     <div class="ui centered grid">
       <div class="ui sixteen wide mobile twelve wide computer column" style="text-align: center; font-weight: bold;">
-        <a name="alphanotice"></a>
-        {% trans %}This service is in "alpha". It has several bugs, experiences
-        downtime, and has not been officially announced.{% endtrans %}
+        <a name="alphanotice" href="{{ lang_prefix }}/help#bugs" style="color: black;">
+          {% trans %}This service is in "alpha". It has several bugs, experiences
+          downtime, and has not been officially announced.{% endtrans %}
+        </a>
       </div>
     </div>
   </div>
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index a9ac528..75960af 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -64,7 +64,7 @@
     {% set access_alt = access_alt + " [" + other_version + "]" %}
   {% endif %}
   <a target="_blank" rel="noopener" href="{{ access.access_url}}" title="{{ access_alt }}" {% if settings.ENABLE_GOATCOUNTER %}data-goatcounter-click="serp-fulltext-button"{% endif %}>
-    <button class="ui simple right pointing dropdown fluid compact black labeled icon button serp-button">
+    <button class="ui simple right pointing dropdown compact black labeled icon button serp-button">
       <i class="icon" style="background: no-repeat center / 50% url('/static/ia-favicon.ico');"></i>
       {% if access.access_type == "wayback" %}
         {% trans %}Web Archive{% endtrans %}
@@ -102,7 +102,7 @@
     {% set publisher = "" or (biblio.publisher and biblio.publisher.lower()) %}
     {% set container_name = "" or (biblio.container_name and biblio.container_name.lower()) %}
     <a target="_blank" rel="external noopener noreferrer" href="https://doi.org/{{ biblio.doi }}" style="color: green;">
-      <button class="ui fluid left aligned compact blue labeled icon button serp-button">
+      <button class="ui left aligned compact blue labeled icon button serp-button">
         {% if is_oa %}
           <i class="unlock alternate icon" style="background-color: #fb971f;"></i>
         {% else %}
@@ -137,17 +137,17 @@
 {% endmacro %}
 
 {% macro platform_access_button(biblio) %}
-  {# TODO: DOAJ, dblp #}
+  {# TODO: DOAJ #}
   {% if biblio.arxiv_id %}
     <a target="_blank" rel="noopener" href="https://arxiv.org/abs/{{ biblio.arxiv_id }}" title="arxiv.org access">
-      <button class="ui fluid compact blue labeled icon button serp-button">
+      <button class="ui compact blue labeled icon button serp-button">
         <i class="file alternate outline icon"></i>
         arxiv.org
       </button>
     </a>
   {% elif biblio.pmcid %}
     <a target="_blank" rel="noopener" href="https://www.ncbi.nlm.nih.gov/pmc/articles/{{ biblio.pmcid }}" title="pubmed link">
-      <button class="ui fluid compact blue labeled icon button serp-button">
+      <button class="ui compact blue labeled icon button serp-button">
         <i class="file alternate outline icon"></i>
         pubmed.gov
       </button>
@@ -196,7 +196,7 @@
   <h3 class="biblio-title">
 
     {% if paper.doc_type == "work" %}
-      <span style="color: #2224c7; cursor: pointer;">
+      <span class="link">
         {% if paper.biblio.title %}
           {{ paper.biblio.title[:512] }}
           {% if paper.biblio.title|length > 512 %}...{% endif %}
@@ -226,9 +226,9 @@
       {% endif %}
 
     {% elif paper.doc_type == "sim_page" %}
-      <a target="_blank" rel="noopener" href="https://archive.org/details/{{ paper.ia_sim.issue_item }}/page/{{ paper.ia_sim.first_page }}" title="{{ _('access microfilm on archive.org') }}" {% if settings.ENABLE_GOATCOUNTER %}data-goatcounter-click="serp-title-sim-page"{% endif %}>
+      <span class="link">
         {% trans page_num = paper.ia_sim.first_page, journal_name = paper.biblio.container_name, volume = paper.biblio.volume, issue = paper.biblio.issue %}Page {{ page_num }} of {{ journal_name }} Vol. {{ volume }}, Issue {{ issue }}{% endtrans %}
-      </a>
+      </span>
       <span class="release-type">[{{ _("page") }}]</span>
     {% endif %}
 
@@ -456,7 +456,7 @@
 
   {# ### COLLAPSED HITS  #}
   {% if paper._collapsed_count > 0 %}
-    <button class="ui fluid left aligned basic blue compact button serp-button" form="search_form" type="submit" name="collapse_key" value="{{ paper.collapse_key }}">
+    <button class="ui basic compact blue labeled icon 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 %}
         Same Issue ({{ count }})
@@ -474,18 +474,17 @@
         </div>
       </summary>
       <div class="citation-menu menu">
-        <table class="ui very basic table">
-          <tbody>
-            <tr>
-              <td>Generic</td>
-              <td>{{ paper._obj.biblio.citation_str("default") }}</td>
-            </tr>
-            <tr>
-              <td>BibTeX</td>
-              <td><pre>{{ paper._obj.biblio.citation_str("bibtex") }}</pre></td>
-            </tr>
-          </tbody>
-        </table>
+        <b>{% trans %}Citation{% endtrans %}</b>
+        <p>{{ paper._obj.biblio.citation_str("default") }}
+        {% if paper.doc_type == "work" %}
+          <div class="ui divider"></div>
+          <ul class="ui horizontal list">
+            <li class="item"><a href="https://fatcat.wiki/release/{{ paper.biblio.release_ident }}/citeproc?style=modern-language-association" target="_blank" rel="noopener">MLA</a></li>
+            <li class="item"><a href="https://fatcat.wiki/release/{{ paper.biblio.release_ident }}/citeproc?style=elsevier-harvard" target="_blank" rel="noopener">Harvard</a></li>
+            <li class="item"><a href="https://fatcat.wiki/release/{{ paper.biblio.release_ident }}/citeproc?style=csl-json" target="_blank" rel="noopener">CSL-JSON</a></li>
+            <li class="item"><a href="https://fatcat.wiki/release/{{ paper.biblio.release_ident }}.bib" target="_blank" rel="noopener">BibTeX</a></li>
+          </ul>
+        {% endif %}
       </div>
     </details>