From 714225a312f1ab258b7dcab5aeb216992ad49044 Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Wed, 9 Nov 2022 15:01:43 -0600
Subject: [PATCH] lp1959010 CSS and layout tweaks

* More layout and CSS tweaking
* list style fix
* left margin fix
* UL margin fix

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Signed-off-by: Jason Etheridge <jason@EquinoxOLI.org>
Signed-off-by: Mary Llewellyn <mllewell@biblio.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
---
 .../bib-staff-view/bib-staff-view.component.css    |  21 ++-
 .../bib-staff-view/bib-staff-view.component.html   | 148 ++++++++++-----------
 2 files changed, 92 insertions(+), 77 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.css b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.css
index 668b919889..95777f647c 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.css
@@ -1,7 +1,22 @@
 .eg-bib-staff-view {
-    padding-top: 1rem;
+    padding-top: 0.5rem;
 }
 
-.eg-bib-staff-view .list-group-item {
-    padding: .25rem .25rem 0;
+.eg-bib-staff-view .row {
+    margin-bottom: 0.5rem;
+}
+
+.eg-bib-staff-view > .row:first-child {
+    margin-left: 0;
+}
+
+.eg-bib-staff-view .bib-details ul {
+    margin-bottom: 0;
+    padding-left: 0;
+}
+
+.eg-bib-staff-view .bib-details li {
+    border: 0;
+    list-style: none;
+    padding: .25rem .25rem 0 0;
 }
diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html
index c42a68d8ed..65cbc4df59 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html
@@ -6,8 +6,8 @@
 
             <!-- Col 1, Title Row -->
             <div class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Title:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Title:</div>
+                <div class="col-sm-8 bib-details">
                     <a *ngIf="summary.display.title" href="/eg2/staff/catalog/search?query={{summary.display.title}}&fieldClass=title&joinOp=&matchOp=contains&dateOp=is">
                         {{summary.display.title}}
                     </a>
@@ -16,10 +16,10 @@
 
             <!-- Col 1, Series Title Row -->
             <div *ngIf="summary.display.series_title" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Series Title:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Series Title:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _series of summary.display.series_title" class="list-group-item">
+                        <li *ngFor="let _series of summary.display.series_title">
                             <a href="/eg2/staff/catalog/search?query={{_series}}&fieldClass=series&joinOp=&matchOp=contains&dateOp=is">
                                 {{_series}}
                             </a>
@@ -30,8 +30,8 @@
 
             <!-- Col 1, Author Row -->
             <div class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Author:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Author:</div>
+                <div class="col-sm-8 bib-details">
                     <a *ngIf="summary.display.author" href="/eg2/staff/catalog/search?query={{summary.display.author}}&fieldClass=author&joinOp=&matchOp=contains&dateOp=is">
                         {{summary.display.author}}
                     </a>
@@ -40,10 +40,10 @@
 
             <!-- Col 1, Creator Row -->
             <div *ngIf="summary.display.creators" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Creator:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Creator:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _creator of summary.display.creators" class="list-group-item">
+                        <li *ngFor="let _creator of summary.display.creators">
                             <a href="/eg2/staff/catalog/search?query={{_creator}}&fieldClass=author&joinOp=&matchOp=contains&dateOp=is">
                                 {{_creator}}
                             </a>
@@ -54,10 +54,10 @@
 
             <!-- Col 1, Performer Row -->
             <div *ngIf="summary.display.performers" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Performer:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Performer:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _performer of summary.display.performers" class="list-group-item">
+                        <li *ngFor="let _performer of summary.display.performers">
                             <a href="/eg2/staff/catalog/search?query={{_performer}}&fieldClass=author&joinOp=&matchOp=contains&dateOp=is">
                                 {{_performer}}
                             </a>
@@ -68,26 +68,26 @@
 
             <!-- Col 1, Edition Row -->
             <div *ngIf="summary.display.edition" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Edition:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Edition:</div>
+                <div class="col-sm-8 bib-details">
                     {{summary.display.edition}}
                 </div>
             </div><!-- end of Col 1, Edition Row -->
 
             <!-- Col 1, Publisher Row -->
             <div *ngIf="summary.display.publisher" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Publisher:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Publisher:</div>
+                <div class="col-sm-8 bib-details">
                     {{summary.display.publisher}}
                 </div>
             </div><!-- end of Col 1, Publisher Row -->
 
             <!-- Col 1, Production Credit Row -->
             <div *ngIf="summary.display.production_credits" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Production Credit:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Production Credit:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _credit of summary.display.production_credits" class="list-group-item">
+                        <li *ngFor="let _credit of summary.display.production_credits">
                             <a href="/eg2/staff/catalog/search?query={{_credit}}&fieldClass=author&joinOp=&matchOp=contains&dateOp=is">
                                 {{_credit}}
                             </a>
@@ -98,18 +98,18 @@
 
             <!-- Col 1, Type of Resource Row -->
             <div *ngIf="summary.display.type_of_resource" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Type of Resource:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Type of Resource:</div>
+                <div class="col-sm-8 bib-details">
                     {{summary.display.type_of_resource}}
                 </div>
             </div><!-- end of Col 1, Type of Resource Row -->
 
             <!-- Col 1, Physical Description Row -->
             <div *ngIf="summary.display.physical_description" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Physical Description:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Physical Description:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _desc of summary.display.physical_description" class="list-group-item">
+                        <li *ngFor="let _desc of summary.display.physical_description">
                             {{_desc}}
                         </li>
                     </ul>
@@ -118,10 +118,10 @@
 
             <!-- Col 1, General Note Row -->
             <div *ngIf="summary.display.general_note" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>General Note:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>General Note:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _note of summary.display.general_note" class="list-group-item">
+                        <li *ngFor="let _note of summary.display.general_note">
                             {{_note}}
                         </li>
                     </ul>
@@ -130,10 +130,10 @@
 
             <!-- Col 1, Bibliography Row -->
             <div *ngIf="summary.display.bibliography" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Bibliography:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Bibliography:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _bibliography of summary.display.bibliography" class="list-group-item">
+                        <li *ngFor="let _bibliography of summary.display.bibliography">
                             {{_bibliography}}
                         </li>
                     </ul>
@@ -142,18 +142,18 @@
 
             <!-- Col 1, TOC Row -->
             <div *ngIf="summary.display.toc" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Table of Contents:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Table of Contents:</div>
+                <div class="col-sm-8 bib-details">
                     {{summary.display.toc}}
                 </div>
             </div><!-- end of Col 1, TOC Row -->
 
             <!-- Col 1, Thesis Row -->
             <div *ngIf="summary.display.thesis" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Thesis:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Thesis:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _thesis of summary.display.thesis" class="list-group-item">
+                        <li *ngFor="let _thesis of summary.display.thesis">
                             {{_thesis}}
                         </li>
                     </ul>
@@ -166,10 +166,10 @@
 
             <!-- Col 2, ISBN Row -->
             <div *ngIf="summary.display.isbn" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>ISBN:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>ISBN:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _isbn of summary.display.isbn" class="list-group-item">
+                        <li *ngFor="let _isbn of summary.display.isbn">
                             <a href="/eg2/staff/catalog/search?identQuery={{_isbn}}&identQueryType=identifier%7Cisbn">
                                 {{_isbn}}
                             </a>
@@ -180,10 +180,10 @@
 
             <!-- Col 1, ISSN Row -->
             <div *ngIf="summary.display.issn" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>ISSN:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>ISSN:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _issn of summary.display.issn" class="list-group-item">
+                        <li *ngFor="let _issn of summary.display.issn">
                             <a href="/eg2/staff/catalog/search?identQuery={{_issn}}&identQueryType=identifier%7Cissn">
                                 {{_issn}}
                             </a>
@@ -194,10 +194,10 @@
 
             <!-- Col 1, UPC Row -->
             <div *ngIf="summary.display.upc" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>UPC:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>UPC:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _upc of summary.display.upc" class="list-group-item">
+                        <li *ngFor="let _upc of summary.display.upc">
                             <a href="/eg2/staff/catalog/search?identQuery={{_upc}}&identQueryType=identifier%7Cupc">
                                 {{_upc}}
                             </a>
@@ -208,15 +208,15 @@
 
             <!-- Col 1, Hold and Copy Counts Row -->
             <div class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Hold and Copy Counts:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Hold and Copy Counts:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li class="list-group-item"><span i18n>{{summary.holdCount}} hold requests</span></li>
-                        <li class="list-group-item">
+                        <li><span i18n>{{summary.holdCount}} hold requests</span></li>
+                        <li>
                             <span i18n *ngIf=" summary.isHoldable">Record is holdable.</span>
                             <span i18n *ngIf="!summary.isHoldable">Record is not holdable.</span>
                         </li>
-                        <li *ngFor="let _count of summary.holdingsSummary" class="list-group-item">
+                        <li *ngFor="let _count of summary.holdingsSummary">
                             <span i18n>{{_count.available}} of {{_count.count}} copies available at {{orgName(_count.org_unit)}}.</span>
                         </li>
                     </ul>
@@ -225,11 +225,11 @@
 
             <!-- Col 1, Formats and Editions Row -->
             <div class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Formats and Editions:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Formats and Editions:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
                         <ng-container *ngIf="summary.staffViewMetabibAttributes.icon_format">
-                            <li *ngFor="let _x of summary.staffViewMetabibAttributes.icon_format | keyvalue" class="list-group-item">
+                            <li *ngFor="let _x of summary.staffViewMetabibAttributes.icon_format | keyvalue">
                                 <a href="/eg2/staff/catalog/search?query=from_metarecord({{summary.staffViewMetabibId}}) icon_format({{_x.key}})">
                                     {{_x.value.label}}
                                 </a>
@@ -237,7 +237,7 @@
                             </li>
                         </ng-container>
                         <ng-container *ngIf="summary.staffViewMetabibAttributes.item_lang">
-                            <li *ngFor="let _x of summary.staffViewMetabibAttributes.item_lang | keyvalue" class="list-group-item">
+                            <li *ngFor="let _x of summary.staffViewMetabibAttributes.item_lang | keyvalue">
                                 <a href="/eg2/staff/catalog/search?query=from_metarecord({{summary.staffViewMetabibId}}) item_lang({{_x.key}})">
                                     {{_x.value.label}}
                                 </a>
@@ -254,18 +254,18 @@
 
             <!-- Col 3, Abstract Row -->
             <div *ngIf="summary.display.abstract" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Abstract:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Abstract:</div>
+                <div class="col-sm-8 bib-details">
                     {{summary.display.abstract}}
                 </div>
             </div><!-- end of Col 3, Abstract Row -->
 
             <!-- Col 3, Subject Row -->
             <div *ngIf="summary.display.subject" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Subject:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Subject:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _subj of summary.display.subject" class="list-group-item">
+                        <li *ngFor="let _subj of summary.display.subject">
                             <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
                                 {{_subj}}
                             </a>
@@ -276,10 +276,10 @@
 
             <!-- Col 3, Subject Name Row -->
             <div *ngIf="summary.display.subject_name" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Subject Name:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Subject Name:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _subj of summary.display.subject_name" class="list-group-item">
+                        <li *ngFor="let _subj of summary.display.subject_name">
                             <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
                                 {{_subj}}
                             </a>
@@ -290,10 +290,10 @@
 
             <!-- Col 3, Subject Topic Row -->
             <div *ngIf="summary.display.subject_topic" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Subject Topic:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Subject Topic:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _subj of summary.display.subject_topic" class="list-group-item">
+                        <li *ngFor="let _subj of summary.display.subject_topic">
                             <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
                                 {{_subj}}
                             </a>
@@ -304,10 +304,10 @@
 
             <!-- Col 3, Subject Geographic Row -->
             <div *ngIf="summary.display.subject_geographic" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Subject Geographic:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Subject Geographic:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _subj of summary.display.subject_geographic" class="list-group-item">
+                        <li *ngFor="let _subj of summary.display.subject_geographic">
                             <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
                                 {{_subj}}
                             </a>
@@ -318,10 +318,10 @@
 
             <!-- Col 3, Subject Temporal Row -->
             <div *ngIf="summary.display.subject_temporal" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Subject Temporal:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Subject Temporal:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _subj of summary.display.subject_temporal" class="list-group-item">
+                        <li *ngFor="let _subj of summary.display.subject_temporal">
                             <a href="/eg2/staff/catalog/search?query={{_subj}}&fieldClass=subject&joinOp=&matchOp=contains&dateOp=is">
                                 {{_subj}}
                             </a>
@@ -332,10 +332,10 @@
 
             <!-- Col 3, Genre Row -->
             <div *ngIf="summary.display.genre" class="row">
-                <div class="col-sm-6 font-weight-bold" i18n>Genre:</div>
-                <div class="col-sm-6">
+                <div class="col-sm-4 font-weight-bold bib-details-title" i18n>Genre:</div>
+                <div class="col-sm-8 bib-details">
                     <ul>
-                        <li *ngFor="let _genre of summary.display.genre" class="list-group-item">
+                        <li *ngFor="let _genre of summary.display.genre">
                             {{_genre}}
                         </li>
                     </ul>
-- 
2.11.0