html: improvements to reactive search filters and main serp column

3 files changed, 31 insertions, 23 deletions

diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index 3b6eb99..7df0502 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -41,8 +41,15 @@
     @media only screen and (min-width: 768px) {
       .mobile-only { display: none !important; }
     }
+    @media only screen and (max-width: 991px) and (min-width: 768px) {
+      .ui.container { width: 820px; }
+    }
     @media only screen and (max-width: 991px) {
       .tablet-hide { display: none !important; }
+      .ui.grid>[class*="fourteen wide"].column.serp-column {
+        width: 100% !important;
+        box-shadow: none !important;
+      }
     }
     @media only screen and (min-width: 992px) {
       .tablet-only { display: none !important; }
diff --git a/fatcat_scholar/templates/search.html b/fatcat_scholar/templates/search.html
index d91b78a..85c6a89 100644
--- a/fatcat_scholar/templates/search.html
+++ b/fatcat_scholar/templates/search.html
@@ -33,12 +33,12 @@
 
   <details class="search_filters">
     <summary style="float: right;"><i class="filter icon"></i>{{ _("Filters") }}</summary>
-    <p>
-    {{ 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) }}
-    </p>
+    <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) }}
+      {{ 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>
   </details>
 
   {% if hits %}
@@ -58,7 +58,7 @@
   {% endif %}
 </div>
 
-<div class="ui equal height stackable divided grid" style="margin-top: 1em;">
+<div class="ui equal height divided grid" style="margin-top: 1em;">
 
   <nav class="ui tablet-hide two wide column">
     {% if hits %}
@@ -98,7 +98,7 @@
     
   </nav>
 
-  <div class="ui fourteen wide column">
+  <div class="ui fourteen wide column serp-column">
     {% if search_error %}
       <div class="ui icon error message">
         <i class="ban icon"></i>
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index cf20133..229d481 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -344,21 +344,22 @@
 {% endmacro %}
 
 {% macro query_option(options, selected) -%}
-<label for="{{ options.slug }}" style="color: rgba(0,0,0,0.55);">{{ _(options.label) }}</label>
-<div class="ui link list" style="margin-top: 0.3em;">
-  {% 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>
+  <label for="{{ options.slug }}" style="color: rgba(0,0,0,0.55);">{{ _(options.label) }}</label>
+  <div class="ui link list" style="margin-top: 0.3em;">
+    {% 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>
+    {% endfor %}
+  </div>
 </div>
 <br>
 {% endmacro %}