html/css: refactor RTL filter bar code

4 files changed, 39 insertions, 4 deletions

diff --git a/fatcat_scholar/static/scholar.css b/fatcat_scholar/static/scholar.css
index b162ad5..3258dc6 100644
--- a/fatcat_scholar/static/scholar.css
+++ b/fatcat_scholar/static/scholar.css
@@ -26,7 +26,7 @@ nav.ui.menu {
   box-sizing: border-box;
   border-radius: 0;
   margin-bottom: 0.4em;
-  text-align: left;
+  text-align: start;
   width: 14em;
 }
 
@@ -222,6 +222,27 @@ a:hover .ui.card {
   display: inline-block;
 }
 
+.tablet-filter-bar {
+  display: flex;
+  align-items: flex-start;
+  column-gap: 2em;
+  row-gap: 2em;
+  flex-wrap: wrap;
+  padding-bottom:1.5em;
+}
+
+.filter-bar .text-button {
+  white-space: nowrap;
+  position: absolute;
+  right: 0.9em;
+}
+.filter-bar .filter-label {
+  color: rgba(0,0,0,0.55);
+  white-space: nowrap;
+  position: absolute;
+  right: 0.9em;
+}
+
 details.title-dropdown summary {
   text-decoration: none;
   color: inherit;
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 }}">