From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Tue, 21 Mar 2023 18:50:52 +0000 (+0000)
Subject: Shelving locations as tables in search results
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=3401902b8f8eace31122a72124e5aaadfc5aef34;p=working%2FEvergreen.git

Shelving locations as tables in 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 2930138605..c8917ba4a7 100644
--- 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
@@ -13,3 +13,131 @@
     max-height: 158px;
     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;
+}
+
+.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;
+    }
+}
\ No newline at end of file
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 59a93076c8..1bbc67b72d 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
@@ -220,7 +220,7 @@
         </div>
       </div><!-- col -->
     </div><!-- row -->
-    <div class="row" *ngIf="searchContext.showResultExtras && summary.eResourceUrls.length">
+    <div class="row electronic-resources" *ngIf="searchContext.showResultExtras && summary.eResourceUrls.length">
       <div class="col-lg-12 mt-2">
         <div class="w-auto ms-2 me-2">
           <div class="row p-1 mt-1 mb-1 border-top" *ngFor="let url of summary.eResourceUrls">
@@ -240,35 +240,43 @@
       </div>
     </div><!-- row -->
     <div class="row" *ngIf="searchContext.showResultExtras && summary.copies">
-      <div class="col-lg-12 mt-2">
-        <div class="w-auto ms-2 me-2">
-          <ng-container *ngIf="summary.copies.length">
-            <div class="row p-1 fw-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="fst-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 -->