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>

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 8f3ed84..18bae19 100644 (file)
--- 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>