From 9fd5149eeaa0b6f07fe25200ca43901af2b3c189 Mon Sep 17 00:00:00 2001
From: Steven Steffen <spsteffen1s@gmail.com>
Date: Wed, 28 Aug 2024 09:23:07 -0500
Subject: [PATCH] switches up structure and flex behavior of inline ui to float
 stored filter controls to the right and responsively correct

---
 app/assets/stylesheets/index.tailwind.css     | 12 +++++-
 .../refine/inline/filters/_group.html.erb     | 20 ++++------
 .../refine/inline/filters/_show.html.erb      | 38 ++++++++++---------
 3 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/app/assets/stylesheets/index.tailwind.css b/app/assets/stylesheets/index.tailwind.css
index 1c56a701..6c671f07 100644
--- a/app/assets/stylesheets/index.tailwind.css
+++ b/app/assets/stylesheets/index.tailwind.css
@@ -382,20 +382,23 @@
 .refine--filter-wrapper {
   font-size: 14px;
   display: flex;
-  flex-direction: column;
+  /* flex-direction: column; */
   gap: 12px;
   margin-top: 12px;
 }
 
 .refine--filter-row {
   display: flex;
+  width: 100%;
   gap: 10px;
   row-gap: 15px;
   align-items: center;
-  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
 }
 
 .refine--groups-wrapper {
+  flex-grow: 1;
   display: flex;
   gap: 10px;
   row-gap: 15px;
@@ -403,6 +406,10 @@
   flex-wrap: wrap;
 }
 
+.refine--filter-control-group {
+  text-wrap: nowrap;
+}
+
 .refine--group-join, .refine--condition-join {
   position: relative;
   padding: 5px 0;
@@ -429,6 +436,7 @@
   position: relative;
   padding: 0 10px;
   align-items: center;
+  flex-wrap: wrap;
 
   &:before , &:after {
     content: "";
diff --git a/app/views/refine/inline/filters/_group.html.erb b/app/views/refine/inline/filters/_group.html.erb
index 225b8609..0a82d1d7 100644
--- a/app/views/refine/inline/filters/_group.html.erb
+++ b/app/views/refine/inline/filters/_group.html.erb
@@ -1,13 +1,7 @@
-<div class="refine--group">
-  <div class="refine--group-conditions-wrapper">
-    <div class="refine--group-conditions">
-      <% group.each.with_index do |criterion, i| %>
-        <% unless i == 0 %>
-          <div class="refine--condition-join"><%= t(".and") %></div>
-        <% end %>
-        <%= render "refine/inline/filters/criterion", criterion: criterion %>
-      <% end %>
-    </div>
-    <%= render "refine/inline/filters/and_button", position: group.last.position + 1 %>
-  </div>
-</div>
+<% group.each.with_index do |criterion, i| %>
+  <% unless i == 0 %>
+    <div class="refine--condition-join"><%= t(".and") %></div>
+  <% end %>
+  <%= render "refine/inline/filters/criterion", criterion: criterion %>
+<% end %>
+<%= render "refine/inline/filters/and_button", position: group.last.position + 1 %>
diff --git a/app/views/refine/inline/filters/_show.html.erb b/app/views/refine/inline/filters/_show.html.erb
index 52c3e7ed..e129b718 100644
--- a/app/views/refine/inline/filters/_show.html.erb
+++ b/app/views/refine/inline/filters/_show.html.erb
@@ -1,38 +1,42 @@
 <%
   groups = Refine::Inline::Criterion.groups_from_filter(@refine_filter, client_id: @refine_client_id, stable_id: @refine_stable_id)
 
+  root_data = (defined?(data) && data) || {}
+
   main_row_class = class_names "refine--filter-row" => true,
     "refine--has-many-groups" => groups.many?
 %>
 
-<%= tag.div class: "refine--filter-wrapper", id: "refine-inline-filter-#{@refine_client_id}" do %>
+<%= tag.div class: "refine--filter-wrapper", id: "refine-inline-filter-#{@refine_client_id}", data: root_data do %>
   <%= tag.div class: main_row_class do %>
     <% if @refine_filter.blueprint.empty? %>
-      <%= render "refine/inline/filters/add_first_condition_button", position: 0, btn_class: "
-      refine--add-first-condition-btn" %>
+      <%= render "refine/inline/filters/add_first_condition_button", position: 0, btn_class: "refine--add-first-condition-btn" %>
     <% else %>
-      <div class="refine--filter-label">
-        <%= t('refine.inline.filters.filter') %>: 
-      </div>
       <div class="refine--groups-wrapper">
         <% groups.each.with_index do |group, i| %>
           <% unless i == 0 %>
-            <div class="refine--group-join"><%= t("refine.inline.filters.or") %></div>
-          <% end %>
-
-          <%= render "refine/inline/filters/group", group: group %>
+              <div class="refine--group-join"><%= t("refine.inline.filters.or") %></div>
+            <% end %>
+          <div class="refine--group">
+            
+            <div class="refine--group-conditions-wrapper">
+              <%= render "refine/inline/filters/group", group: group %>
+            </div>
+            <% if i == groups.length - 1 %>
+              <%= render "refine/inline/filters/or_button", position: @refine_filter.blueprint.length %>
+            <% end %>
+          </div>
         <% end %>
 
-        <div class="refine--group">
-          <div class="refine--group-conditions-wrapper">
-            <%= render "refine/inline/filters/or_button", position: @refine_filter.blueprint.length %>
-          </div>
-        </div>
-        <%= render "refine/inline/filters/save_button" %>
-        
       </div>
     <% end %>
+   <% if @refine_filter.blueprint&.any? %>
+      <div class="refine--filter-control-group">
+        <%= render "refine/inline/filters/save_button" %>
+      </div>
+    <% end %> 
   <% end %>
+  
 <% end %>