From 1cb52f2b47d6eedf5759270e7757213d36786d32 Mon Sep 17 00:00:00 2001
From: Stephanie <stephanie.leary@equinoxoli.org>
Date: Tue, 28 Feb 2023 23:14:49 +0000
Subject: [PATCH] LP2000482 Bootstrap 5: search form spacing

Signed-off-by: Stephanie <stephanie.leary@equinoxoli.org>
---
 .../app/staff/catalog/search-form.component.html   | 231 ++++++++++-----------
 1 file changed, 110 insertions(+), 121 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 aa2af03771..8bf4357227 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
@@ -41,7 +41,7 @@
             <div class="col-lg-2 pe-1">
               <div *ngIf="idx === 0">
                 <label i18n class="select-label" for="context-termSearch-format">Format</label>
-                <select class="form-control" id="context-termSearch-format" [(ngModel)]="context.termSearch.format">
+                <select class="form-select" id="context-termSearch-format" [(ngModel)]="context.termSearch.format">
                   <option i18n value=''>All Formats</option>
                   <ng-container
                     *ngTemplateOutlet="ccvmOption;context:{list:ccvmMap.search_format}">
@@ -50,16 +50,16 @@
               </div>
               <div *ngIf="idx > 0">
                 <label i18n class="select-label" for="context-termSearch-joinOp-{{idx}}">Join with</label>
-                <select class="form-control" id="context-termSearch-joinOp-{{idx}}"
+                <select class="form-select" id="context-termSearch-joinOp-{{idx}}"
                   [(ngModel)]="context.termSearch.joinOp[idx]">
                   <option i18n value='&&'>And</option>
                   <option i18n value='||'>Or</option>
                 </select>
               </div>
             </div>
-            <div class="col-lg-2 pl-0 pr-2">
+            <div class="col-lg-2 ps-0 pe-2">
               <label i18n class="select-label" for="context-termSearch-fieldClass-{{idx}}">Catalog Field</label>
-              <select class="form-control" id="context-termSearch-fieldClass-{{idx}}"
+              <select class="form-select" id="context-termSearch-fieldClass-{{idx}}"
                 (change)="preventBogusCombos(idx)"
                 [(ngModel)]="context.termSearch.fieldClass[idx]">
                 <option i18n value='keyword'>Keyword</option>
@@ -72,9 +72,9 @@
                   *ngIf="showBookplate()">Digital Bookplate</option>
               </select>
             </div>
-            <div class="col-lg-2 pl-0 pr-2">
+            <div class="col-lg-2 ps-0 pe-2">
               <label i18n class="select-label" for="context-termSearch-matchOp-{{idx}}">Matching</label>
-              <select class="form-control" id="context-termSearch-matchOp-{{idx}}"
+              <select class="form-select" id="context-termSearch-matchOp-{{idx}}"
                 [(ngModel)]="context.termSearch.matchOp[idx]">
                 <option i18n value='contains'>Contains</option>
                 <option i18n value='nocontains'>Does not contain</option>
@@ -124,11 +124,10 @@
               </button>
             </div>
           </div>
-          <div class="row">
-            <div class="col-lg-12 form-inline">
-              <div class="form-inline-group">
+          <div class="mt-3 gx-3 row row-cols-auto">
+            <div class="col">
                 <label i18n class="select-label" for="context-sort">Sort Results</label>
-                <select class="form-control mr-2" id="context-sort" [(ngModel)]="context.sort">
+                <select class="form-select me-2" id="context-sort" [(ngModel)]="context.sort">
                   <option value='' i18n>Sort by Relevance</option>
                   <optgroup label="Sort by Title" i18n-label>
                     <option value='titlesort' i18n>Title: A to Z</option>
@@ -147,39 +146,39 @@
                     <option value='poprel' i18n>Popularity Adjusted Relevance</option>
                   </optgroup>
                 </select>
-              </div>
-                <div class="checkbox pl-2 ml-2 pt-2">
-                  <label for="context-termSearch-available">
-                    <input type="checkbox" [(ngModel)]="context.termSearch.available" id="context-termSearch-available" />
-                    <span class="pl-1" i18n>Limit to Available</span>
-                  </label>
+            </div>
+            <div class="col">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" 
+                    id="limit-to-avail-input" [(ngModel)]="context.termSearch.available"/>
+                  <label class="form-label form-check-label" for="limit-to-avail-input" i18n>Limit to Available</label>
                 </div>
-                <div class="checkbox pl-3 pt-2">
-                  <label for="context-termSearch-groupByMetarecord">
-                    <input type="checkbox" id="context-termSearch-groupByMetarecord"
-                      [(ngModel)]="context.termSearch.groupByMetarecord"/>
-                    <span class="pl-1" i18n>Group Formats/Editions</span>
-                  </label>
+            </div>
+            <div class="col">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" id="group-formats-input"
+                    [(ngModel)]="context.termSearch.groupByMetarecord"/>
+                  <label class="form-label form-check-label" for="group-formats-input" i18n>Group Formats/Editions</label>
                 </div>
-                <div class="checkbox pl-3 pt-2">
-                  <label for="context-global">
-                    <input type="checkbox" id="context-global" [(ngModel)]="context.global"/>
-                    <span class="pl-1" i18n>Results from All Libraries</span>
-                  </label>
+            </div>
+            <div class="col">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" id="results-from-all-input" [(ngModel)]="context.global"/>
+                  <label class="form-label form-check-label" for="results-from-all-input" i18n>Results from All Libraries</label>
                 </div>
-                <div class="checkbox pl-3 pt-2" *ngIf="showExcludeElectronic()">
-                  <label for="context-termSearch-excludeElectronic">
-                    <input type="checkbox" id="context-termSearch-excludeElectronic"
-                      [(ngModel)]="context.termSearch.excludeElectronic"/>
-                    <span class="pl-1" i18n>Exclude Electronic Resources</span>
-                  </label>
+            </div>
+            <div class="col">
+                <div class="form-check" *ngIf="showExcludeElectronic()">
+                  <input class="form-check-input" type="checkbox" id="electronic-input"
+                    [(ngModel)]="context.termSearch.excludeElectronic"/>
+                  <label class="form-label form-check-label" for="electronic-input" i18n>Exclude Electronic Resources</label>
                 </div>
-              </div>
+            </div>
           </div>
           <div class="row" *ngIf="showFilters()">
             <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('item_type')">
               <label i18n class="select-label" for="context-termSearch-ccvmFilters-item_type">Item Type</label>
-              <select class="form-control"  multiple="true" id="context-termSearch-ccvmFilters-item_type"
+              <select class="form-select"  multiple="true" id="context-termSearch-ccvmFilters-item_type"
                 [(ngModel)]="context.termSearch.ccvmFilters.item_type">
                 <option value='' i18n>All Item Types</option>
                 <ng-container
@@ -189,7 +188,7 @@
             </div>
             <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('item_form')">
               <label i18n class="select-label" for="context-termSearch-ccvmFilters-item_form">Form</label>
-              <select class="form-control" multiple="true" id="context-termSearch-ccvmFilters-item_form"
+              <select class="form-select" multiple="true" id="context-termSearch-ccvmFilters-item_form"
                 [(ngModel)]="context.termSearch.ccvmFilters.item_form">
                 <option value='' i18n>All Item Forms</option>
                 <ng-container
@@ -199,7 +198,7 @@
             </div>
             <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('item_lang')">
               <label i18n class="select-label" for="context-termSearch-ccvmFilters-item_lang">Language</label>
-              <select class="form-control" id="context-termSearch-ccvmFilters-item_lang"
+              <select class="form-select" id="context-termSearch-ccvmFilters-item_lang"
                 [(ngModel)]="context.termSearch.ccvmFilters.item_lang" multiple="true">
                 <option value='' i18n>All Languages</option>
                 <ng-container
@@ -209,7 +208,7 @@
             </div>
             <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('audience')">
               <label i18n class="select-label" for="context-termSearch-ccvmFilters-audience">Audience</label>
-              <select class="form-control" id="context-termSearch-ccvmFilters-audience"
+              <select class="form-select" id="context-termSearch-ccvmFilters-audience"
                 [(ngModel)]="context.termSearch.ccvmFilters.audience" multiple="true">
                 <option value='' i18n>All Audiences</option>
                 <ng-container
@@ -219,7 +218,7 @@
             </div>
             <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('vr_format')">
               <label i18n class="select-label" for="context-termSearch-ccvmFilters-vr_format">Video Format</label>
-              <select class="form-control" id="context-termSearch-ccvmFilters-vr_format"
+              <select class="form-select" id="context-termSearch-ccvmFilters-vr_format"
                 [(ngModel)]="context.termSearch.ccvmFilters.vr_format" multiple="true">
                 <option value='' i18n>All Video Formats</option>
                 <ng-container
@@ -229,7 +228,7 @@
             </div>
             <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('bib_level')">
               <label i18n class="select-label" for="context-termSearch-ccvmFilters-bib_level">Bibliographic Level</label>
-              <select class="form-control" id="context-termSearch-ccvmFilters-bib_level"
+              <select class="form-select" id="context-termSearch-ccvmFilters-bib_level"
                 [(ngModel)]="context.termSearch.ccvmFilters.bib_level" multiple="true">
                 <option value='' i18n>All Bib Levels</option>
                 <ng-container
@@ -239,7 +238,7 @@
             </div>
             <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('lit_form')">
               <label i18n class="select-label" for="context-termSearch-ccvmFilters-lit_form">Literary Form</label>
-              <select class="form-control" id="context-termSearch-ccvmFilters-lit_form"
+              <select class="form-select" id="context-termSearch-ccvmFilters-lit_form"
                 [(ngModel)]="context.termSearch.ccvmFilters.lit_form" multiple="true">
                 <option value='' i18n>All Literary Forms</option>
                 <ng-container
@@ -249,7 +248,7 @@
             </div>
             <div class="col-lg-3 mt-3">
               <label i18n class="select-label" for="context-termSearch-copyLocations">Shelving Location</label>
-              <select class="form-control" id="context-termSearch-copyLocations"
+              <select class="form-select" id="context-termSearch-copyLocations"
                 [(ngModel)]="context.termSearch.copyLocations" multiple="true">
                 <option value='' i18n>All Shelving Locations</option>
                 <option *ngFor="let loc of copyLocations" value="{{loc.id()}}" i18n>
@@ -262,18 +261,18 @@
             <div class="col-lg-12">
               <div class="form-inline">
                 <label for="pub-date1-input" i18n>Publication Year is</label>
-                <label class="sr-only" for="pub-date-operator-select" i18n>compare publication dates using...</label>
-                <select id="pub-date-operator-select" class="form-control ml-2" [(ngModel)]="context.termSearch.dateOp">
+                <label class="visually-hidden" for="pub-date-operator-select" i18n>compare publication dates using...</label>
+                <select id="pub-date-operator-select" class="form-select ms-2" [(ngModel)]="context.termSearch.dateOp">
                   <option value='is' i18n>Is</option>
                   <option value='before' i18n>Before</option>
                   <option value='after' i18n>After</option>
                   <option value='between' i18n>Between</option>
                 </select>
-                <label i18n class="sr-only" for="context-termSearch-date1">Year, or beginning of year range</label>
-                <input class="form-control ml-2" type="number" id="context-termSearch-date1"
+                <label i18n class="visually-hidden" for="context-termSearch-date1">Year, or beginning of year range</label>
+                <input class="form-control ms-2" type="number" id="context-termSearch-date1"
                   [(ngModel)]="context.termSearch.date1"/>
-                <label i18n class="sr-only" for="context-termSearch-date2">End of year range</label>
-                  <input class="form-control ml-2" type="number"
+                <label i18n class="visually-hidden" for="context-termSearch-date2">End of year range</label>
+                  <input class="form-control ms-2" type="number"
                   *ngIf="context.termSearch.dateOp === 'between'"
                   [(ngModel)]="context.termSearch.date2"/>
               </div>
@@ -284,26 +283,26 @@
       <li role="presentation" [ngbNavItem]="'ident'">
         <a i18n ngbNavLink role="tab">Numeric Search</a>
         <ng-template ngbNavContent>
-          <div class="row mt-4 gx-3 row-cols-auto">
-            <label class="form-label col-form-label" for="ident-type" i18n>Query Type</label>
-            <div class="col">
-              <select class="form-select" name="ident-type"
-                [(ngModel)]="context.identSearch.queryType">
-                <option i18n value="identifier|isbn">ISBN</option>
-                <option i18n value="identifier|upc">UPC</option>
-                <option i18n value="identifier|issn">ISSN</option>
-                <option i18n value="identifier|lccn">LCCN</option>
-                <option i18n value="identifier|tcn">TCN</option>
-                <option i18n value="item_barcode">Item Barcode</option>
-              </select>
-            </div>
-            <label for="ident-value" class="form-label col-form-label" i18n>Value</label>
-            <div class="col">
-              <input name="ident-value" id='ident-query-input' 
-                type="text" class="form-control"
-                [(ngModel)]="context.identSearch.value"
-                (keyup.enter)="searchByForm()"
-                placeholder="Numeric Query..."/>
+          <div class="row mt-4">
+            <div class="col-lg-12">
+              <div class="form-inline">
+                <label for="ident-type" i18n>Query Type</label>
+                <select class="form-select ms-2" name="ident-type"
+                  [(ngModel)]="context.identSearch.queryType">
+                  <option i18n value="identifier|isbn">ISBN</option>
+                  <option i18n value="identifier|upc">UPC</option>
+                  <option i18n value="identifier|issn">ISSN</option>
+                  <option i18n value="identifier|lccn">LCCN</option>
+                  <option i18n value="identifier|tcn">TCN</option>
+                  <option i18n value="item_barcode">Item Barcode</option>
+                </select>
+                <label for="ident-value" class="ms-2" i18n>Value</label>
+                <input name="ident-value" id='ident-query-input' 
+                  type="text" class="form-control ms-2"
+                  [(ngModel)]="context.identSearch.value"
+                  (keyup.enter)="searchByForm()"
+                  placeholder="Numeric Query..."/>
+              </div>
             </div>
           </div>
         </ng-template>
@@ -311,46 +310,38 @@
       <li role="presentation" [ngbNavItem]="'marc'">
         <a i18n ngbNavLink role="tab">MARC Search</a>
         <ng-template ngbNavContent>
-          <div class="mt-4">
-              <div class="row mt-2 gx-3 row-cols-auto" 
+          <div class="row mt-4">
+            <div class="col-lg-12">
+              <div class="form-inline mt-2" 
                 *ngFor="let q of context.marcSearch.values; let idx = index; trackBy:trackByIdx">
-                <label class="form-label col-form-label" for="marc-tag-{{idx}}" i18n>Tag</label>
-                <div class="col">
-                  <input class="form-control ms-2" size="3" type="text" 
-                    name="marc-tag-{{idx}}" id="{{ idx === 0 ? 'first-marc-tag' : '' }}"
-                    [(ngModel)]="context.marcSearch.tags[idx]"
-                    (keyup.enter)="searchByForm()"/>
-                </div>
-                <label class="form-label col-form-label" for="marc-subfield-{{idx}}" i18n>Subfield</label>
-                <div class="col">
-                  <input class="form-control ms-2" size="1" type="text" 
-                    name="marc-subfield-{{idx}}"
-                    [(ngModel)]="context.marcSearch.subfields[idx]"
-                    (keyup.enter)="searchByForm()"/>
-                </div>
-                <label class="form-label col-form-label"  for="marc-value-{{idx}}" i18n>Value</label>
-                <div class="col">
-                  <input class="form-control ms-2" type="text" name="marc-value-{{idx}}"
-                    [(ngModel)]="context.marcSearch.values[idx]" 
-                    (keyup.enter)="searchByForm()"/>
-                </div>
-                <div class="col">
-                  <button class="btn btn-sm material-icon-button ms-2"
-                    (click)="addMarcSearchRow(idx + 1)">
-                    <span class="material-icons">add_circle_outline</span>
-                  </button>
-                </div>
-                <div class="col">
-                  <button class="btn btn-sm material-icon-button ps-0 ms-0"
-                    [disabled]="context.marcSearch.values.length < 2"
-                    (click)="delMarcSearchRow(idx)">
-                    <span class="material-icons">remove_circle_outline</span>
-                  </button>
-                </div>
+                <label for="marc-tag-{{idx}}" i18n>Tag</label>
+                <input class="form-control ms-2" size="3" type="text" 
+                  name="marc-tag-{{idx}}" id="{{ idx === 0 ? 'first-marc-tag' : '' }}"
+                  [(ngModel)]="context.marcSearch.tags[idx]"
+                  (keyup.enter)="searchByForm()"/>
+                <label for="marc-subfield-{{idx}}" class="ms-2" i18n>Subfield</label>
+                <input class="form-control ms-2" size="1" type="text" 
+                  name="marc-subfield-{{idx}}"
+                  [(ngModel)]="context.marcSearch.subfields[idx]"
+                  (keyup.enter)="searchByForm()"/>
+                <label for="marc-value-{{idx}}" class="ms-2" i18n>Value</label>
+                <input class="form-control ms-2" type="text" name="marc-value-{{idx}}"
+                  [(ngModel)]="context.marcSearch.values[idx]" 
+                  (keyup.enter)="searchByForm()"/>
+                <button class="btn btn-sm material-icon-button ms-2"
+                  (click)="addMarcSearchRow(idx + 1)">
+                  <span class="material-icons">add_circle_outline</span>
+                </button>
+                <button class="btn btn-sm material-icon-button ms-2"
+                  [disabled]="context.marcSearch.values.length < 2"
+                  (click)="delMarcSearchRow(idx)">
+                  <span class="material-icons">remove_circle_outline</span>
+                </button>
               </div>
+            </div>
           </div>
-          <div class="row row-cols-auto mt-3">
-            <div class="form-check ps-3">
+          <div class="row mt-2">
+            <div class="checkbox ps-3">
               <label>
                 <input type="checkbox" [(ngModel)]="context.global"/>
                 <span class="ps-1" i18n>Results from All Libraries</span>
@@ -362,20 +353,18 @@
       <li role="presentation" [ngbNavItem]="'browse'">
         <a i18n ngbNavLink role="tab">Browse</a>
         <ng-template ngbNavContent>
-          <div class="row gx-3 mt-4 row-cols-auto">
-            <label class="form-label col-form-label" for="field-class" i18n>Browse for</label>
-            <div class="col">
-              <select class="form-control ms-2" name="field-class"
+          <div class="row mt-4">
+            <div class="col-lg-12 form-inline">
+              <label for="field-class" i18n>Browse for</label>
+              <select class="form-select ms-2" name="field-class"
                 [(ngModel)]="context.browseSearch.fieldClass">
                 <option i18n value='title'>Title</option>
                 <option i18n value='author'>Author</option>
                 <option i18n value='subject'>Subject</option>
                 <option i18n value='series'>Series</option>
               </select>
-            </div>
-            <label class="form-label col-form-label" for="query"> starting with </label>
-            <div class="col">
-              <input type="text" class="form-control" 
+              <label for="query" class="ms-2"> starting with </label>
+              <input type="text" class="form-control ms-2" 
                 id='browse-term-input' name="query"
                 [(ngModel)]="context.browseSearch.value"
                 (keyup.enter)="searchByForm()"
@@ -387,11 +376,11 @@
       <li role="presentation" [ngbNavItem]="'cnbrowse'">
         <a i18n ngbNavLink role="tab">Shelf Browse</a>
         <ng-template ngbNavContent>
-          <div class="row gx-3 mt-4 row-cols-auto">
-            <label class="form-label col-form-label" for="cnbrowse-term-input" i18n>
-              Browse Call Numbers starting with 
-            </label>
-            <div class="col">
+          <div class="row mt-4">
+            <div class="col-lg-12 form-inline">
+              <label for="cnbrowse-term-input" i18n>
+                Browse Call Numbers starting with 
+              </label>
               <input type="text" class="form-control ms-2" 
                 id='cnbrowse-term-input' name="query"
                 [(ngModel)]="context.cnBrowseSearch.value"
@@ -411,13 +400,13 @@
       <div class="col-lg-12">
         <div class="card">
           <div class="card-body">
-            <div class="float-end d-flex">
+            <div class="float-right d-flex">
               <eg-org-select 
                 (onChange)="orgOnChange($event)"
                 [initialOrg]="context.searchOrg"
                 [placeholder]="'Library'" >
               </eg-org-select>
-              <button class="btn btn-success me-1 ms-1" type="button"
+              <button class="btn btn-success mx-1" type="button"
                 [disabled]="searchIsActive()"
                 (click)="context.pager.offset=0;searchByForm()" i18n>
                 Search
@@ -449,7 +438,7 @@
     <ng-container *ngIf="context.result.global_summary as gs">
       <ng-container *ngIf="gs.suggestions as sugg">
         <div *ngIf="sugg.one_class_one_term as ocot" class="col-lg-12 d-flex align-content-center">
-          <span class="fw-bold fst-italic me-1" i18n>Did you mean:</span>
+          <span class="font-weight-bold font-italic me-1" i18n>Did you mean:</span>
           <span *ngFor="let s of ocot.suggestions; first as isFirst">
             <span *ngIf="!isFirst" i18n>&nbsp; or &nbsp;</span>
             <a routerLink="/staff/catalog/search" queryParamsHandling="merge"
-- 
2.11.0