From 01ae25c1bf24c8d9f7721f49122a15bf522bdbb4 Mon Sep 17 00:00:00 2001
From: Bryan Newbold <bnewbold@archive.org>
Date: Thu, 21 May 2020 14:23:31 -0700
Subject: search query improvements

- wire up most of the filters and sort order
- query sticks around in search box
- crude error message (needs work)
---
 fatcat_scholar/templates/base.html          | 13 +++++-
 fatcat_scholar/templates/search.html        | 70 +++++++++--------------------
 fatcat_scholar/templates/search_macros.html | 24 +++++++++-
 3 files changed, 55 insertions(+), 52 deletions(-)

(limited to 'fatcat_scholar/templates')

diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index fffdadd..a9eedd4 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -58,6 +58,15 @@
     .ui.card a:hover {
       opacity: 0.75;
     }
+
+    .text-button {
+      border: none;
+      background-color: inherit;
+      padding: 0;
+      font-family: inherit;
+      cursor: pointer;
+      display: inline-block;
+    }
   </style>
   <title>{%- block title -%}scholar.archive.org{%- endblock %}</title>
   <link rel="stylesheet"
@@ -116,11 +125,11 @@
         </div>
       </div>
       <div class="ui twelve wide column">
-        <form class="" id="fulltext_query" action="{{ lang_prefix }}/search") }}" method="get" role="search" aria-label="papers" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
+        <form class="" id="search_form" action="{{ lang_prefix }}/search") }}" method="get" role="search" aria-label="papers" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
           <meta itemprop="target" content="https://{{ settings.FATCAT_DOMAIN }}/fulltext/search?q={q}"/>
           <div class="ui form">
             <div class="ui action input large fluid">
-              <input type="text" placeholder="{{ _("by title, authors, identifiers...") }}" name="q" aria-label="search metadata" required itemprop="query-input" style="border-radius: 0; border: 1px #999 solid;">
+              <input type="search" placeholder="{{ _("by title, authors, identifiers...") }}" name="q" aria-label="search metadata" required itemprop="query-input" style="border-radius: 0; border: 1px #999 solid;" {% if query and query.q %}value="{{ query.q }}"{% endif %}>
               <button class="ui green button" style="border-radius: 0; background-color: #44a25a; font-size: 1.2rem;">{{ _("Search") }}</button>
             </div>
           </div>
diff --git a/fatcat_scholar/templates/search.html b/fatcat_scholar/templates/search.html
index c2cd3ea..6d9fec2 100644
--- a/fatcat_scholar/templates/search.html
+++ b/fatcat_scholar/templates/search.html
@@ -5,68 +5,40 @@
 <div class="ui equal height divided grid" style="margin-top: 1em;">
   <div class="ui two wide column">
 
-    {% if found %}
-    <div class="ui tiny statistic" style="width: 100%; text-align: center;">
-      <div class="value">
-        {{ "{:,}".format(found.count_found) }}
-      </div>
-      <div class="label">
-        Hits
-      </div>
+    {% if hits %}
+    <div style="width: 100%; text-align: right;">
+      {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #}
+      <h3 style="font-size: {% if hits.count_found >= 10000000 %}1.0em{% elif hits.count_found >= 1000 %}1.5em{% else %}2.0em{% endif %};">{{ "{:,}".format(hits.count_found) }}</h3>
+      Hits
+    </div>
+    <div style="text-align: right;">
+      <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span>
     </div>
     <div class="ui clearing divider"></div>
-    {% else %}
-      Maybe some filters, facets, counts over here?
     {% endif %}
 
     <div style="text-align: right;">
-      <span style="color: rgba(0,0,0,0.4);">Release Date</span>
-      <div class="ui link list" style="margin-top: 0.3em;">
-        <a class="active item"><b>All Time</b></a>
-        <a class="item" style="color: rgba(0,0,0);">Past Week</a>
-        <a class="item" style="color: rgba(0,0,0);">Past Year</a>
-        <a class="item" style="color: rgba(0,0,0);">Since 2000</a>
-        <a class="item" style="color: rgba(0,0,0);">Before 1925</a>
-      </div>
-
-      <br>
-      <span style="color: rgba(0,0,0,0.4);">Resource Type</span>
-      <div class="ui link list" style="margin-top: 0.3em;">
-        <a class="active item"><b>Papers</b></a>
-        <a class="item" style="color: rgba(0,0,0);">Reports</a>
-        <a class="item" style="color: rgba(0,0,0);">Datasets</a>
-        <a class="item" style="color: rgba(0,0,0);">Everything</a>
-      </div>
-
-      <br>
-      <span style="color: rgba(0,0,0,0.4);">Availability</span>
-      <div class="ui link list" style="margin-top: 0.3em;">
-        <a class="active item"><b>Everything</b></a>
-        <a class="item" style="color: rgba(0,0,0);">Open Access</a>
-        <a class="item" style="color: rgba(0,0,0);">Lending</a>
-        <a class="item" style="color: rgba(0,0,0);">Paywall</a>
-      </div>
-
-      <br>
-      <span style="color: rgba(0,0,0,0.4);">Sort Order</span>
-      <div class="ui link list" style="margin-top: 0.3em;">
-        <a class="active item"><b>Relevancy</b></a>
-        <a class="item" style="color: rgba(0,0,0);">Recent First</a>
-        <a class="item" style="color: rgba(0,0,0);">Oldest First</a>
-      </div>
+      {{ search_macros.query_option(query.time_options, query.filter_time) }}
+      {{ search_macros.query_option(query.type_options, query.filter_type) }}
+      {{ search_macros.query_option(query.availability_options, query.filter_availability) }}
+      {{ search_macros.query_option(query.sort_options, query.sort_order) }}
     </div>
     
   </div>
   <div class="ui thirteen wide column">
-    {% if found %}
-      {% if found.results %}
-        {% for paper in found.results %}
+    {% if search_error %}
+      <div class="ui error message">
+        <div class="header">Query Error</div>
+        <p>{{ search_error }}</p>
+      </div>
+    {% elif hits %}
+      {% if hits.results %}
+        {% for paper in hits.results %}
           {{ search_macros.fulltext_search_result_row(paper) }}
         {% endfor %}
       {% endif %}
     {% else %}
-    Some other message here when there is no search? Like a bunch of examples?
-    Or does that ever happen... we can just run query on "*".
+    No search submitted? Some message should go here.
     {% endif %}
   </div>
 </div>
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index f5c4d85..bb96b61 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -1,6 +1,5 @@
 
 {% macro fulltext_search_result_row(paper) -%}
-{% set lang_code = "en" %}
 <div class="ui grid">
 <div class="thirteen wide column">
   {# ### TITLE ROW #}
@@ -175,3 +174,26 @@
 </div>
 </div>
 {% endmacro %}
+
+{% macro query_option(options, selected) -%}
+<span style="color: rgba(0,0,0,0.4);">{{ options.label }}</span>
+<div class="ui link list" style="margin-top: 0.3em;">
+  {% if selected %}
+    <input form="search_form" type="hidden" name="{{ options.slug }}" value="{{ selected }}">
+  {% endif %}
+  {% for opt in options.list %}
+    <button class="text-button" form="search_form" type="submit" name="{{ options.slug }}" value="{{ opt.slug }}">
+      {% if selected == opt.slug or (not selected and opt.slug == options.default) %}
+        <span style="font-weight: bold;">
+      {% else %}
+        <span>
+      {% endif %}
+      {{ opt.label }}
+      </span>
+    </button>
+    <br>
+    </span>
+  {% endfor %}
+</div>
+<br>
+{% endmacro %}
-- 
cgit v1.2.3