LP2000482 Bootstrap 5: search form repairs

Signed-off-by: Stephanie Leary <stephanie.leary@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 4c01aef..3b50b4e 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
@@ -16,7 +16,6 @@
 <div id='staffcat-search-form'>
 
   <div *ngIf="canBeHidden()" class="row pt-1 pe-2">
-  <div *ngIf="canBeHidden()" class="row pt-1 pe-2">
     <div class="col-lg-12 d-flex">
       <div class="flex-1"></div><!-- push right -->
       <a (click)="toggleFormDisplay()" class="label-with-material-icon no-href">
@@ -36,12 +35,11 @@
       <li role="presentation" [ngbNavItem]="'term'">
         <a i18n ngbNavLink role="tab">Keyword Search</a>
         <ng-template ngbNavContent>
-          <div class="row"
-            [ngClass]="{'mt-4': idx === 0, 'mt-1': idx > 0}"
+          <div class="row row-cols-auto d-flex align-items-end mt-1"
             *ngFor="let q of context.termSearch.query; let idx = index; trackBy:trackByIdx">
             <div class="col-lg-2 pe-1">
               <div *ngIf="idx === 0">
-                <label i18n class="select-label" for="context-termSearch-format">Format</label>
+                <label i18n class="form-label select-label" for="context-termSearch-format">Format</label>
                 <select class="form-select" id="context-termSearch-format" [(ngModel)]="context.termSearch.format">
                   <option i18n value=''>All Formats</option>
                   <ng-container
@@ -50,7 +48,7 @@
                 </select>
               </div>
               <div *ngIf="idx > 0">
-                <label i18n class="select-label" for="context-termSearch-joinOp-{{idx}}">Join with</label>
+                <label i18n class="form-label select-label" for="context-termSearch-joinOp-{{idx}}">Join with</label>
                 <select class="form-select" id="context-termSearch-joinOp-{{idx}}"
                   [(ngModel)]="context.termSearch.joinOp[idx]">
                   <option i18n value='&&'>And</option>
@@ -59,7 +57,7 @@
               </div>
             </div>
             <div class="col-lg-2 ps-0 pe-2">
-              <label i18n class="select-label" for="context-termSearch-fieldClass-{{idx}}">Catalog Field</label>
+              <label i18n class="form-label select-label" for="context-termSearch-fieldClass-{{idx}}">Catalog Field</label>
               <select class="form-select" id="context-termSearch-fieldClass-{{idx}}"
                 (change)="preventBogusCombos(idx)"
                 [(ngModel)]="context.termSearch.fieldClass[idx]">
@@ -74,7 +72,7 @@
               </select>
             </div>
             <div class="col-lg-2 ps-0 pe-2">
-              <label i18n class="select-label" for="context-termSearch-matchOp-{{idx}}">Matching</label>
+              <label i18n class="form-label select-label" for="context-termSearch-matchOp-{{idx}}">Matching</label>
               <select class="form-select" id="context-termSearch-matchOp-{{idx}}"
                 [(ngModel)]="context.termSearch.matchOp[idx]">
                 <option i18n value='contains'>Contains</option>
@@ -89,7 +87,7 @@
             <div class="col-lg-4 ps-0 pe-2">
               <div class="form-group">
                 <div *ngIf="idx === 0">
-                  <label i18n class="input-label" for='first-query-input'>Search Terms</label>
+                  <label i18n class="form-label input-label" for='first-query-input'>Search Terms</label>
                   <input type="text" class="form-control"
                     id='first-query-input'
                     [(ngModel)]="context.termSearch.query[idx]"
@@ -97,7 +95,7 @@
                     placeholder="Query..."/>
                 </div>
                 <div *ngIf="idx > 0">
-                  <label i18n class="input-label" for='context-termSearch-query-{{idx}}'>Search Terms</label>
+                  <label i18n class="form-label input-label" for='context-termSearch-query-{{idx}}'>Search Terms</label>
                   <input type="text" class="form-control"
                     [(ngModel)]="context.termSearch.query[idx]"
                     (keyup.enter)="searchByForm()"
@@ -126,8 +124,9 @@
             </div>
           </div>
           <div class="mt-3 gx-3 row row-cols-auto">
-            <div class="col">
-                <label i18n class="select-label" for="context-sort">Sort Results</label>
+            <div class="col row-cols-auto d-flex align-items-end form-inline">
+              <div class="col form-inline-group">
+                <label i18n class="form-label select-label" for="context-sort">Sort Results</label>
                 <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>
@@ -147,38 +146,38 @@
                     <option value='poprel' i18n>Popularity Adjusted Relevance</option>
                   </optgroup>
                 </select>
-            </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="col checkbox ps-2 ms-2 pt-2">
+                  <label class="form-label" for="context-termSearch-available">
+                    <input type="checkbox" [(ngModel)]="context.termSearch.available" id="context-termSearch-available" />
+                    <span class="ps-1" i18n>Limit to Available</span>
+                  </label>
                 </div>
-            </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 class="col checkbox ps-3 pt-2">
+                  <label class="form-label" for="context-termSearch-groupByMetarecord">
+                    <input type="checkbox" id="context-termSearch-groupByMetarecord"
+                      [(ngModel)]="context.termSearch.groupByMetarecord"/>
+                    <span class="ps-1" i18n>Group Formats/Editions</span>
+                  </label>
                 </div>
-            </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 class="col checkbox ps-3 pt-2">
+                  <label class="form-label" for="context-global">
+                    <input type="checkbox" id="context-global" [(ngModel)]="context.global"/>
+                    <span class="ps-1" i18n>Results from All Libraries</span>
+                  </label>
                 </div>
-            </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 class="col checkbox ps-3 pt-2" *ngIf="showExcludeElectronic()">
+                  <label class="form-label" for="context-termSearch-excludeElectronic">
+                    <input type="checkbox" id="context-termSearch-excludeElectronic"
+                      [(ngModel)]="context.termSearch.excludeElectronic"/>
+                    <span class="ps-1" i18n>Exclude Electronic Resources</span>
+                  </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>
+            <div class="col mt-3" *ngIf="searchFilters().includes('item_type')">
+              <label i18n class="form-label select-label" for="context-termSearch-ccvmFilters-item_type">Item Type</label>
               <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>
@@ -187,8 +186,8 @@
                 </ng-container> 
               </select>
             </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>
+            <div class="col mt-3" *ngIf="searchFilters().includes('item_form')">
+              <label i18n class="form-label select-label" for="context-termSearch-ccvmFilters-item_form">Form</label>
               <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>
@@ -197,8 +196,8 @@
                 </ng-container> 
               </select>
             </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>
+            <div class="col mt-3" *ngIf="searchFilters().includes('item_lang')">
+              <label i18n class="form-label select-label" for="context-termSearch-ccvmFilters-item_lang">Language</label>
               <select class="form-select" id="context-termSearch-ccvmFilters-item_lang"
                 [(ngModel)]="context.termSearch.ccvmFilters.item_lang" multiple="true">
                 <option value='' i18n>All Languages</option>
@@ -207,8 +206,8 @@
                 </ng-container> 
               </select>
             </div>
-            <div class="col-lg-3 mt-3" *ngIf="searchFilters().includes('audience')">
-              <label i18n class="select-label" for="context-termSearch-ccvmFilters-audience">Audience</label>
+            <div class="col mt-3" *ngIf="searchFilters().includes('audience')">
+              <label i18n class="form-label select-label" for="context-termSearch-ccvmFilters-audience">Audience</label>
               <select class="form-select" id="context-termSearch-ccvmFilters-audience"
                 [(ngModel)]="context.termSearch.ccvmFilters.audience" multiple="true">
                 <option value='' i18n>All Audiences</option>
@@ -217,8 +216,8 @@
                 </ng-container> 
               </select>
             </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>
+            <div class="col mt-3" *ngIf="searchFilters().includes('vr_format')">
+              <label i18n class="form-label select-label" for="context-termSearch-ccvmFilters-vr_format">Video Format</label>
               <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>
@@ -227,8 +226,8 @@
                 </ng-container> 
               </select>
             </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>
+            <div class="col mt-3" *ngIf="searchFilters().includes('bib_level')">
+              <label i18n class="form-label select-label" for="context-termSearch-ccvmFilters-bib_level">Bibliographic Level</label>
               <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>
@@ -237,8 +236,8 @@
                 </ng-container> 
               </select>
             </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>
+            <div class="col mt-3" *ngIf="searchFilters().includes('lit_form')">
+              <label i18n class="form-label select-label" for="context-termSearch-ccvmFilters-lit_form">Literary Form</label>
               <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>
@@ -247,8 +246,8 @@
                 </ng-container> 
               </select>
             </div>
-            <div class="col-lg-3 mt-3">
-              <label i18n class="select-label" for="context-termSearch-copyLocations">Shelving Location</label>
+            <div class="col mt-3">
+              <label i18n class="form-label select-label" for="context-termSearch-copyLocations">Shelving Location</label>
               <select class="form-select" id="context-termSearch-copyLocations"
                 [(ngModel)]="context.termSearch.copyLocations" multiple="true">
                 <option value='' i18n>All Shelving Locations</option>
@@ -258,10 +257,10 @@
               </select>
             </div>
           </div>
-          <div class="row mt-3" *ngIf="showFilters()">
-            <div class="col-lg-12">
+          <div class="row row-cols-auto mt-3" *ngIf="showFilters()">
+            <div class="col">
               <div class="form-inline">
-                <label for="pub-date1-input" i18n>Publication Year is</label>
+                <label class="form-label" for="pub-date1-input" i18n>Publication Year is</label>
                 <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>
@@ -284,9 +283,9 @@
       <li role="presentation" [ngbNavItem]="'ident'">
         <a i18n ngbNavLink role="tab">Numeric Search</a>
         <ng-template ngbNavContent>
-          <div class="row mt-2 gx-3 row-cols-auto justify-content-start align-items-center">
-            <label class="form-label col" for="ident-type" i18n>Query Type</label>
+          <div class="row mt-1 gx-3 row-cols-auto">
             <div class="col">
+              <label class="form-label col-form-label" for="ident-type" i18n>Query Type</label>
               <select class="form-select" name="ident-type"
                 [(ngModel)]="context.identSearch.queryType">
                 <option i18n value="identifier|isbn">ISBN</option>
@@ -297,8 +296,9 @@
                 <option i18n value="item_barcode">Item Barcode</option>
               </select>
             </div>
-            <label for="ident-value" class="form-label col ms-2" i18n>Value</label>
             <div class="col">
+              <label for="ident-value" class="form-label col-form-label" i18n>Value</label>
+            
               <input name="ident-value" id='ident-query-input' 
                 type="text" class="form-control"
                 [(ngModel)]="context.identSearch.value"
@@ -311,26 +311,26 @@
       <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 justify-content-start align-items-center" 
+          <div class="mt-1">
+              <div class="row mt-2 gx-3 row-cols-auto" 
                 *ngFor="let q of context.marcSearch.values; let idx = index; trackBy:trackByIdx">
-                <label class="form-label col" for="marc-tag-{{idx}}" i18n>Tag</label>
-                <div class="col p-0">
-                  <input class="form-control" size="3" type="text" 
+                <label class="form-label col-form-label" for="marc-tag-{{idx}}" i18n>Tag</label>
+                <div class="col ps-0">
+                  <input class="form-control ms-0" 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 ms-2" for="marc-subfield-{{idx}}" i18n>Subfield</label>
-                <div class="col p-0">
-                  <input class="form-control" size="1" type="text" 
+                <label class="form-label col-form-label" for="marc-subfield-{{idx}}" i18n>Subfield</label>
+                <div class="col ps-0">
+                  <input class="form-control ms-0" size="1" type="text" 
                     name="marc-subfield-{{idx}}"
                     [(ngModel)]="context.marcSearch.subfields[idx]"
                     (keyup.enter)="searchByForm()"/>
                 </div>
-                <label class="form-label col ms-2"  for="marc-value-{{idx}}" i18n>Value</label>
-                <div class="col p-0">
-                  <input class="form-control" type="text" name="marc-value-{{idx}}"
+                <label class="form-label col-form-label"  for="marc-value-{{idx}}" i18n>Value</label>
+                <div class="col ps-0">
+                  <input class="form-control ms-0" type="text" name="marc-value-{{idx}}"
                     [(ngModel)]="context.marcSearch.values[idx]" 
                     (keyup.enter)="searchByForm()"/>
                 </div>
@@ -362,10 +362,10 @@
       <li role="presentation" [ngbNavItem]="'browse'">
         <a i18n ngbNavLink role="tab">Browse</a>
         <ng-template ngbNavContent>
-          <div class="row mt-2 gx-3 row-cols-auto justify-content-start align-items-center">
-            <label class="form-label col" for="field-class" i18n>Browse for</label>
-            <div class="col">
-              <select class="form-control" name="field-class"
+          <div class="row gx-3 row-cols-auto">
+            <label class="form-label col-form-label" for="field-class" i18n>Browse for</label>
+            <div class="col ps-0">
+              <select class="form-select ms-0" name="field-class"
                 [(ngModel)]="context.browseSearch.fieldClass">
                 <option i18n value='title'>Title</option>
                 <option i18n value='author'>Author</option>
@@ -373,8 +373,8 @@
                 <option i18n value='series'>Series</option>
               </select>
             </div>
-            <label class="form-label col ms-2" for="query"> starting with </label>
-            <div class="col">
+            <label class="form-label col-form-label" for="query"> starting with </label>
+            <div class="col ps-0">
               <input type="text" class="form-control" 
                 id='browse-term-input' name="query"
                 [(ngModel)]="context.browseSearch.value"
@@ -387,12 +387,12 @@
       <li role="presentation" [ngbNavItem]="'cnbrowse'">
         <a i18n ngbNavLink role="tab">Shelf Browse</a>
         <ng-template ngbNavContent>
-          <div class="row mt-2 gx-3 row-cols-auto justify-content-start align-items-center">
-            <label class="form-label col" for="cnbrowse-term-input" i18n>
+          <div class="row gx-3 row-cols-auto">
+            <label class="form-label col-form-label" for="cnbrowse-term-input" i18n>
               Browse Call Numbers starting with 
             </label>
-            <div class="col">
-              <input type="text" class="form-control" 
+            <div class="col ps-0">
+              <input type="text" class="form-control ms-2" 
                 id='cnbrowse-term-input' name="query"
                 [(ngModel)]="context.cnBrowseSearch.value"
                 (keyup.enter)="searchByForm()"
@@ -417,7 +417,7 @@
                 [initialOrg]="context.searchOrg"
                 [placeholder]="'Library'" >
               </eg-org-select>
-              <button class="btn btn-success mx-1" type="button"
+              <button class="btn btn-success me-1 ms-1" type="button"
                 [disabled]="searchIsActive()"
                 (click)="context.pager.offset=0;searchByForm()" i18n>
                 Search