Improve layout and labeling of index filters (CFM-295) (#99)

* Improve layout and labeling of index filters (CFM-295) * Improve (DOM) class names for date from/thru filters (CFM-295)
COmanage · Jun 19, 2023 · a182027 · a182027
1 parent 0cf22b4
commit a182027
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/app/templates/element/filter.php b/app/templates/element/filter.php
@@ -170,10 +170,8 @@
           print $this->Form->control($key, $formParams);
         }
       ?>
-      </div>
       <?php if(!empty($field_booleans_columns)): ?>
         <div class="top-search-checkboxes input">
-          <div class="top-search-checkbox-label">On-Off</div>
           <div class="top-search-checkbox-fields">
             <?php foreach($field_booleans_columns as $key => $options): ?>
               <div class="form-check form-check-inline">
@@ -192,13 +190,16 @@
           </div>
         </div>
       <?php endif; ?>
+      </div>
+
       <?php if(!empty($field_datetime_columns)): ?>
+        <div class="top-filters-fields-subgroups">
         <?php foreach($field_datetime_columns as $key => $options): ?>
           <div class="input">
             <div class="top-search-date-label"><?= Inflector::humanize($key) ?></div>
-            <div class="top-filters-fields-subgroups">
+            <div class="top-filters-fields-dates">
               <!--     Start at       -->
-              <div class="top-search-date-fields">
+              <div class="top-search-start-date">
                 <div class="d-flex">
                   <?php
                   // A datetime field will be rendered as plain text input with adjacent date and time pickers
@@ -232,7 +233,7 @@
                 </div>
               </div>
               <!--     Ends at       -->
-              <div class="top-search-checkbox-fields">
+              <div class="top-search-end-date">
                 <div class="d-flex">
                   <?php
                   // A datetime field will be rendered as plain text input with adjacent date and time pickers
@@ -268,6 +269,7 @@
             </div>
           </div>
         <?php endforeach; ?>
+        </div>
       <?php endif; ?>
 
       <?php $rebalanceColumns = ((count($vv_searchable_attributes)) % 2 != 0) ? ' class="tss-rebalance"' : ''; ?>

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -837,6 +837,15 @@ ul.form-list li.alert-banner .co-alert {
 .top-filters .top-filters-checkboxes {
   margin-top: 0.5em;
 }
+.top-filters-fields-dates {
+  padding: 1.25em 1em 0.5em;
+  border: 1px solid var(--cmg-color-bg-006);
+  border-radius: 4px;
+  margin-bottom: 1em;
+}
+.top-search-date-label {
+  padding: 1em 0 0.25em;
+}
 .top-filters .filter-clear-all-button {
   font-size: 0.9em;
   width: auto;

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -322,17 +322,15 @@
     grid-template-columns: 1fr 1fr;
     column-gap: 1em;
     padding: 0 0.5em;
+    align-items: center;
   }
   .top-search-checkboxes {
-    padding: 0 0.5em;
+    padding: 0.5em 0 0;
   }
   #top-filters-submit.tss-rebalance {
     margin-top: -3.5em;
     position: relative;
   }
-  .top-search-date-label {
-    padding: 0 0.5em;
-  }
   /* CO CONFIGURATION DASHBOARD */
   .config-menu {
     column-count: 3;