From 18f99a68e67df86cdd1cece2d434f2a351b205b5 Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Thu, 9 Mar 2023 16:08:40 +0000
Subject: [PATCH] LP2009865 Revised search result headings & source order

Revises the hierarchy of headings in the search results. In combination
with the H1 provided in in bug #1994711, the result is now:

h1. Staff Catalog
h2. Search Results (N)
(repeat for each result:)
h3. [Title] [Author]
h2. Facets
(repeat for each facet box:)
h3. [Facet title]

The source order of the results list and facet sidebar have been
swapped. The facets still appear on the left visually, but now fall
after the results in the document.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
Signed-off-by: Jane Sandberg <js7389@princeton.edu>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
---
 .../app/staff/catalog/result/facets.component.css    | 11 +++++++++++
 .../app/staff/catalog/result/facets.component.html   | 14 +++-----------
 .../src/app/staff/catalog/result/facets.component.ts |  3 ++-
 .../app/staff/catalog/result/record.component.css    | 15 +++++++++++++++
 .../app/staff/catalog/result/record.component.html   | 20 +++++++++-----------
 .../app/staff/catalog/result/results.component.css   | 15 +++++++++++++++
 .../app/staff/catalog/result/results.component.html  | 10 +++++-----
 .../app/staff/catalog/result/results.component.ts    |  3 ++-
 8 files changed, 62 insertions(+), 29 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.css
 create mode 100644 Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.css

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.css
new file mode 100644
index 0000000000..bc382e4341
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.css
@@ -0,0 +1,11 @@
+.facet-selected {
+  background-color: #DDD;
+}
+
+.card {
+  width: 100%;
+}
+
+.list-group-item {
+  padding: .5rem .75rem .5rem .75rem
+}
\ No newline at end of file
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 2c2cb14cdb..01f3192a81 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
@@ -1,22 +1,14 @@
-<style>
-  .facet-selected {
-    background-color: #DDD;
-  }
-  .card {
-    width: 100%;
-  }
-  .list-group-item {padding: .5rem .75rem .5rem .75rem}
-</style>
 <div *ngIf="searchContext.result.facetData">
+  <h2 class="sr-only" i18n>Facets</h2>
   <div *ngFor="let facetConf of facetConfig.display">
     <div *ngIf="searchContext.result.facetData[facetConf.facetClass]">
       <div *ngFor="let name of facetConf.facetOrder">
         <div class="row"
           *ngIf="searchContext.result.facetData[facetConf.facetClass][name]">
           <div class="card mb-2">
-            <h4 class="card-header">
+            <h3 class="card-header">
               {{searchContext.result.facetData[facetConf.facetClass][name].cmfLabel}}
-            </h4>
+            </h3>
             <ul class="list-group list-group-flush">
               <li class="list-group-item" 
                 [ngClass]="{'facet-selected' :
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.ts
index aacb27c3bc..4ac47d0a6e 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.ts
@@ -17,7 +17,8 @@ export const FACET_CONFIG = {
 
 @Component({
   selector: 'eg-catalog-result-facets',
-  templateUrl: 'facets.component.html'
+  templateUrl: 'facets.component.html',
+  styleUrls: ['./facets.component.css']
 })
 export class ResultFacetsComponent implements OnInit {
 
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..9566092be4 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,18 @@
     max-height: 158px;
     max-width: 100px;
 }
+
+.bib-field-title {
+    font-size: .88rem;
+    font-weight: inherit;
+    margin: 0;
+}
+
+.bib-title-link {
+    font-weight: bold;
+}
+
+.bib-author-link {
+    font-weight: normal;
+    display: block;
+}
\ 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 fa33c54aa3..b100706d31 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
@@ -38,30 +38,28 @@
         </ng-container>
         <div class="flex-1 pl-2">
           <div class="row">
-            <div class="col-lg-12 font-weight-bold">
+            <div class="col-lg-12">
+              <h3 class="bib-field-title">
               <ng-container *ngIf="hasMrConstituentRecords(summary)">
-                  <a routerLink="/staff/catalog/search"
+                  <a routerLink="/staff/catalog/search" class="bib-title-link"
                     [queryParams]="appendFromMrParam(summary)">
                     <eg-bib-display-field [summary]="summary" field="title"
                       [usePlaceholder]="true"></eg-bib-display-field>
                   </a>
               </ng-container>
+              
               <ng-container *ngIf="!hasMrConstituentRecords(summary)">
                 <a routerLink="/staff/catalog/record/{{summary.id}}"
-                  [queryParams]="currentParams()">
+                  [queryParams]="currentParams()" class="bib-title-link">
                   <eg-bib-display-field [summary]="summary" field="title"
                     [usePlaceholder]="true"></eg-bib-display-field>
                 </a>
               </ng-container>
-            </div>
-          </div>
-          <div class="row pt-2">
-            <div class="col-lg-12">
-              <a routerLink="/staff/catalog/search"
-                [queryParams]="getAuthorSearchParams(summary)">
-                <eg-bib-display-field [summary]="summary" field="author"
-                  [usePlaceholder]="true"></eg-bib-display-field>
+              
+              <a routerLink="/staff/catalog/search" class="bib-author-link pt-2" [queryParams]="getAuthorSearchParams(summary)">
+                <eg-bib-display-field [summary]="summary" field="author" [usePlaceholder]="true"></eg-bib-display-field>
               </a>
+              </h3>
             </div>
           </div>
           <div class="row pt-2">
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.css
new file mode 100644
index 0000000000..7e74d8ac91
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.css
@@ -0,0 +1,15 @@
+#staff-catalog-results-container h2 {
+    color: #212529;
+    font-size: 1.15rem;
+    font-weight: 500;
+}
+
+/* put the facets first visually */
+
+#eg-catalog-result-facets {
+    order: 1;
+}
+
+#eg-catalog-result-records {
+    order: 2;
+}
\ No newline at end of file
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 5f584a52da..4080ab62ec 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
@@ -38,7 +38,7 @@
   <div class="row">
     <div class="col-lg-2" *ngIf="!searchContext.basket">
       <ng-container *ngIf="!searchContext.termSearch.browseEntry">
-        <h3 i18n>Search Results ({{searchContext.result.count}})</h3>
+        <h2 i18n>Search Results ({{searchContext.result.count}})</h2>
       </ng-container>
     </div>
     <div class="col-lg-2" *ngIf="searchContext.basket">
@@ -65,10 +65,7 @@
   </div>
   <div>
     <div class="row mt-2">
-      <div class="col-lg-2" *ngIf="!searchContext.basket">
-        <eg-catalog-result-facets></eg-catalog-result-facets>
-      </div>
-      <div
+      <div id="eg-catalog-result-records"
         [ngClass]="{'col-lg-10': !searchContext.basket, 'col-lg-12': searchContext.basket}">
         <div *ngFor="let summary of searchContext.result.records; let idx = index">
           <div *ngIf="summary">
@@ -79,7 +76,10 @@
         <div class="float-right">
           <eg-catalog-result-pagination></eg-catalog-result-pagination>
         </div>
+      </div>
 
+      <div class="col-lg-2" id="eg-catalog-result-facets" *ngIf="!searchContext.basket">
+        <eg-catalog-result-facets></eg-catalog-result-facets>
       </div>
     </div>
   </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.ts
index f4e42c1073..76711e1ebd 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.ts
@@ -14,7 +14,8 @@ import {ServerStoreService} from '@eg/core/server-store.service';
 
 @Component({
   selector: 'eg-catalog-results',
-  templateUrl: 'results.component.html'
+  templateUrl: 'results.component.html',
+  styleUrls: ['results.component.css']
 })
 export class ResultsComponent implements OnInit, OnDestroy {
 
-- 
2.11.0