geocat: adapt UI to geocat mockups

add TW safelist for title layout Change title of app (#22)
camptocamp · Nov 28, 2024 · 2e17948 · 2e17948
1 parent c7e35f7
commit 2e17948
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 10 deletions.
diff --git a/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html b/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html
@@ -6,7 +6,7 @@
       ? 'decoration-primary'
       : 'decoration-transparent hover:decoration-primary transition-colors'
   "
-  class="hidden sm:block sm:py-4 uppercase truncate underline decoration-4 underline-offset-[19px]"
+  class="hidden sm:block sm:py-4 uppercase truncate font-title text-sm underline decoration-4 underline-offset-[19px]"
   [style.color]="foregroundColor"
   translate
 >

diff --git a/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.ts b/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.ts
@@ -9,7 +9,7 @@ import {
   ROUTER_ROUTE_NEWS,
   ROUTER_ROUTE_ORGANIZATIONS,
 } from '../../router/constants'
-import { getThemeConfig } from '@geonetwork-ui/util/app-config'
+// import { getThemeConfig } from '@geonetwork-ui/util/app-config'
 
 marker('datahub.header.news')
 marker('datahub.header.datasets')
@@ -21,7 +21,7 @@ marker('datahub.header.organizations')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigationMenuComponent {
-  foregroundColor = getThemeConfig().HEADER_FOREGROUND_COLOR || '#ffffff'
+  foregroundColor = /*getThemeConfig().HEADER_FOREGROUND_COLOR ||*/ '#ffffff'
   displayMobileMenu = false
   tabLinks = [
     {

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
@@ -9,6 +9,7 @@
           [label]="'datahub.search.back' | translate"
           [icon]="'matArrowBack'"
           [style.--navigation-button-color]="foregroundColor"
+          [style.--color-background]="'#ffffff'"
         >
         </gn-ui-navigation-button>
       </div>
@@ -17,19 +18,19 @@
           *ngIf="metadata?.uniqueIdentifier"
           [record]="metadata"
           [displayCount]="false"
-          class="flex text-background content-center"
+          class="flex text-background content-center bg-white rounded px-2 items-center justify-center font-semibold text-sm leading-5"
           [style.color]="foregroundColor"
           [style.--star-toggle-enabled-color]="foregroundColor"
           [style.--star-toggle-disabled-color]="foregroundColor"
         ></gn-ui-favorite-star>
-        <gn-ui-language-switcher
+        <!-- <gn-ui-language-switcher
           *ngIf="showLanguageSwitcher"
           class="language-switcher text-[13px] mt-0.5"
           [style.--color-main]="foregroundColor"
           [style.--color-gray-300]="foregroundColor"
           [style.--color-primary-darker]="foregroundColor"
           [style.--color-primary-black]="foregroundColor"
-        ></gn-ui-language-switcher>
+        ></gn-ui-language-switcher> -->
       </div>
     </div>
     <div
@@ -41,7 +42,7 @@
     </div>
     <div
       class="flex flex-row flex-wrap items-center gap-4 mb-4 ml-4 sm:mr-[332px]"
-      [style.color]="foregroundColor"
+      [style.color]="'#ffffff'"
     >
       <gn-ui-badge
         *ngIf="(isGeodata$ | async) === true"

diff --git a/apps/datahub/src/index.html b/apps/datahub/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en" class="overflow-y-scroll">
   <head>
     <meta charset="utf-8" />
-    <title>Datahub</title>
+    <title>geocat.ch</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="assets/css/materials-symbols-outline.css" />

diff --git a/apps/datahub/tailwind.config.js b/apps/datahub/tailwind.config.js
@@ -4,6 +4,14 @@ const { join } = require('path')
 
 module.exports = {
   ...baseConfig,
+  safelist: [
+    ...baseConfig.safelist,
+    'w-max',
+    'items-end',
+    'sm:h-36',
+    'md:h-[10.5rem]',
+    'h-20',
+  ],
   theme: {
     ...baseConfig.theme,
     extend: {

diff --git a/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html b/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html
@@ -1,7 +1,7 @@
 <button
-  class="group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 rounded content-center"
+  class="bg-white text-xs font-semibold group flex items-center justify-center gap-1 backdrop-blur py-1.5 px-2 bg-primary-opacity-30 rounded content-center"
 >
-  <ng-icon [name]="icon" class="align-middle w-[18px]"></ng-icon>
+  <ng-icon [name]="icon" class="align-middle w-[18px] text-primary"></ng-icon>
   <span
     class="mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75"
     >{{ label.toUpperCase() }}</span

diff --git a/tailwind.base.config.js b/tailwind.base.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  safelist: [],
   theme: {
     extend: {
       colors: {
@@ -53,6 +54,10 @@ module.exports = {
           'var(--font-family-title, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif)', // alias for serif
         mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
       },
+      // specific for geocat
+      fontWeight: {
+        title: '600',
+      },
       fontSize: {
         13: '13px',
         21: [