LP2016742 <table> for shelving locations (staff)

Replaces div-based markup with a table for the shelving locations in the
staff catalog search results.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.css
index 9566092..ab8bbf6 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.css
@@ -1,4 +1,3 @@
-
 /**
  * Force the jacket image column to consume a consistent amount of
  * horizontal space, while allowing some room for the browser to
@@ -14,6 +13,136 @@
     max-width: 100px;
 }
 
+.shelving-locations {
+    margin-inline-start: calc(var(--bs-gutter-x) * .5);
+    padding-inline-start: 0;
+    width: auto;
+}
+
+[role="region"][aria-labelledby][tabindex]:focus-visible table {
+    outline: 2px solid #0A58CA;
+    outline-offset: 5px;
+}
+
+.shelving-locations table.table {
+    border: 1px solid rgb(222, 226, 230);
+    caption-side: top;
+    margin-block-start: 1rem;
+    table-layout: auto;
+    white-space: normal;
+    width: revert;
+}
+
+table caption {
+    color: #000;
+    font-weight: bold;
+    caption-side: top;
+}
+
+.shelving-locations .table> :not(:first-child) {
+    border-top: revert;
+}
+
+table th,
+table td {
+    padding: .2rem 1rem .2rem .2rem;
+}
+
+table.compact th,
+table.compact td {
+    line-height: 1.4;
+    padding: .1rem .6rem .1rem .1rem;
+}
+
+table.wide th,
+table.wide td {
+    padding: .5rem 1rem .5rem .5rem;
+}
+
+table thead th {
+    border-bottom: 1px solid rgba(0, 0, 0, .125);
+}
+
+table th {
+    background-color: rgba(0, 0, 0, .03);
+    font-weight: 600;
+    vertical-align: bottom;
+}
+
+table td {
+    vertical-align: top;
+}
+
+.org-unit,
+.callnumber,
+.timestamp {
+    font-variant-numeric: tabular-nums lining-nums;
+}
+
+@media (min-width: 640px) {
+
+    /* pad left with the jacket column (120px) plus result number and checkbox */
+    /* use margin instead of padding for sensible :focus-visible outline */
+    .shelving-locations {
+        margin-inline-start: calc(120px + 3rem);
+        padding: 0;
+    }
+}
+
+@media (max-width: 480px) {
+
+    .shelving-locations table.table,
+    .shelving-locations table caption,
+    .shelving-locations table tbody {
+        border: none;
+        display: block;
+        width: 100%;
+    }
+
+    /* emulate .visually-hidden */
+    .shelving-locations table thead {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        padding: 0 !important;
+        padding-right: 0px;
+        margin: -1px !important;
+        overflow: hidden !important;
+        clip: rect(0, 0, 0, 0) !important;
+        white-space: nowrap !important;
+        border: 0 !important;
+    }
+
+    .shelving-locations table tr {
+        align-items: flex-start;
+        border: none;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0 1ch;
+        padding: 0 0 1rem;
+    }
+
+    .shelving-locations table th,
+    .shelving-locations table td {
+        background: none;
+        border: none;
+        display: inline-block;
+        flex-basis: auto;
+        flex-grow: 0;
+        padding: 0;
+    }
+
+    .shelving-locations table .callnumber {
+        flex-basis: 100%;
+    }
+
+    .shelving-locations table .due-date span:before {
+        content: attr(title);
+        display: inline-block;
+        margin-inline-start: 2ch;
+        margin-inline-end: 1ch;
+    }
+}
 .bib-field-title {
     font-size: .88rem;
     font-weight: inherit;

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 b100706..ba4c265 100644 (file)
--- 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
@@ -238,35 +238,43 @@
       </div>
     </div><!-- row -->
     <div class="row" *ngIf="searchContext.showResultExtras && summary.copies">
-      <div class="col-lg-12 mt-2">
-        <div class="w-auto ml-2 mr-2">
-          <ng-container *ngIf="summary.copies.length">
-            <div class="row p-1 font-weight-bold border-top">
-              <div class="col-lg-2" i18n>Library</div>
-              <div class="col-lg-3" i18n>Shelving location</div>
-              <div class="col-lg-3" i18n>Call number</div>
-              <div class="col-lg-2" i18n>Status</div>
-              <div class="col-lg-2" i18n>Due date</div>
-            </div>
-            <div class="row p-1 mt-1 mb-1 border-top" *ngFor="let copy of summary.copies">
-              <div class="col-lg-2" i18n>{{copy.circ_lib_sn}}</div>
-              <div class="col-lg-3" i18n>{{copy.copy_location}}</div>
-              <div class="col-lg-3" i18n>
+      <div class="shelving-locations" role="region" aria-describedby="caption{{index}}" tabindex="0">
+        <table class="table" role="table" *ngIf="summary.copies.length">
+          <caption id="caption{{index}}" *ngIf="summary.copies.length" i18n>
+            {{summary.copies.length}} Shelving Locations
+          </caption>
+          <thead role="rowgroup">
+            <tr>
+              <th scope="col" role="columnheader" class="shelving-library org-unit" i18n>Library</th>
+              <th scope="col" role="columnheader" class="copy-location" i18n>Shelving location</th>
+              <th scope="col" role="columnheader" class="callnumber" i18n>Call number</th>
+              <th scope="col" role="columnheader" class="status" i18n>Status</th>
+              <th scope="col" role="columnheader" class="due-date timestamp" i18n>Due date</th>
+            </tr>
+          </thead>
+          <tbody role="rowgroup">
+            <tr role="row" *ngFor="let copy of summary.copies">
+              <th role="rowheader" class="shelving-library org-unit" i18n>{{copy.circ_lib_sn}}</th>
+              <td role="cell" class="copy-location" i18n>{{copy.copy_location}}</td>
+              <td role="cell" class="callnumber" i18n>
                 {{copy.call_number_prefix_label}} 
                 {{copy.call_number_label}}
                 {{copy.call_number_suffix_label}}
-              </div>
-              <div class="col-lg-2" i18n>{{copy.copy_status}}</div>
-              <div class="col-lg-2" *ngIf="copy.due_date">
-                {{copy.due_date | date:'shortDate'}}
-              </div>
-            </div>
-          </ng-container>
-          <ng-container *ngIf="!summary.copies.length && !summary.eResourceUrls.length">
-            <span class="font-italic" i18n>No Items To Display</span>
-          </ng-container>
-        </div>
+              </td>
+              <td role="cell" class="status" i18n>{{copy.copy_status}}</td>
+              <td role="cell" class="due-date timestamp" i18n>
+                <ng-container *ngIf="copy.due_date">
+                  <span title="Due:" i18n-title>{{copy.due_date | date:'shortDate'}}</span>
+                </ng-container>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
+
+      <ng-container *ngIf="!summary.copies.length && !summary.eResourceUrls.length">
+        <p class="fst-italic" i18n>No Items To Display</p>
+      </ng-container>
     </div>
   </div><!-- card-body -->
 </div><!-- card -->