From cc1466b114c9cadf3bbd696f8ff14987947e40f6 Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxOLI.org>
Date: Mon, 20 Sep 2021 11:48:47 -0400
Subject: [PATCH] LP#1922273: (follow-up) adjust positioning of filters

This patch puts all of the filters in a single row div
but preserves the styling that displays up to four columns
of them on large screens. This way, if you use the library
setting to hide some of the filters, the ones that remain
won't end up randomly appearing in two rows unless you've
retained more than four of them.

Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
---
 .../src/app/staff/catalog/search-form.component.html | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
index 8f3ed840c3..18bae19865 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
@@ -166,8 +166,8 @@
                 </div>
               </div>
           </div>
-          <div class="row mt-3" *ngIf="showFilters()">
-            <div class="col-lg-3" *ngIf="searchFilters().includes('item_type')">
+          <div class="row" *ngIf="showFilters()">
+            <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('item_type')">
               <select class="form-control"  multiple="true"
                 [(ngModel)]="context.termSearch.ccvmFilters.item_type">
                 <option value='' i18n>All Item Types</option>
@@ -176,7 +176,7 @@
                 </ng-container> 
               </select>
             </div>
-            <div class="col-lg-3" *ngIf="searchFilters().includes('item_form')">
+            <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('item_form')">
               <select class="form-control" multiple="true"
                 [(ngModel)]="context.termSearch.ccvmFilters.item_form">
                 <option value='' i18n>All Item Forms</option>
@@ -185,7 +185,7 @@
                 </ng-container> 
               </select>
             </div>
-            <div class="col-lg-3" *ngIf="searchFilters().includes('item_lang')">
+            <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('item_lang')">
               <select class="form-control" 
                 [(ngModel)]="context.termSearch.ccvmFilters.item_lang" multiple="true">
                 <option value='' i18n>All Languages</option>
@@ -194,7 +194,7 @@
                 </ng-container> 
               </select>
             </div>
-            <div class="col-lg-3" *ngIf="searchFilters().includes('audience')">
+            <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('audience')">
               <select class="form-control" 
                 [(ngModel)]="context.termSearch.ccvmFilters.audience" multiple="true">
                 <option value='' i18n>All Audiences</option>
@@ -203,9 +203,7 @@
                 </ng-container> 
               </select>
             </div>
-          </div>
-          <div class="row mt-3" *ngIf="showFilters()">
-            <div class="col-lg-3" *ngIf="searchFilters().includes('vr_format')">
+            <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('vr_format')">
               <select class="form-control" 
                 [(ngModel)]="context.termSearch.ccvmFilters.vr_format" multiple="true">
                 <option value='' i18n>All Video Formats</option>
@@ -214,7 +212,7 @@
                 </ng-container> 
               </select>
             </div>
-            <div class="col-lg-3" *ngIf="searchFilters().includes('bib_level')">
+            <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('bib_level')">
               <select class="form-control" 
                 [(ngModel)]="context.termSearch.ccvmFilters.bib_level" multiple="true">
                 <option value='' i18n>All Bib Levels</option>
@@ -223,7 +221,7 @@
                 </ng-container> 
               </select>
             </div>
-            <div class="col-lg-3" *ngIf="searchFilters().includes('lit_form')">
+            <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('lit_form')">
               <select class="form-control" 
                 [(ngModel)]="context.termSearch.ccvmFilters.lit_form" multiple="true">
                 <option value='' i18n>All Literary Forms</option>
@@ -232,7 +230,7 @@
                 </ng-container> 
               </select>
             </div>
-            <div class="col-lg-3">
+            <div class="col-lg-3 mt-3">
               <select class="form-control" 
                 [(ngModel)]="context.termSearch.copyLocations" multiple="true">
                 <option value='' i18n>All Shelving Locations</option>
-- 
2.11.0