Merge pull request #230 from geonetwork/datahub-rework-page-headers

Datahub / Implement sticky headers for search and record view
geonetwork · Feb 23, 2022 · 650994e · 650994e
2 parents 147fd22 + 3d57f6e
commit 650994e
Show file tree

Hide file tree

Showing 37 changed files with 678 additions and 126 deletions.
diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts
@@ -39,6 +39,7 @@ import { RecordPageComponent } from './record/record-page/record-page.component'
 import { RecordPreviewDatahubComponent } from './search/record-preview-datahub/record-preview-datahub.component'
 import { SearchHeaderComponent } from './search/search-header/search-header.component'
 import { SearchPageComponent } from './search/search-page/search-page.component'
+import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 // https://github.com/nrwl/nx/issues/191
@@ -83,6 +84,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     UtilSharedModule,
     MatIconModule,
     UiInputsModule,
+    UiLayoutModule,
   ],
   providers: [
     { provide: RESULTS_LAYOUT_CONFIG, useValue: DATAHUB_RESULTS_LAYOUT_CONFIG },

diff --git a/apps/datahub/src/app/record/header-record/header-record.component.html b/apps/datahub/src/app/record/header-record/header-record.component.html
@@ -1,6 +1,16 @@
-<div class="header w-full">
-  <div class="container-lg mx-auto relative pt-16 pb-24">
-    <div class="absolute" style="top: 1em">
+<header class="w-full h-full" [style.background]="backgroundCss">
+  <div
+    class="h-full container-lg mx-auto flex flex-col justify-center relative"
+  >
+    <div
+      *ngIf="metadata"
+      class="font-title text-center px-2 mx-48 text-[28px] mb-[41px]"
+      [style.transform]="'scale(' + (0.85 + 0.15 * expandRatio) + ')'"
+    >
+      {{ metadata.title }}
+    </div>
+
+    <div class="absolute" style="top: 20px">
       <gn-ui-navigation-button
         (click)="back()"
         [label]="'datahub.search.back' | translate"
@@ -10,10 +20,41 @@
     </div>
 
     <div
-      *ngIf="metadata"
-      class="font-title py-2 text-28 text-center px-2 mx-48"
+      class="absolute bg-primary flex space-x-8 justify-between py-5 px-20 text-sm rounded-lg text-white"
+      style="left: 0; right: 0; bottom: -20px"
     >
-      {{ metadata.title }}
+      <button
+        gnUiAnchorLink="about"
+        gnUiAnchorLinkDisabledClass="cursor-default opacity-60"
+        class="uppercase font-medium tracking-wider"
+        translate
+      >
+        record.metadata.about
+      </button>
+      <button
+        gnUiAnchorLink="preview"
+        gnUiAnchorLinkDisabledClass="cursor-default opacity-60"
+        class="uppercase font-medium tracking-wider"
+        translate
+      >
+        record.metadata.preview
+      </button>
+      <button
+        gnUiAnchorLink="access"
+        gnUiAnchorLinkDisabledClass="cursor-default opacity-60"
+        class="uppercase font-medium tracking-wider"
+        translate
+      >
+        record.metadata.access
+      </button>
+      <button
+        gnUiAnchorLink="links"
+        gnUiAnchorLinkDisabledClass="cursor-default opacity-60"
+        class="uppercase font-medium tracking-wider"
+        translate
+      >
+        record.metadata.links
+      </button>
     </div>
   </div>
-</div>
+</header>
diff --git a/apps/datahub/src/app/record/header-record/header-record.component.spec.ts b/apps/datahub/src/app/record/header-record/header-record.component.spec.ts
@@ -7,6 +7,12 @@ import { BehaviorSubject } from 'rxjs'
 
 import { HeaderRecordComponent } from './header-record.component'
 
+jest.mock('@geonetwork-ui/util/app-config', () => ({
+  getThemeConfig: () => ({
+    HEADER_BACKGROUND: 'red',
+  }),
+}))
+
 const routerFacadeMock = {
   goToSearch: jest.fn(),
 }

diff --git a/apps/datahub/src/app/record/header-record/header-record.component.ts b/apps/datahub/src/app/record/header-record/header-record.component.ts
@@ -3,6 +3,7 @@ import { RouterFacade } from '@geonetwork-ui/feature/router'
 import { SearchFacade } from '@geonetwork-ui/feature/search'
 import { MetadataRecord } from '@geonetwork-ui/util/shared'
 import { first } from 'rxjs/operators'
+import { getThemeConfig } from '@geonetwork-ui/util/app-config'
 
 @Component({
   selector: 'datahub-header-record',
@@ -12,11 +13,14 @@ import { first } from 'rxjs/operators'
 })
 export class HeaderRecordComponent {
   @Input() metadata: MetadataRecord
+  @Input() expandRatio: number
+  backgroundCss = getThemeConfig().HEADER_BACKGROUND
 
   constructor(
     private searchRouter: RouterFacade,
     private searchFacade: SearchFacade
   ) {}
+
   back() {
     this.searchFacade.searchFilters$
       .pipe(first())

diff --git a/apps/datahub/src/app/record/record-page/record-page.component.html b/apps/datahub/src/app/record/record-page/record-page.component.html
@@ -1,6 +1,11 @@
 <div class="h-screen overflow-auto">
-  <datahub-header-record
-    [metadata]="mdViewFacade.metadata$ | async"
-  ></datahub-header-record>
-  <gn-ui-record-metadata> </gn-ui-record-metadata>
+  <gn-ui-sticky-header [fullHeightPx]="231" [minHeightPx]="112">
+    <ng-template let-expandRatio>
+      <datahub-header-record
+        [metadata]="mdViewFacade.metadata$ | async"
+        [expandRatio]="expandRatio"
+      ></datahub-header-record>
+    </ng-template>
+  </gn-ui-sticky-header>
+  <gn-ui-record-metadata></gn-ui-record-metadata>
 </div>
diff --git a/apps/datahub/src/app/search/search-header/search-header.component.html b/apps/datahub/src/app/search/search-header/search-header.component.html
@@ -1,10 +1,12 @@
-<div class="header pt-24">
-  <div class="container-md mx-auto">
-    <div
-      class="flex font-title py-2 text-48"
-      [innerHTML]="'datahub.header.title.html' | translate"
-    ></div>
-    <div class="py-8">
+<header class="h-full" [style.background]="backgroundCss">
+  <div class="container-md h-full mx-auto flex flex-col justify-center">
+    <div class="py-8 relative" [style.margin-top]="expandRatio * 97 + 'px'">
+      <div
+        class="font-title text-[48px] leading-[58px] absolute w-full"
+        [style.bottom]="'100%'"
+        [style.opacity]="expandRatio"
+        [innerHTML]="'datahub.header.title.html' | translate"
+      ></div>
       <gn-ui-fuzzy-search
         (itemSelected)="onFuzzySearchSelection($event)"
         (inputSubmited)="onFuzzySearchSubmission($event)"
@@ -23,7 +25,12 @@
       ></datahub-header-badge-button>
     </div>
 -->
-    <div class="tabs flex justify-center py-4 mt-12 font-medium">
+    <div
+      class="tabs flex justify-center py-4 mt-12 font-medium absolute"
+      style="bottom: 0; left: 0; right: 0"
+      [style.opacity]="expandRatio"
+      [style.visibility]="expandRatio > 0 ? 'visible' : 'hidden'"
+    >
       <!--      <div class="uppercase text-white">Fil d'activité</div>-->
       <div
         class="uppercase text-primary hover:text-primary-lighter hover:underline cursor-pointer"
@@ -35,4 +42,4 @@
       <!--      <div class="uppercase text-white">Organisations</div>-->
     </div>
   </div>
-</div>
+</header>
diff --git a/apps/datahub/src/app/search/search-header/search-header.component.spec.ts b/apps/datahub/src/app/search/search-header/search-header.component.spec.ts
@@ -9,6 +9,12 @@ import { BehaviorSubject } from 'rxjs'
 
 import { SearchHeaderComponent } from './search-header.component'
 
+jest.mock('@geonetwork-ui/util/app-config', () => ({
+  getThemeConfig: () => ({
+    HEADER_BACKGROUND: 'red',
+  }),
+}))
+
 const routerFacadeMock = {
   goToMetadata: jest.fn(),
   anySearch$: new BehaviorSubject('scot'),

diff --git a/apps/datahub/src/app/search/search-header/search-header.component.ts b/apps/datahub/src/app/search/search-header/search-header.component.ts
@@ -1,9 +1,10 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { RouterFacade } from '@geonetwork-ui/feature/router'
 import { SearchFacade } from '@geonetwork-ui/feature/search'
 import { MetadataRecord } from '@geonetwork-ui/util/shared'
 import { map } from 'rxjs/operators'
+import { getThemeConfig } from '@geonetwork-ui/util/app-config'
 
 marker('datahub.header.myfavorites')
 marker('datahub.header.connex')
@@ -17,9 +18,12 @@ marker('datahub.header.popularRecords')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchHeaderComponent {
+  @Input() expandRatio: number
+
   searchInputRouteValue$ = this.routerFacade.anySearch$.pipe(
     map((any) => ({ title: any }))
   )
+  backgroundCss = getThemeConfig().HEADER_BACKGROUND
 
   constructor(
     private routerFacade: RouterFacade,

diff --git a/apps/datahub/src/app/search/search-page/search-page.component.html b/apps/datahub/src/app/search/search-page/search-page.component.html
@@ -1,7 +1,11 @@
 <div id="search-page" class="h-screen overflow-auto">
-  <header>
-    <datahub-search-header></datahub-search-header>
-  </header>
+  <gn-ui-sticky-header [fullHeightPx]="560" [minHeightPx]="125">
+    <ng-template let-expandRatio>
+      <datahub-search-header
+        [expandRatio]="expandRatio"
+      ></datahub-search-header>
+    </ng-template>
+  </gn-ui-sticky-header>
   <main>
     <div class="container-lg mx-auto py-4">
       <div>

diff --git a/apps/datahub/src/assets/bg_small.png b/apps/datahub/src/assets/bg_small.png
diff --git a/apps/datahub/src/assets/img/header_bg.webp → ...hub/src/assets/img/default_header_bg.webp b/apps/datahub/src/assets/img/header_bg.webp → ...hub/src/assets/img/default_header_bg.webp
diff --git a/apps/datahub/src/index.html b/apps/datahub/src/index.html
@@ -13,7 +13,12 @@
       rel="stylesheet"
     />
     <link rel="preload" href="assets/configuration/default.toml" as="fetch" />
-    <link rel="preload" href="header_bg.webp" as="image" importance="high" />
+    <link
+      rel="preload"
+      href="assets/img/default_header_bg.webp"
+      as="image"
+      importance="high"
+    />
   </head>
   <body>
     <datahub-root></datahub-root>

diff --git a/apps/datahub/src/styles.css b/apps/datahub/src/styles.css
@@ -14,10 +14,6 @@ html {
   overflow-y: scroll;
 }
 
-.header {
-  background-image: url('assets/img/header_bg.webp');
-}
-
 .container-sm {
   max-width: 640px;
 }

diff --git a/apps/demo/tailwind.config.js b/apps/demo/tailwind.config.js
@@ -1,9 +1,11 @@
 const baseConfig = require('../../tailwind.base.config')
+const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind')
+const { join } = require('path')
 
 module.exports = {
   ...baseConfig,
-  purge: {
-    // use all libs when purging for storybook to work
-    content: ['./apps/demo/src/**/*.html', './libs/*/*/src/**/*.html'],
-  },
+  purge: [
+    './libs/**/src/**/!(*.spec).{ts,html}',
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
 }
diff --git a/conf/default.toml b/conf/default.toml
@@ -46,11 +46,17 @@ proxy_path = ""
 # All parameters are expressed in CSS format, see:
 #  - for color: https://developer.mozilla.org/en-US/docs/Web/CSS/color
 #  - for font families: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
+#  - for background: https://developer.mozilla.org/en-US/docs/Web/CSS/background
 [theme]
 primary_color = "#0f4395"
 secondary_color = "#8bc832"
 main_color = "#212029" # All-purpose text color
 background_color = "#fdfbff"
+
+# This mandatory parameter indicates which background should be used for the main header
+header_background = "center / cover url('assets/img/default_header_bg.webp')"
+
+# These optional parameters allow changing fonts used in the app
 # main_font = "'My Custom Font', fallback-font"
 # title_font = "'My Custom Title Font', fallback-font-title"
 # fonts_stylesheet_url = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Permanent+Marker&display=swap"

diff --git a/libs/feature/record/src/lib/data-apis/data-apis.component.html b/libs/feature/record/src/lib/data-apis/data-apis.component.html
@@ -1,14 +1,11 @@
-<p class="font-title text-28 font-medium mt-12 mb-6 text-secondary" translate>
+<p
+  class="font-title text-[28px] font-medium mt-12 mb-6 text-secondary"
+  translate
+>
   record.metadata.api
 </p>
 <div
-  class="
-    mb-4
-    pl-2
-    flex flex-row
-    items-stretch
-    overflow-x-auto overflow-y-visible
-  "
+  class="mb-4 pl-2 flex flex-row items-stretch overflow-x-auto overflow-y-visible"
 >
   <gn-ui-api-card
     *ngFor="let link of facade.apiLinks$ | async"

diff --git a/libs/feature/record/src/lib/data-downloads/data-downloads.component.html b/libs/feature/record/src/lib/data-downloads/data-downloads.component.html
@@ -1,6 +1,6 @@
 <p
   *ngIf="(links$ | async) && (links$ | async).length > 0"
-  class="font-title text-28 font-medium mt-12 mb-4"
+  class="font-title text-[28px] font-medium mt-12 mb-4"
   translate
 >
   record.metadata.download

diff --git a/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.html b/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.html
@@ -1,4 +1,4 @@
-<p class="font-title text-28 font-medium mt-12 mb-4 text-primary" translate>
+<p class="font-title text-[28px] font-medium mt-12 mb-4 text-primary" translate>
   record.metadata.links
 </p>
 <div class="mb-4 grid grid-cols-3 gap-6">

diff --git a/libs/feature/record/src/lib/record-metadata/record-metadata.component.css b/libs/feature/record/src/lib/record-metadata/record-metadata.component.css
@@ -13,8 +13,3 @@
 .tracking-wider {
   letter-spacing: 0.88px;
 }
-
-button:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
diff --git a/libs/feature/record/src/lib/record-metadata/record-metadata.component.html b/libs/feature/record/src/lib/record-metadata/record-metadata.component.html
@@ -1,60 +1,4 @@
-<div
-  class="
-    container-lg
-    mx-auto
-    bg-primary
-    flex
-    space-x-8
-    justify-between
-    py-5
-    px-20
-    text-sm
-    rounded-lg
-    transform
-    -translate-y-10
-    text-white
-  "
->
-  <button
-    (click)="scrollTo('about')"
-    class="uppercase font-medium tracking-wider"
-    translate
-  >
-    record.metadata.about
-  </button>
-  <button
-    [disabled]="
-      (displayMap$ | async) === false && (displayData$ | async) === false
-    "
-    (click)="scrollTo('preview')"
-    class="uppercase font-medium tracking-wider"
-    translate
-  >
-    record.metadata.preview
-  </button>
-  <button
-    [disabled]="(displayDownload$ | async) === false"
-    (click)="scrollTo('access')"
-    class="uppercase font-medium tracking-wider"
-    translate
-  >
-    record.metadata.access
-  </button>
-  <button
-    [disabled]="
-      (displayOtherLinks | async) === false &&
-      (displayApi$ | async) === false &&
-      (displayRelated$ | async) === false
-    "
-    (click)="scrollTo('links')"
-    class="uppercase font-medium tracking-wider"
-    translate
-  >
-    record.metadata.links
-  </button>
-</div>
-
-<div id="about" class="container-lg mx-auto mb-16">
+<div id="about" class="container-lg mx-auto mb-16" style="margin-top: 60px">
   <gn-ui-metadata-info
     class="block"
     *ngIf="(facade.isPresent$ | async) === false"
@@ -85,7 +29,7 @@
   >
     <div class="container-lg mx-auto">
       <div>
-        <div class="text-28 font-title transform translate-y-10" translate>
+        <div class="text-[28px] font-title transform translate-y-10" translate>
           record.metadata.preview
         </div>
         <mat-tab-group