html: replace citation modal with a click-behavior window

2 files changed, 61 insertions, 28 deletions

diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index 3d19004..ab11f50 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -247,6 +247,42 @@
       overflow: auto;
     }
 
+    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;
+    }
+    details.serp-action-menu > summary {
+      list-style: none;
+    }
+    details.serp-action-menu > summary::-webkit-details-marker {
+      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;
+    }
+    @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;
+        }
+    }
   </style>
   <link rel="icon" 
     type="image/x-icon" 
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index 07a6e44..1312aed 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -206,7 +206,7 @@
       {% 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 simple dropdown fluid compact black labeled icon button serp-button">
+      <button class="ui simple right pointing dropdown fluid compact black labeled icon button serp-button">
         <i class="icon" style="background: no-repeat center / 50% url('/static/ia-favicon.ico');"></i>
         {% if paper.fulltext.access_type in ["wayback", "ia_file"] %}
           {% if paper.fulltext.file_mimetype == "application/pdf" or not paper.fulltext.file_mimetype %}
@@ -307,42 +307,39 @@
 
   {# ### OTHER ACTIONS #}
   <div class="action-bar">
-    <a onclick="document.getElementById('cite-modal-{{ paper.key }}').showModal()">
-      <button class="circular ui icon compact basic button">
-        <i class="quote left icon"></i>
-      </button>
-    </a>
+
+    <details class="serp-action-menu">
+      <summary>
+        <div class="circular ui icon compact basic button">
+          <i class="quote left icon"></i>
+        </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>
+      </div>
+    </details>
+
     <a href="https://fatcat.wiki/release/{{ paper.biblio.release_ident }}" target="_blank" rel="noopener" title="{{ _('access fatcat landing page') }}">
       <button class="circular ui icon compact basic button">
         <i class="edit icon"></i>
       </button>
     </a>
+
   </div>
 
 </div>
 
-{# ### CITATION MODAL #}
-{% if paper.doc_type == "work" %}
-<dialog id="cite-modal-{{ paper.key }}">
-  <button class="circular ui right floated compact basic icon button" onclick="this.parentElement.close()">
-    <i class="close icon"></i>
-  </button>
-  <h2>{% trans %}Cite Work{% endtrans %}</h2>
-  <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>
-</dialog>
-{% endif %}
-
 {# ### VERSIONS MODAL #}
 <dialog id="access-modal-{{ paper.key }}">
   <button class="circular ui right floated compact basic icon button" onclick="this.parentElement.close()">