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

@@ -382,27 +382,34 @@
 .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;
  align-items: center;
  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: "";

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 %>

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 %>