Put sort and filter on same line

openaustralia · Feb 13, 2024 · 21c2e88 · 21c2e88
1 parent 5e944ae
commit 21c2e88
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/app/components/tailwind/select_links.html.erb b/app/components/tailwind/select_links.html.erb
@@ -1,6 +1,6 @@
 <div x-data="{ link: '<%= @value %>' }"
      x-init="$watch('link', value => { window.location = value; })"
-     class="text-2xl text-navy">
+     class="inline-block text-2xl text-navy">
   <%# Hiding the select tag initially. It gets unhidden by javascript %>
   <%# TODO: Disable the currently selected item %>
   <div class="invisible" x-bind:class="{ invisible: false }">

diff --git a/app/views/_tailwind/applications/_address_with_results.html.erb b/app/views/_tailwind/applications/_address_with_results.html.erb
@@ -11,7 +11,6 @@
       <div>
         <%# We only want to show the sort options on the first page %>
         <% if page.nil? %>
-          <%# TODO: Sort options and filter options should be on the same line %>
           <%= render "sort_options", sort:, extra_params: { q: } %>
           <% if Flipper.enabled?(:extra_options_on_address_search, current_user) %>
             <%= render "filter_options", sort:, q:, radius:, time: %>

diff --git a/app/views/_tailwind/applications/_filter_options.html.erb b/app/views/_tailwind/applications/_filter_options.html.erb
@@ -1,19 +1,21 @@
-<% if sort == "time" %>
-  <%= render Tailwind::SelectLinks.new(
-        id: "filter",
-        label: "within",
-        container: Alert::VALID_RADIUS_METERS_VALUES.map do |radius_option|
-          [meters_in_words(radius_option), url_for({ q:, radius: (radius_option == Alert::DEFAULT_RADIUS ? nil : radius_option) })]
-        end,
-        value: url_for({ q:, radius: (radius.to_i == Alert::DEFAULT_RADIUS ? nil : radius.to_i) })
-      ) %>
-<% else %>
-  <%= render Tailwind::SelectLinks.new(
-        id: "filter",
-        label: "within the last",
-        container: [364 / 4, 365 / 2, 365, 365 * 2, 365 * 5, 365 * 10].map do |time_option|
-          [days_in_words(time_option), url_for({ q:, sort:, time: (time_option == 365 ? nil : time_option) })]
-        end,
-        value: url_for({ q:, sort:, time: (time == 365 ? nil : time) })
-      ) %>
-<% end %>
+<div class="inline-block ml-2">
+  <% if sort == "time" %>
+    <%= render Tailwind::SelectLinks.new(
+          id: "filter",
+          label: "within",
+          container: Alert::VALID_RADIUS_METERS_VALUES.map do |radius_option|
+            [meters_in_words(radius_option), url_for({ q:, radius: (radius_option == Alert::DEFAULT_RADIUS ? nil : radius_option) })]
+          end,
+          value: url_for({ q:, radius: (radius.to_i == Alert::DEFAULT_RADIUS ? nil : radius.to_i) })
+        ) %>
+  <% else %>
+    <%= render Tailwind::SelectLinks.new(
+          id: "filter",
+          label: "within the last",
+          container: [364 / 4, 365 / 2, 365, 365 * 2, 365 * 5, 365 * 10].map do |time_option|
+            [days_in_words(time_option), url_for({ q:, sort:, time: (time_option == 365 ? nil : time_option) })]
+          end,
+          value: url_for({ q:, sort:, time: (time == 365 ? nil : time) })
+        ) %>
+  <% end %>
+</div>