Merge pull request #1044 from geonetwork/misc-datahub-layout-issues

Datahub / fix some layout issues
geonetwork · Nov 19, 2024 · a2b8f0d · a2b8f0d
2 parents 68624e7 + 1abd2ec
commit a2b8f0d
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 34 deletions.
diff --git a/apps/datahub/src/app/home/home-header/home-header.component.html b/apps/datahub/src/app/home/home-header/home-header.component.html
@@ -1,6 +1,6 @@
 <header class="h-full px-5" [style.background]="backgroundCss">
   <div
-    class="container-lg h-full mx-auto flex flex-col-reverse justify-between sm:flex-col sm:justify-end"
+    class="container-lg relative h-full mx-auto flex flex-col-reverse justify-between sm:flex-col sm:justify-end"
   >
     <div
       class="py-8 relative z-40 mb-[184px] sm:mb-0"
@@ -83,9 +83,13 @@
         class="tabs flex justify-between font-medium -mx-5 sm:mx-0 sm:mt-32 inset-x-0 bottom-0 z-50"
       ></datahub-navigation-menu>
     </div>
+    <gn-ui-language-switcher
+      *ngIf="showLanguageSwitcher"
+      class="language-switcher absolute top-3.5 right-6 text-[13px]"
+      [style.--color-main]="foregroundColor"
+      [style.--color-gray-300]="foregroundColor"
+      [style.--color-primary-darker]="foregroundColor"
+      [style.--color-primary-black]="foregroundColor"
+    ></gn-ui-language-switcher>
   </div>
-  <gn-ui-language-switcher
-    *ngIf="showLanguageSwitcher"
-    class="language-switcher absolute top-2.5 left-2.5 text-[13px]"
-  ></gn-ui-language-switcher>
 </header>
diff --git a/apps/datahub/src/app/home/home-header/home-header.component.ts b/apps/datahub/src/app/home/home-header/home-header.component.ts
@@ -48,6 +48,7 @@ export class HomeHeaderComponent {
   SORT_BY_PARAMS = SortByEnum
   searchConfig: SearchConfig = getOptionalSearchConfig()
   showLanguageSwitcher = getGlobalConfig().LANGUAGES?.length > 0
+  foregroundColor = getThemeConfig().HEADER_FOREGROUND_COLOR || '#ffffff'
 
   constructor(
     public routerFacade: RouterFacade,

diff --git a/apps/datahub/src/app/home/search/search-filters/search-filters.component.html b/apps/datahub/src/app/home/search/search-filters/search-filters.component.html
@@ -91,7 +91,7 @@ <h2 class="text-xl mr-4 font-title" translate>
     [ngClass]="{ 'sm:col-span-3 lg:col-span-2': !isOpen }"
   >
     <div
-      class="flex flex-row"
+      class="flex flex-row gap-7 sm:gap-4"
       [ngClass]="
         isOpen
           ? 'justify-start sm:justify-end'
@@ -122,6 +122,7 @@ <h2 class="text-xl mr-4 font-title" translate>
         ></ng-icon>
       </button>
       <gn-ui-sort-by
+        class="overflow-hidden"
         [ngClass]="isOpen ? 'block text-white mb-1' : 'hidden sm:block'"
         [isQualitySortable]="isQualitySortable"
       ></gn-ui-sort-by>

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
@@ -27,6 +27,8 @@
           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>
       </div>
     </div>

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.css b/apps/datahub/src/app/record/record-metadata/record-metadata.component.css
@@ -1,3 +1,8 @@
+/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+::ng-deep .mat-mdc-tab-labels {
+  /* move tabs on the right to let the title show */
+  margin-left: 140px;
+}
 ::ng-deep .mat-mdc-tab.mdc-tab {
   letter-spacing: 0.88px;
 }
@@ -16,6 +21,9 @@
 }
 @media only screen and (max-width: 639px) {
   /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+  ::ng-deep .mat-mdc-tab-labels {
+    margin-left: 0px;
+  }
   ::ng-deep .mat-mdc-tab.mdc-tab {
     padding: 0px !important;
     margin-right: 24px;

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -79,9 +79,7 @@
           >
             <mat-tab [disabled]="(displayMap$ | async) === false">
               <ng-template mat-tab-label>
-                <span class="tab-header-label sm:ml-32" translate
-                  >record.tab.map</span
-                >
+                <span class="tab-header-label" translate>record.tab.map</span>
               </ng-template>
               <div
                 class="block"

diff --git a/libs/feature/record/src/lib/data-view/data-view.component.html b/libs/feature/record/src/lib/data-view/data-view.component.html
@@ -2,7 +2,7 @@
   <gn-ui-dropdown-selector
     *ngIf="dropdownChoices$ | async as choices"
     [title]="'table.select.data' | translate"
-    class="truncate p-1 -mx-1"
+    class="truncate p-1 -mx-1 self-end mb-1"
     extraBtnClass="!text-primary font-sans font-medium"
     [choices]="choices"
     (selectValue)="selectLink($event)"

diff --git a/libs/feature/record/src/lib/map-view/map-view.component.html b/libs/feature/record/src/lib/map-view/map-view.component.html
@@ -1,7 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end mb-7 mt-1">
+  <div class="w-full flex justify-end">
     <gn-ui-dropdown-selector
-      class="truncate p-1 -mx-1"
+      class="truncate p-1 -mx-1 mb-1"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"

diff --git a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html
@@ -1,6 +1,6 @@
 <gn-ui-dropdown-selector
   [title]="'languages'"
-  [choices]="languageList"
+  [choices]="languageChoices"
   (selectValue)="changeLanguage($event)"
   [selected]="currentLang"
   ariaName="languages"

diff --git a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts
@@ -1,10 +1,4 @@
-import {
-  Component,
-  Inject,
-  InjectionToken,
-  OnInit,
-  Optional,
-} from '@angular/core'
+import { Component, Inject, InjectionToken, Optional } from '@angular/core'
 import { LANGUAGE_STORAGE_KEY } from '@geonetwork-ui/util/i18n'
 import { TranslateService } from '@ngx-translate/core'
 
@@ -17,36 +11,33 @@ const DEFAULT_LANGUAGES = ['en', 'fr']
   templateUrl: './language-switcher.component.html',
   styleUrls: ['./language-switcher.component.css'],
 })
-export class LanguageSwitcherComponent implements OnInit {
-  languageList = this.languagePlaceholder || DEFAULT_LANGUAGES
+export class LanguageSwitcherComponent {
+  languageChoices = (this.languagesList || DEFAULT_LANGUAGES).map(
+    (language) => ({
+      label: `${language}`.toUpperCase(),
+      value: language,
+    })
+  )
 
   constructor(
     @Optional()
     @Inject(LANGUAGES_LIST)
-    private languagePlaceholder,
+    private languagesList: string[],
     private translate: TranslateService
   ) {}
 
   get currentLang() {
     return this.translate.currentLang
   }
 
-  ngOnInit(): void {
-    const languages = this.languagePlaceholder || DEFAULT_LANGUAGES
-    this.languageList = languages.map((language) => ({
-      label: `${language}`.toUpperCase(),
-      value: language,
-    }))
-  }
-
-  changeLanguage(value) {
+  changeLanguage(value: unknown) {
     try {
-      localStorage.setItem(LANGUAGE_STORAGE_KEY, value)
+      localStorage.setItem(LANGUAGE_STORAGE_KEY, value as string)
       location.reload()
     } catch (error) {
       console.warn(`Language choice could not be persisted`, error)
     }
 
-    this.translate.use(value)
+    this.translate.use(value as string)
   }
 }