From 25a27af29c4bc6d4a665accefde561e6bd76a63d Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Thu, 25 Apr 2024 20:45:03 -0500
Subject: [PATCH] Use explicit flex styles instead of "level" for grid filters
 etc.

just to be more precise, and consistent
---
 tailbone/static/css/filters.css               |  4 ---
 .../templates/grids/filter-components.mako    | 35 +++++++------------
 tailbone/templates/grids/filters.mako         | 27 +++++++-------
 3 files changed, 25 insertions(+), 41 deletions(-)

diff --git a/tailbone/static/css/filters.css b/tailbone/static/css/filters.css
index 6deff7b0..72506a06 100644
--- a/tailbone/static/css/filters.css
+++ b/tailbone/static/css/filters.css
@@ -3,10 +3,6 @@
  * Grid Filters
  ******************************/
 
-.filters .filter {
-    margin-bottom: 0.5rem;
-}
-
 .filters .filter-fieldname .field,
 .filters .filter-fieldname .field label {
     width: 100%;
diff --git a/tailbone/templates/grids/filter-components.mako b/tailbone/templates/grids/filter-components.mako
index 869455cc..7897b3cf 100644
--- a/tailbone/templates/grids/filter-components.mako
+++ b/tailbone/templates/grids/filter-components.mako
@@ -195,26 +195,20 @@
 
 <%def name="make_grid_filter_component()">
   <script type="text/x-template" id="grid-filter-template">
+    <div class="filter"
+         v-show="filter.visible"
+         style="display: flex; gap: 0.5rem;">
 
-    <div class="level filter" v-show="filter.visible">
-      <div class="level-left"
-           style="align-items: start;">
-
-        <div class="level-item filter-fieldname">
-
-          <b-field>
-            <b-button @click="filter.active = !filter.active"
-                      icon-pack="fas"
-                      :icon-left="filter.active ? 'check' : null">
-              {{ filter.label }}
-            </b-button>
-          </b-field>
-
+        <div class="filter-fieldname">
+          <b-button @click="filter.active = !filter.active"
+                    icon-pack="fas"
+                    :icon-left="filter.active ? 'check' : null">
+            {{ filter.label }}
+          </b-button>
         </div>
 
-        <b-field grouped v-show="filter.active"
-                 class="level-item"
-                 style="align-items: start;">
+        <div v-show="filter.active"
+             style="display: flex; gap: 0.5rem;">
 
           <b-select v-model="filter.verb"
                     @input="focusValue()"
@@ -266,11 +260,8 @@
                    ref="valueInput">
           </b-input>
 
-        </b-field>
-
-      </div><!-- level-left -->
-    </div><!-- level -->
-
+        </div>
+    </div>
   </script>
   <script>
 
diff --git a/tailbone/templates/grids/filters.mako b/tailbone/templates/grids/filters.mako
index 4c584883..eb245934 100644
--- a/tailbone/templates/grids/filters.mako
+++ b/tailbone/templates/grids/filters.mako
@@ -2,26 +2,26 @@
 
 <form action="${form.action_url}" method="GET" @submit.prevent="applyFilters()">
 
-  <grid-filter v-for="key in filtersSequence"
-               :key="key"
-               :filter="filters[key]"
-               ref="gridFilters">
-  </grid-filter>
+  <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+    <grid-filter v-for="key in filtersSequence"
+                 :key="key"
+                 :filter="filters[key]"
+                 ref="gridFilters">
+    </grid-filter>
+  </div>
 
-  <b-field grouped>
+  <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
 
     <b-button type="is-primary"
               native-type="submit"
               icon-pack="fas"
-              icon-left="check"
-              class="control">
+              icon-left="check">
       Apply Filters
     </b-button>
 
     <b-button v-if="!addFilterShow"
               icon-pack="fas"
               icon-left="plus"
-              class="control"
               @click="addFilterButton">
       Add Filter
     </b-button>
@@ -44,15 +44,13 @@
 
     <b-button @click="resetView()"
               icon-pack="fas"
-              icon-left="home"
-              class="control">
+              icon-left="home">
       Default View
     </b-button>
 
     <b-button @click="clearFilters()"
               icon-pack="fas"
-              icon-left="trash"
-              class="control">
+              icon-left="trash">
       No Filters
     </b-button>
 
@@ -60,12 +58,11 @@
         <b-button @click="saveDefaults()"
                   icon-pack="fas"
                   icon-left="save"
-                  class="control"
                   :disabled="savingDefaults">
           {{ savingDefaults ? "Working, please wait..." : "Save Defaults" }}
         </b-button>
     % endif
 
-  </b-field>
+  </div>
 
 </form>