html: several UI fixes and tweaks

- title and highlight box misalignment
- circle buttons ("action bar") alignment to left on mobile
- vertical alignment of action bar and access buttons on mobile
- smaller whitespace when no highlight/abstract

4 files changed, 37 insertions, 24 deletions

diff --git a/fatcat_scholar/static/scholar.css b/fatcat_scholar/static/scholar.css
index d7a9818..7c78505 100644
--- a/fatcat_scholar/static/scholar.css
+++ b/fatcat_scholar/static/scholar.css
@@ -70,8 +70,15 @@ nav.ui.menu {
 }
 
 @media only screen and (max-width: 767px) {
-  .mobile-hide { display: none !important; }
-  .ui.items>.item>.image:not(.ui) { width: auto };
+  .action-bar {
+    justify-content: left;
+  }
+  .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; }
@@ -163,7 +170,6 @@ nav.ui.menu {
   font-weight: bold;
 }
 .search-highlights {
-  padding-top: 0.5em;
   padding-bottom: 0.5em
 }
 
@@ -171,10 +177,10 @@ nav.ui.menu {
   margin-top: 0.2em;
 }
 
-.search_filters summary::marker {
+.search-filters summary::marker {
   display: none;
 }
-.search_filters summary::-webkit-details-marker {
+.search-filters summary::-webkit-details-marker {
   display: none;
 }
 
@@ -203,16 +209,17 @@ a:hover .ui.card {
   display: inline-block;
 }
 
-details.access-options summary {
+details.title-dropdown summary {
   text-decoration: none;
   color: inherit;
+  margin-left: 0;
+  margin-bottom: 0.3em;
 }
-details.access-options .menu {
-  margin: 0.5em;
-  margin-top: 1.5em;
+details.title-dropdown .dropdown-menu {
+  margin-top: 1.0em;
   width: auto;
 }
-details.access-options .meta {
+details.title-dropdown .meta {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
@@ -225,6 +232,14 @@ details.access-options .meta {
   padding-right: 0.5em;
   min-width: 10em;
 }
+@media only screen and (max-width: 767px) {
+  .ui.stackable.grid > .column.biblio-record {
+    padding-bottom: 0.5em!important;
+  }
+  .ui.stackable.grid > .column.serp-right-col {
+    padding-top: 0!important;
+  }
+}
 
 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;
@@ -278,6 +293,7 @@ details.serp-action-menu > .citation-menu {
 
 .external-identifiers > a {
   color: green;
+  margin-right: 0.25em;
 }
 
 .translate-icon {
diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index 85ddd25..af73d10 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 }}/help#bugs"><i>alpha</i></a>
+      <a class="ui grey label" href="{{ lang_prefix }}/help#bugs"><i>alpha</i></a>
     </span>
 
     <div class="right menu">
diff --git a/fatcat_scholar/templates/search.html b/fatcat_scholar/templates/search.html
index a4a5ba4..2f2149e 100644
--- a/fatcat_scholar/templates/search.html
+++ b/fatcat_scholar/templates/search.html
@@ -31,7 +31,7 @@
 
 <div class="tablet-only" style="margin-top: 1.0em;">
 
-  <details class="search_filters">
+  <details class="search-filters">
     <summary style="float: right;"><i class="filter icon"></i>{{ _("Filters") }}</summary>
     <div style="display: flex; align-items: flex-start; column-gap: 2em; row-gap: 2em; flex-wrap: wrap; padding-bottom:1.5em;">
       {{ search_macros.query_option(query.time_options, query.filter_time) }}
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index 0f43142..0e6b3f0 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -31,25 +31,25 @@
 {# NOTE: should be able to call with paper.biblio or any paper.release[] #}
 <span class="external-identifiers">
   {% if biblio.doi %}
-    <a target="_blank" rel="external noopener noreferrer" href="https://doi.org/{{ biblio.doi }}">doi:{{ biblio.doi }}</a> &nbsp;
+    <a target="_blank" rel="external noopener noreferrer" href="https://doi.org/{{ biblio.doi }}">doi:{{ biblio.doi }}</a>
   {% endif %}
   {% if biblio.pmid %}
-    <a target="_blank" rel="external noopener" href="https://www.ncbi.nlm.nih.gov/pubmed/{{ biblio.pmid }}">pmid:{{ biblio.pmid }}</a> &nbsp;
+    <a target="_blank" rel="external noopener" href="https://www.ncbi.nlm.nih.gov/pubmed/{{ biblio.pmid }}">pmid:{{ biblio.pmid }}</a>
   {% endif %}
   {% if biblio.pmcid %}
-    <a target="_blank" rel="external noopener" href="https://pubmed.ncbi.nlm.nih.gov/{{ biblio.pmcid }}/">pmcid:{{ biblio.pmcid }}</a> &nbsp;
+    <a target="_blank" rel="external noopener" href="https://pubmed.ncbi.nlm.nih.gov/{{ biblio.pmcid }}/">pmcid:{{ biblio.pmcid }}</a>
   {% endif %}
   {% if biblio.arxiv_id %}
-    <a target="_blank" rel="external noopener" href="https://arxiv.org/abs/{{ biblio.arxiv_id }}">arXiv:{{ biblio.arxiv_id }}</a> &nbsp;
+    <a target="_blank" rel="external noopener" href="https://arxiv.org/abs/{{ biblio.arxiv_id }}">arXiv:{{ biblio.arxiv_id }}</a>
   {% endif %}
   {% if biblio.dblp_id %}
-    <a target="_blank" rel="external noopener" href="https://dblp.org/rec/{{ biblio.dblp_id }}.html">dblp:{{ biblio.dblp_id }}</a> &nbsp;
+    <a target="_blank" rel="external noopener" href="https://dblp.org/rec/{{ biblio.dblp_id }}.html">dblp:{{ biblio.dblp_id }}</a>
   {% endif %}
   {% if biblio.doaj_id %}
-    <a target="_blank" rel="external noopener" href="https://doaj.org/article/{{ biblio.doaj_id }}">doaj:{{ biblio.doaj_id }}</a> &nbsp;
+    <a target="_blank" rel="external noopener" href="https://doaj.org/article/{{ biblio.doaj_id }}">doaj:{{ biblio.doaj_id }}</a>
   {% endif %}
   {% if biblio.release_ident or biblio.ident %}
-    <a target="_blank" rel="external noopener" href="https://fatcat.wiki/release/{{ biblio.release_ident or biblio.ident }}">fatcat:{{ biblio.release_ident or biblio.ident }}</a> &nbsp;
+    <a target="_blank" rel="external noopener" href="https://fatcat.wiki/release/{{ biblio.release_ident or biblio.ident }}">fatcat:{{ biblio.release_ident or biblio.ident }}</a>
   {% endif %}
 </span>
 {% endmacro %}
@@ -173,7 +173,7 @@
 <div class="ui stackable doubling grid">
 <div class="thirteen wide column biblio-record">
 
-<details class="access-options" {% if expand %}open{% endif %}>
+<details class="title-dropdown" {% if expand %}open{% endif %}>
 <summary>
   {# ### TITLE ROW #}
   <h3 class="biblio-title">
@@ -230,7 +230,7 @@
   {{ journal_row(paper.biblio, paper) }}
 
 </summary>
-<div class="menu">
+<div class="dropdown-menu">
   {# ### FULLTEXT ACCESS OPTIONS #}
   <h4 class="ui horizontal divider header">
     {% trans %}Preserved Fulltext{% endtrans %}
@@ -302,7 +302,6 @@
               <div class="ui fitted divider"></div>
               {% for release in paper.releases if release.ident == paper.fulltext.release_ident %}
                 {{ journal_row(release, paper) }}
-                <br>
                 {{ external_identifiers(release) }}
               {% endfor %}
               <div class="ui fitted divider"></div>
@@ -379,8 +378,6 @@
         {{ paper.abstracts[0].body }}
       {% endif %}
     </div>
-  {% else %}
-    <br>
   {% endif %}
 
   {# ### IDENTIFIERS #}