UI mobile/tablet scaling; search error improvements

3 files changed, 35 insertions, 8 deletions

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 %}