From 6edf4094dd03b0d9c1689c05105f7e184c31bdfb Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Mon, 16 Apr 2018 15:06:47 +0000
Subject: [PATCH] LP#1626157 improve default small-screen breaking

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../share/accesskey/accesskey-info.component.html  | 12 +++++------
 .../workstations/workstations.component.html       | 10 ++++-----
 .../app/staff/catalog/result/facets.component.html |  4 ++--
 .../app/staff/catalog/result/record.component.html | 24 +++++++++++-----------
 .../staff/catalog/result/results.component.html    | 10 ++++-----
 .../app/staff/catalog/search-form.component.html   | 24 +++++++++++-----------
 .../circ/patron/bcsearch/bcsearch.component.html   |  2 +-
 .../src/eg2/src/app/staff/login.component.html     | 16 +++++++--------
 .../src/eg2/src/app/staff/splash.component.html    |  8 ++++----
 9 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
index b221c1c904..cbb00887ce 100644
--- a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
+++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
@@ -9,14 +9,14 @@
   </div>
   <div class="modal-body">
     <div class="row border-bottom">
-      <div class="col-3 p-1 border-right text-center" i18n>Command</div>
-      <div class="col-6 p-1 border-right" i18n>Action</div>
-      <div class="col-3 p-1" i18n>Context</div>
+      <div class="col-lg-3 p-1 border-right text-center" i18n>Command</div>
+      <div class="col-lg-6 p-1 border-right" i18n>Action</div>
+      <div class="col-lg-3 p-1" i18n>Context</div>
     </div>
     <div class="row border-bottom" *ngFor="let a of assignments()">
-      <div class="col-3 p-1 border-right text-center">{{a.key}}</div>
-      <div class="col-6 p-1 border-right">{{a.desc}}</div>
-      <div class="col-3 p-1">{{a.ctx}}</div>
+      <div class="col-lg-3 p-1 border-right text-center">{{a.key}}</div>
+      <div class="col-lg-6 p-1 border-right">{{a.desc}}</div>
+      <div class="col-lg-3 p-1">{{a.ctx}}</div>
     </div>
   </div>
   <div class="modal-footer">
diff --git a/Open-ILS/src/eg2/src/app/staff/admin/workstation/workstations/workstations.component.html b/Open-ILS/src/eg2/src/app/staff/admin/workstation/workstations/workstations.component.html
index d9007234a8..cf5d89b751 100644
--- a/Open-ILS/src/eg2/src/app/staff/admin/workstation/workstations/workstations.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/workstation/workstations/workstations.component.html
@@ -10,7 +10,7 @@
 </eg-confirm-dialog>
 
 <div class="row">
-  <div class="col-8 offset-1 mt-3">
+  <div class="col-lg-8 offset-1 mt-3">
     <div class="alert alert-warning" *ngIf="removeWorkstation" i18n>
       Workstation {{removeWorkstation}} is no longer valid.  Removing registration.
     </div>
@@ -22,7 +22,7 @@
       <div class="col" i18n>Register a New Workstation For This Browser</div>
     </div>
     <div class="row mt-2">
-      <div class="col-2">
+      <div class="col-lg-2">
         <eg-org-select 
           (onChange)="orgOnChange($event)"
           [hideOrgs]="hideOrgs"
@@ -30,7 +30,7 @@
           [placeholder]="'Owner'" >
         </eg-org-select>
       </div>
-      <div class="col-6">
+      <div class="col-lg-6">
         <div class="input-group">
           <input type='text'
             class='form-control'
@@ -55,7 +55,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-8">
+      <div class="col-lg-8">
         <select class="form-control" [(ngModel)]="selectedName">
           <option *ngFor="let ws of workstations" value="{{ws.name}}">
             <span *ngIf="ws.name == defaultName" i18n>
@@ -69,7 +69,7 @@
       </div>
     </div>
     <div class="row mt-2">
-      <div class="col-md-6">
+      <div class="col-lg-6">
         <button i18n class="btn btn-success" 
           (click)="useNow()" [disabled]="!selected">
           Use Now
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.html
index 188ae3091e..9681747043 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.html
@@ -24,14 +24,14 @@
                 *ngFor="
                   let value of searchContext.result.facetData[facetConf.facetClass][name].valueList | slice:0:facetConfig.displayCount">
                 <div class="row">
-                  <div class="col-9">
+                  <div class="col-lg-9">
                     <a class="card-link"
                       href='javascript:;'
                       (click)="applyFacet(facetConf.facetClass, name, value.value)">
                       {{value.value}}
                     </a>
                   </div>
-                  <div class="col-3">{{value.count}}</div>
+                  <div class="col-lg-3">{{value.count}}</div>
                 </div>
               </li>
             </ul>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html
index ea18762be4..1048211238 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html
@@ -4,19 +4,19 @@
   egDateFilter's
 -->
 
-<div class="col-12 card tight-card mb-2 bg-light">
+<div class="col-lg-12 card tight-card mb-2 bg-light">
   <div class="card-body">
     <div class="row">
-      <div class="col-1">
+      <div class="col-lg-1">
         <!-- TODO router links -->
         <a href="./cat/catalog/record/{{bibSummary.id}}">
           <img style="height:80px"
             src="/opac/extras/ac/jacket/small/r/{{bibSummary.id}}"/>
         </a>
       </div>
-      <div class="col-5">
+      <div class="col-lg-5">
         <div class="row">
-          <div class="col-12 font-weight-bold">
+          <div class="col-lg-12 font-weight-bold">
             <!-- nbsp allows the column to take shape when no value exists -->
             <span class="font-weight-light font-italic">
               #{{index + 1 + searchContext.pager.offset}}
@@ -28,7 +28,7 @@
           </div>
         </div>
         <div class="row pt-2">
-          <div class="col-12">
+          <div class="col-lg-12">
             <!-- nbsp allows the column to take shape when no value exists -->
             <a href="javascript:void(0)"
               (click)="searchAuthor(bibSummary)">
@@ -37,7 +37,7 @@
           </div>
         </div>
         <div class="row pt-2">
-          <div class="col-12">
+          <div class="col-lg-12">
             <span *ngIf="bibSummary.ccvms.icon_format">
               <img class="pad-right-min"
                 src="/images/format_icons/icon_format/{{bibSummary.ccvms.icon_format.code}}.png"/>
@@ -48,7 +48,7 @@
           </div>
         </div>
       </div>
-      <div class="col-2">
+      <div class="col-lg-2">
         <div class="row" [ngClass]="{'pt-2':copyIndex > 0}" 
           *ngFor="let copyCount of bibSummary.copyCounts; let copyIdx = index">
           <div class="w-100" *ngIf="copyCount.type == 'staff'">
@@ -63,7 +63,7 @@
           </div>
         </div>
       </div>
-      <div class="col-1">
+      <div class="col-lg-1">
         <div class="row">
           <div class="w-100">
             TCN: {{bibSummary.tcn_value}}
@@ -75,9 +75,9 @@
           </div>
         </div>
       </div>
-      <div class="col-3">
+      <div class="col-lg-3">
         <div class="row">
-          <div class="col-12">
+          <div class="col-lg-12">
             <div class="float-right small-text-1">
               Created {{bibSummary.create_date | date:'shortDate'}} by
               <!-- creator if fleshed after the initial data set is loaded -->
@@ -91,7 +91,7 @@
           </div>
         </div>
         <div class="row pt-2">
-          <div class="col-12">
+          <div class="col-lg-12">
             <div class="float-right small-text-1">
               Edited {{bibSummary.edit_date | date:'shortDate'}} by
               <a *ngIf="bibSummary.editor.usrname" target="_self" 
@@ -103,7 +103,7 @@
           </div>
         </div>
         <div class="row pt-2">
-          <div class="col-12">
+          <div class="col-lg-12">
             <div class="float-right">
               <span>
                 <button (click)="placeHold()"
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
index be7c36aec8..f357a6c579 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
@@ -1,21 +1,21 @@
 
 <div id="staff-catalog-results-container" *ngIf="searchIsDone()">
   <div class="row">
-    <div class="col-2"><!--match pagination margin-->
+    <div class="col-lg-2"><!--match pagination margin-->
       <h3 i18n>Search Results ({{searchContext.result.count}})</h3>
     </div>
-    <div class="col-1"></div>
-    <div class="col-9">
+    <div class="col-lg-1"></div>
+    <div class="col-lg-9">
       <div class="float-right">
 				<eg-catalog-result-pagination></eg-catalog-result-pagination>
       </div>
     </div>
   </div>
 	<div class="row mt-2">
-		<div class="col-2">
+		<div class="col-lg-2">
       <eg-catalog-result-facets></eg-catalog-result-facets>
 		</div>
-		<div class="col-10">
+		<div class="col-lg-10">
 			<div *ngIf="searchContext.result">
 				<div *ngFor="let bibSummary of searchContext.result.records; let idx = index">
           <div *ngIf="bibSummary">
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 e02c3e6581..650c785f8c 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
@@ -4,7 +4,7 @@ TODO focus search input
 <div id='staffcat-search-form' class='pb-2 mb-3'>
   <div class="row"
     *ngFor="let q of searchContext.query; let idx = index; trackBy:trackByIdx">
-    <div class="col-9 d-flex">
+    <div class="col-lg-9 d-flex">
       <div class="flex-1">
         <div *ngIf="idx == 0">
           <select class="form-control" [(ngModel)]="searchContext.format">
@@ -71,7 +71,7 @@ TODO focus search input
         </button>
       </div>
     </div><!-- col -->
-    <div class="col-3">
+    <div class="col-lg-3">
       <div *ngIf="idx == 0" class="float-right">
         <button class="btn btn-success" type="button"
           [disabled]="searchIsActive()"
@@ -99,7 +99,7 @@ TODO focus search input
   </div><!-- row -->
 
   <div class="row">
-    <div class="col-9 d-flex">
+    <div class="col-lg-9 d-flex">
       <div class="flex-1">
         <eg-org-select 
           (onChange)="orgOnChange($event)"
@@ -148,7 +148,7 @@ TODO focus search input
         <!-- alignment -->
       </div>
     </div>
-    <div class="col-3">
+    <div class="col-lg-3">
       <div *ngIf="searchIsActive()">
         <div class="progress">
           <div class="progress-bar progress-bar-striped active w-100"
@@ -161,7 +161,7 @@ TODO focus search input
     </div>
   </div>
   <div class="row pt-2" *ngIf="showAdvanced()">
-    <div class="col-2">
+    <div class="col-lg-2">
       <select class="form-control"  multiple="true"
         [(ngModel)]="searchContext.ccvmFilters.item_type">
         <option value='' i18n>All Item Types</option>
@@ -169,7 +169,7 @@ TODO focus search input
           value="{{itemType.code()}}">{{itemType.value()}}</option>
       </select>
     </div>
-    <div class="col-2">
+    <div class="col-lg-2">
       <select class="form-control" multiple="true"
         [(ngModel)]="searchContext.ccvmFilters.item_form">
         <option value='' i18n>All Item Forms</option>
@@ -177,7 +177,7 @@ TODO focus search input
           value="{{itemForm.code()}}">{{itemForm.value()}}</option>
       </select>
     </div>
-    <div class="col-2">
+    <div class="col-lg-2">
       <select class="form-control" 
         [(ngModel)]="searchContext.ccvmFilters.item_lang" multiple="true">
         <option value='' i18n>All Languages</option>
@@ -185,7 +185,7 @@ TODO focus search input
           value="{{lang.code()}}">{{lang.value()}}</option>
       </select>
     </div>
-    <div class="col-2">
+    <div class="col-lg-2">
       <select class="form-control" 
         [(ngModel)]="searchContext.ccvmFilters.audience" multiple="true">
         <option value='' i18n>All Audiences</option>
@@ -195,7 +195,7 @@ TODO focus search input
     </div>
   </div>
   <div class="row pt-2" *ngIf="showAdvanced()">
-    <div class="col-2">
+    <div class="col-lg-2">
       <select class="form-control" 
         [(ngModel)]="searchContext.ccvmFilters.vr_format" multiple="true">
         <option value='' i18n>All Video Formats</option>
@@ -203,7 +203,7 @@ TODO focus search input
           value="{{vrFormat.code()}}">{{vrFormat.value()}}</option>
       </select>
     </div>
-    <div class="col-2">
+    <div class="col-lg-2">
       <select class="form-control" 
         [(ngModel)]="searchContext.ccvmFilters.bib_level" multiple="true">
         <option value='' i18n>All Bib Levels</option>
@@ -211,7 +211,7 @@ TODO focus search input
           value="{{bibLevel.code()}}">{{bibLevel.value()}}</option>
       </select>
     </div>
-    <div class="col-2">
+    <div class="col-lg-2">
       <select class="form-control" 
         [(ngModel)]="searchContext.ccvmFilters.lit_form" multiple="true">
         <option value='' i18n>All Literary Forms</option>
@@ -219,7 +219,7 @@ TODO focus search input
           value="{{litForm.code()}}">{{litForm.value()}}</option>
       </select>
     </div>
-    <div class="col-2">
+    <div class="col-lg-2">
       <i>Copy location filter goes here...</i>
     </div>
   </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/circ/patron/bcsearch/bcsearch.component.html b/Open-ILS/src/eg2/src/app/staff/circ/patron/bcsearch/bcsearch.component.html
index 58d5c4c3d5..e83cf9e9d8 100644
--- a/Open-ILS/src/eg2/src/app/staff/circ/patron/bcsearch/bcsearch.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/circ/patron/bcsearch/bcsearch.component.html
@@ -2,7 +2,7 @@
 <eg-staff-banner bannerText="Search for Patron by Barcode" i18n-bannerText>
 </eg-staff-banner>
 
-<div class="col-4">
+<div class="col-lg-4">
   <div class="input-group">
     <div class="input-group-prepend">
       <span class="input-group-text" i18n>Barcode:</span>
diff --git a/Open-ILS/src/eg2/src/app/staff/login.component.html b/Open-ILS/src/eg2/src/app/staff/login.component.html
index 58c2226b6f..dcf953fc98 100644
--- a/Open-ILS/src/eg2/src/app/staff/login.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/login.component.html
@@ -1,15 +1,15 @@
 <div class="container">
-  <div class="col-md-6 offset-md-3">
+  <div class="col-lg-6 offset-lg-3">
     <fieldset>
       <legend class="mb-0" i18n>Sign In</legend>
       <hr class="mt-1"/>
       <form (ngSubmit)="handleSubmit()" #loginForm="ngForm">
 
         <div class="form-group row">
-          <label class="col-md-4 text-right font-weight-bold" for="username" i18n>Username</label>
+          <label class="col-lg-4 text-right font-weight-bold" for="username" i18n>Username</label>
           <input 
             type="text" 
-            class="form-control col-md-8"
+            class="form-control col-lg-8"
             id="username" 
             name="username"
             required
@@ -20,10 +20,10 @@
         </div>
 
         <div class="form-group row">
-          <label class="col-md-4 text-right font-weight-bold" for="password" i18n>Password</label>
+          <label class="col-lg-4 text-right font-weight-bold" for="password" i18n>Password</label>
           <input 
             type="password" 
-            class="form-control col-md-8"
+            class="form-control col-lg-8"
             id="password" 
             name="password"
             required
@@ -34,9 +34,9 @@
         </div>
 
         <div class="form-group row" *ngIf="workstations && workstations.length">
-          <label class="col-md-4 text-right font-weight-bold" for="workstation" i18n>Workstation</label>
+          <label class="col-lg-4 text-right font-weight-bold" for="workstation" i18n>Workstation</label>
           <select 
-            class="form-control col-md-8" 
+            class="form-control col-lg-8" 
             id="workstation" 
             name="workstation"
             required
@@ -48,7 +48,7 @@
         </div>
 
         <div class="row">
-          <div class="col-md-8 offset-md-4 pl-0">
+          <div class="col-lg-8 offset-lg-4 pl-0">
             <button type="submit" class="btn btn-outline-dark" i18n>Sign in</button>
           </div>
         </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/splash.component.html b/Open-ILS/src/eg2/src/app/staff/splash.component.html
index 4846cc5e27..e2d97da40a 100644
--- a/Open-ILS/src/eg2/src/app/staff/splash.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/splash.component.html
@@ -13,13 +13,13 @@
 
   <!-- header icon -->
   <div class="row mb-3">
-    <div class="col-12 text-center">
+    <div class="col-lg-12 text-center">
       <img src="/images/portal/logo.png"/>
     </div>
   </div>
 
   <div class="row" id="splash-nav">
-    <div class="col-4">
+    <div class="col-lg-4">
       <div class="card">
         <div class="card-header bg-evergreen">
           <div class="panel-title text-center">Circulation and Patrons</div>
@@ -43,7 +43,7 @@
       </div>
     </div>
 
-    <div class="col-4">
+    <div class="col-lg-4">
       <div class="card">
         <div class="card-header bg-evergreen">
           <div class="panel-title text-center">Item Search and Cataloging</div>
@@ -87,7 +87,7 @@
       </div>
     </div>
 
-    <div class="col-4">
+    <div class="col-lg-4">
       <div class="card">
         <div class="card-header bg-evergreen">
           <div class="panel-title text-center">Administration</div>
-- 
2.11.0