UI mobile/tablet scaling; search error improvements

5 files changed, 42 insertions, 12 deletions

diff --git a/fatcat_scholar/search.py b/fatcat_scholar/search.py
index f8dd7fb..080266a 100644
--- a/fatcat_scholar/search.py
+++ b/fatcat_scholar/search.py
@@ -162,7 +162,10 @@ def do_fulltext_search(query: FulltextQuery, deep_page_limit: int = 2000) -> Ful
     except elasticsearch.exceptions.RequestError as e:
         # this is a "user" error
         print("elasticsearch 400: " + str(e.info), file=sys.stderr)
-        raise ValueError(str(e.info))
+        if e.info.get('error', {}).get('root_cause', {}):
+            raise ValueError(str(e.info['error']['root_cause'][0].get('reason')))
+        else:
+            raise ValueError(str(e.info))
     except elasticsearch.exceptions.TransportError as e:
         # all other errors
         print("elasticsearch non-200 status code: {}".format(e.info), file=sys.stderr)
diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index 78d4f29..9c7aba8 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -30,15 +30,29 @@
   */
   </script>
   <style>
+
+
     {# bnewbold: fix light grey bars in header #}
     .ui.inverted.menu .item:before { background: none; }
 
-    @media only screen and (max-width: 479px) {
+    @media only screen and (max-width: 767px) {
       .mobile-hide { display: none !important; }
     }
-    @media only screen and (min-width: 480px) {
+    @media only screen and (min-width: 768px) {
       .mobile-only { display: none !important; }
     }
+    @media only screen and (max-width: 991px) {
+      .tablet-hide { display: none !important; }
+    }
+    @media only screen and (min-width: 992px) {
+      .tablet-only { display: none !important; }
+    }
+    @media only screen and (min-width: 1200px) {
+      .ui.container {
+        font-size: 16px;
+        line-height: 20px;
+      }
+    }
 
     {# for fulltext search result highlighting #}
     .search_highlights em {
diff --git a/fatcat_scholar/templates/home.html b/fatcat_scholar/templates/home.html
index 66e216f..c6d9119 100644
--- a/fatcat_scholar/templates/home.html
+++ b/fatcat_scholar/templates/home.html
@@ -59,7 +59,7 @@
         </div>
       </div>
 
-      <div class="ui card mobile-hide">
+      <div class="ui card tablet-hide">
         <a class="image" href="https://web.archive.org/web/2017/http://journals.plos.org/plosone/article/file?id=10.1371/journal.pone.0032486&type=printable">
           <img src="https://covid19.fatcat.wiki/fulltext_web//thumbnail/6e/6ea1978890ab099e90e61ddf078b6d983e60b07f.png">
         </a>
diff --git a/fatcat_scholar/templates/search.html b/fatcat_scholar/templates/search.html
index 10eda61..8d9fb7d 100644
--- a/fatcat_scholar/templates/search.html
+++ b/fatcat_scholar/templates/search.html
@@ -2,7 +2,7 @@
 {% extends "base.html" %}
 
 {% block fullmain %}
-<div class="mobile-only" style="margin-top: 1.0em;">
+<div class="tablet-only" style="margin-top: 1.0em;">
 
   <details class="search_filters">
     <summary style="float: right;"><i class="filter icon"></i>Filters</summary>
@@ -19,12 +19,14 @@
     <span style="font-size: 1.5em;">{{ "{:,}".format(hits.count_found) }}</span>
     Hits
     <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span>
+  {% else %}
+    &nbsp;
   {% endif %}
 </div>
 
 <div class="ui equal height stackable divided grid" style="margin-top: 1em;">
 
-  <div class="ui mobile-hide two wide column">
+  <div class="ui tablet-hide two wide column">
     {% if hits %}
       <div style="width: 100%; text-align: right;">
         {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #}
@@ -48,9 +50,20 @@
 
   <div class="ui fourteen wide column">
     {% if search_error %}
-      <div class="ui error message">
-        <div class="header">Query Error</div>
-        <p>{{ search_error }}</p>
+      <div class="ui icon error message">
+        <i class="ban icon"></i>
+        <div class="content">
+          <div class="header">
+            {% if search_error.type == "backend" %}
+              Backend Search Engine Error
+            {% elif search_error.type == "query" %}
+              Query Error
+            {% endif %}
+          </div>
+          <p>Computer said: <code>{{ search_error.message }}</code>
+          <p>Query parsing is currently very naive. Sometimes you can fix this
+          problem by adding quotes around terms or entire phrases.
+        </div>
       </div>
     {% elif hits and hits.results %}
       {% if hits.results %}
diff --git a/fatcat_scholar/web.py b/fatcat_scholar/web.py
index 06d6a02..e2fde9b 100644
--- a/fatcat_scholar/web.py
+++ b/fatcat_scholar/web.py
@@ -132,16 +132,16 @@ async def web_search(request: Request, query: FulltextQuery = Depends(FulltextQu
     if content.mimetype == "application/json":
         return await search(query)
     hits : Optional[FulltextHits] = None
-    search_error: Optional[str] = None
+    search_error: Optional[dict] = None
     status_code: int = 200
     if query.q is not None:
         try:
             hits = do_fulltext_search(query)
         except ValueError as e:
-            search_error = str(e)
+            search_error = dict(type="query", message=str(e))
             status_code = 400
         except IOError as e:
-            search_error = str(e)
+            search_error = dict(type="backend", message=str(e))
             status_code = 500
     return i18n_templates[lang.code].TemplateResponse(
         "search.html",