108588: Fix header ordering issues on community & collection pages

alexandrevryghem · Dec 20, 2023 · 989db14 · 989db14
1 parent 038dd18
commit 989db14
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 30 deletions.
diff --git a/src/app/browse-by/abstract-browse-by-type.component.ts b/src/app/browse-by/abstract-browse-by-type.component.ts
@@ -25,6 +25,11 @@ export abstract class AbstractBrowseByTypeComponent implements OnChanges, OnDest
    */
   @Input() scope: string;
 
+  /**
+   * Display the h1 title in the section
+   */
+  @Input() displayTitle = true;
+
   scope$: BehaviorSubject<string> = new BehaviorSubject(undefined);
 
   /**

diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
@@ -1,22 +1,21 @@
-<div class="container">
-  <section class="comcol-page-browse-section">
-    <div class="browse-by-metadata w-100">
-      <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
-        title="{{'browse.title' | translate:
-        {
-          field: 'browse.metadata.' + browseId | translate,
-          startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
-          value: (value)? '&quot;' + value + '&quot;': ''
-        } }}"
-        [objects$]="(items$ !== undefined)? items$ : browseEntries$"
-        [paginationConfig]="(currentPagination$ |async)"
-        [sortConfig]="(currentSort$ |async)"
-        [type]="startsWithType"
-        [startsWithOptions]="startsWithOptions"
-        (prev)="goPrev()"
-        (next)="goNext()">
-      </ds-browse-by>
-      <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
-    </div>
-  </section>
-</div>
+<section class="comcol-page-browse-section">
+  <div class="browse-by-metadata w-100">
+    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+                  title="{{'browse.title' | translate:{
+                    field: 'browse.metadata.' + browseId | translate,
+                    startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
+                    value: (value)? '&quot;' + value + '&quot;': ''
+                  } }}"
+                  [displayTitle]="displayTitle"
+                  [objects$]="(items$ !== undefined)? items$ : browseEntries$"
+                  [paginationConfig]="(currentPagination$ |async)"
+                  [sortConfig]="(currentSort$ |async)"
+                  [type]="startsWithType"
+                  [startsWithOptions]="startsWithOptions"
+                  (prev)="goPrev()"
+                  (next)="goNext()">
+    </ds-browse-by>
+    <ds-themed-loading *ngIf="!startsWithOptions"
+                       message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
+  </div>
+</section>
diff --git a/src/app/browse-by/browse-by-page/browse-by-page.component.html b/src/app/browse-by/browse-by-page/browse-by-page.component.html
@@ -1,2 +1,4 @@
-<ds-browse-by-switcher [browseByType]="browseByType$ | async">
-</ds-browse-by-switcher>
+<div class="container">
+  <ds-browse-by-switcher [browseByType]="browseByType$ | async">
+  </ds-browse-by-switcher>
+</div>
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
@@ -13,6 +13,8 @@ export class BrowseBySwitcherComponent extends AbstractComponentLoaderComponent<
 
   @Input() browseByType: BrowseByDataType;
 
+  @Input() displayTitle: boolean;
+
   @Input() scope: string;
 
   protected inputNamesDependentForComponent: (keyof this & string)[] = [
@@ -23,6 +25,7 @@ export class BrowseBySwitcherComponent extends AbstractComponentLoaderComponent<
   protected inputNames: (keyof this & string)[] = [
     ...this.inputNames,
     'browseByType',
+    'displayTitle',
     'scope',
   ];
 

diff --git a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
@@ -1,4 +1,11 @@
-<div class="container">
+<section>
+  <h1 *ngIf="displayTitle">
+    {{ ('browse.title') | translate:{
+    field: 'browse.metadata.' + vocabularyName | translate,
+    startsWith: '',
+    value: '',
+  } }}
+  </h1>
   <div class="mb-3">
     <ds-vocabulary-treeview [vocabularyOptions]=vocabularyOptions
                             [multiSelect]="true"
@@ -11,4 +18,4 @@
      [queryParams]="queryParams"
      [queryParamsHandling]="'merge'">
     {{ 'browse.taxonomy.button' | translate }}</a>
-</div>
+</section>
diff --git a/...sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html b/...sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(subCollectionsRDObs | async) as subCollectionsRD">
   <div *ngIf="subCollectionsRD?.hasSucceeded && subCollectionsRD?.payload.totalElements > 0" @fadeIn>
-    <h2>{{'community.sub-collection-list.head' | translate}}</h2>
+    <h3>{{'community.sub-collection-list.head' | translate}}</h3>
     <ds-viewable-collection
       [config]="config"
       [sortConfig]="sortConfig"

diff --git a/...s/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html b/...s/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(subCommunitiesRDObs | async) as subCommunitiesRD">
   <div *ngIf="subCommunitiesRD?.hasSucceeded && subCommunitiesRD?.payload.totalElements > 0" @fadeIn>
-    <h2>{{'community.sub-community-list.head' | translate}}</h2>
+    <h3>{{'community.sub-community-list.head' | translate}}</h3>
     <ds-viewable-collection
       [config]="config"
       [sortConfig]="sortConfig"

diff --git a/src/app/shared/browse-by/browse-by.component.html b/src/app/shared/browse-by/browse-by.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngVar="(objects$ | async) as objects">
-  <h3>{{title | translate}}</h3>
+  <h1 *ngIf="displayTitle">{{title | translate}}</h1>
   <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
       <div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset">

diff --git a/src/app/shared/browse-by/browse-by.component.ts b/src/app/shared/browse-by/browse-by.component.ts
@@ -38,6 +38,11 @@ export class BrowseByComponent implements OnInit, OnDestroy {
    */
   @Input() title: string;
 
+  /**
+   * Whether the title should be displayed
+   */
+  @Input() displayTitle = true;
+
   /**
    * The list of objects to display
    */

diff --git a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
@@ -1,4 +1,4 @@
-<h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2>
+<h2 class="comcol-browse-label">{{'browse.comcol.head' | translate}}</h2>
 <nav *ngIf="(allOptions$ | async) as allOptions" class="comcol-browse mb-4" aria-label="Browse Community or Collection">
   <div class="d-none d-sm-block">
 

diff --git a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
@@ -1,3 +1,4 @@
 <ds-browse-by-switcher [browseByType]="browseByType$ | async"
+                       [displayTitle]="false"
                        [scope]="scope$ | async">
 </ds-browse-by-switcher>