LP2000482 Bootstrap 5: search form spacing
authorStephanie <stephanie.leary@equinoxoli.org>
Tue, 28 Feb 2023 23:14:49 +0000 (23:14 +0000)
committerStephanie <stephanie.leary@equinoxoli.org>
Tue, 28 Feb 2023 23:14:49 +0000 (23:14 +0000)
Signed-off-by: Stephanie <stephanie.leary@equinoxoli.org>
Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html

index 984a756..aaf30c9 100644 (file)
       <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="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="col">
               <select class="form-select" name="ident-type"
                 [(ngModel)]="context.identSearch.queryType">
                 <option i18n value="item_barcode">Item Barcode</option>
               </select>
             </div>
-            <label for="ident-value" class="form-label col-form-label" i18n>Value</label>
+            <label for="ident-value" class="form-label col ms-2" i18n>Value</label>
             <div class="col">
               <input name="ident-value" id='ident-query-input' 
                 type="text" class="form-control"
         <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-2 gx-3 row-cols-auto justify-content-start align-items-center
                 *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" 
+                <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" 
                     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" 
+                <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" 
                     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}}"
+                <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}}"
                     [(ngModel)]="context.marcSearch.values[idx]" 
                     (keyup.enter)="searchByForm()"/>
                 </div>
       <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="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 ms-2" name="field-class"
+              <select class="form-control" name="field-class"
                 [(ngModel)]="context.browseSearch.fieldClass">
                 <option i18n value='title'>Title</option>
                 <option i18n value='author'>Author</option>
                 <option i18n value='series'>Series</option>
               </select>
             </div>
-            <label class="form-label col-form-label" for="query"> starting with </label>
+            <label class="form-label col ms-2" for="query"> starting with </label>
             <div class="col">
               <input type="text" class="form-control" 
                 id='browse-term-input' name="query"
       <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>
+          <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>
               Browse Call Numbers starting with 
             </label>
             <div class="col">
-              <input type="text" class="form-control ms-2
+              <input type="text" class="form-control" 
                 id='cnbrowse-term-input' name="query"
                 [(ngModel)]="context.cnBrowseSearch.value"
                 (keyup.enter)="searchByForm()"