html/css: refactor RTL filter bar code

3 files changed, 17 insertions, 3 deletions

diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index e73a38f..2dd2643 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -33,6 +33,19 @@
     .ui.action.input:not([class*="left action"]) > input {
       border-right-color: #999!important;
     }
+
+    .filter-bar .text-button {
+      left: 0.9em;
+      right: auto;
+    }
+    .filter-bar .filter-label {
+      left: 0.9em;
+      right: auto;
+    }
+    .ui.labeled.icon.button.serp-button .menu.fulltext-thumbnail {
+      left: auto;
+      right: calc(-100% - 1em);
+    }
     {% endif %}
   </style>
   <link rel="icon" 
diff --git a/fatcat_scholar/templates/search.html b/fatcat_scholar/templates/search.html
index 5c7d860..0d9fab6 100644
--- a/fatcat_scholar/templates/search.html
+++ b/fatcat_scholar/templates/search.html
@@ -33,7 +33,7 @@
 
   <details class="search-filters">
     <summary style="float: right;"><i class="filter icon"></i>{{ _("Filters") }}</summary>
-    <div style="display: flex; align-items: flex-start; column-gap: 2em; row-gap: 2em; flex-wrap: wrap; padding-bottom:1.5em;">
+    <div class="tablet-filter-bar">
       {{ 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) }}
@@ -90,7 +90,7 @@
       <div class="ui clearing divider"></div>
     {% endif %}
 
-    <div style="white-space: nowrap; direction: {% if locale in ['ar'] %}ltr{% else %}rtl{% endif %};">
+    <div class = "filter-bar">
       {{ 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) }}
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index dc47203..613feac 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -513,7 +513,8 @@
 
 {% macro query_option(options, selected) -%}
 <div>
-  <label for="{{ options.slug }}" style="color: rgba(0,0,0,0.55);">{{ _(options.label) }}</label>
+  <label class="filter-label" for="{{ options.slug }}">{{ _(options.label) }}</label>
+  <br>
   <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 }}">