Merge pull request #1028 from geonetwork/fix-about-readmore-block

Datahub: improvements to the record page (header & abstract)

apps/datahub/src/app/app.module.ts

@@ -109,12 +109,12 @@ import {
   matCloseOutline,
   matEditOutline,
   matExpandMoreOutline,
+  matLocationSearchingOutline,
   matMenuOutline,
   matMoreHorizOutline,
   matRemoveOutline,
-  matStarOutline,
-  matMyLocationOutline,
   matSendOutline,
+  matStarOutline,
 } from '@ng-icons/material-icons/outline'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
 
@@ -200,7 +200,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
       matEditOutline,
       matAccountBoxOutline,
       matStarOutline,
-      matMyLocationOutline,
+      matLocationSearchingOutline,
       matSendOutline,
     }),
   ],

apps/datahub/src/app/record/header-record/header-record.component.html

@@ -38,18 +38,23 @@
       {{ metadata.title }}
     </div>
     <div
-      class="flex flex-row flex-wrap gap-4 mb-4 ml-4 sm:mr-[332px]"
+      class="flex flex-row flex-wrap items-center gap-4 mb-4 ml-4 sm:mr-[332px]"
       [style.color]="foregroundColor"
     >
       <gn-ui-badge
         *ngIf="(isGeodata$ | async) === true"
-        [style.--gn-ui-badge-padding]="'0.5em 0.75em'"
+        [style.--gn-ui-badge-padding]="'2px 8px'"
         [style.--gn-ui-badge-background-color]="'var(--color-primary-darker)'"
         [style.--gn-ui-badge-opacity]="'1'"
-        [style.font-size]="'0.85em'"
+        class="leading-[1.4em]"
       >
-        <ng-icon class="mr-2" name="matMyLocationOutline"> </ng-icon>
-        <span class="font-semibold" translate>record.metadata.type</span>
+        <ng-icon
+          class="mr-[5px] text-[1em]"
+          name="matLocationSearchingOutline"
+        ></ng-icon>
+        <span class="font-semibold text-[12px]" translate
+          >record.metadata.type</span
+        >
       </gn-ui-badge>
       <div *ngIf="metadata.recordUpdated">
         <p translate [translateParams]="{ date: lastUpdate }">

apps/datahub/src/app/record/record-metadata/record-metadata.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="(metadataViewFacade.error$ | async) === null">
   <div
     id="about"
-    class="container-lg px-4 mb-9 mt-8 sm:mb-16 sm:mt-10 lg:mx-auto"
+    class="container-lg px-4 mb-9 mt-8 sm:mb-16 sm:mt-[51px] lg:mx-auto"
   >
     <gn-ui-metadata-info
       class="sm:block"
@@ -23,8 +23,9 @@
         >
         </gn-ui-metadata-info>
       </div>
-      <div class="sm:-mt-44">
+      <div class="sm:mt-[-185px]">
         <gn-ui-image-overlay-preview
+          class="block h-[185px] mb-5"
           [imageUrl]="thumbnailUrl$ | async"
           (isPlaceholderShown)="showOverlay = !$event"
           *ngIf="showOverlay"
@@ -44,7 +45,10 @@
             [metadataQualityDisplay]="metadataQualityDisplay"
           ></gn-ui-metadata-quality>
         </div>
-        <gn-ui-metadata-catalog [sourceLabel]="sourceLabel$ | async">
+        <gn-ui-metadata-catalog
+          *ngIf="sourceLabel$ | async as sourceLabel"
+          [sourceLabel]="sourceLabel"
+        >
         </gn-ui-metadata-catalog>
       </div>
     </div>
@@ -63,7 +67,6 @@
           <div
             class="text-[28px] text-title font-title transform sm:translate-y-10"
             translate
-            id="preview"
           >
             record.metadata.preview
           </div>

libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html

@@ -1,12 +1,12 @@
 <gn-ui-content-ghost
   [showContent]="imageUrl !== undefined"
-  ghostClass="h-48 mb-3"
+  ghostClass="h-full w-full"
 >
   <div
     *ngIf="imageUrl"
     [showContent]="imageUrl !== undefined"
     data-cy="record-thumbnail"
-    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
+    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-full w-full"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"

libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -1,16 +1,30 @@
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
-  <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
+  <gn-ui-content-ghost
+    ghostClass="h-[178px]"
+    [showContent]="fieldReady('abstract')"
+  >
     <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
       <div class="mb-6">
         <gn-ui-markdown-parser
           [textContent]="metadata.abstract"
         ></gn-ui-markdown-parser>
       </div>
     </gn-ui-max-lines>
+  </gn-ui-content-ghost>
+
+  <p
+    class="mt-6 mb-3 font-medium text-primary text-sm"
+    translate
+    *ngIf="!fieldReady('keywords') || metadata.keywords?.length"
+  >
+    record.metadata.keywords
+  </p>
+
+  <gn-ui-content-ghost
+    ghostClass="h-[31px] w-3/4"
+    [showContent]="fieldReady('keywords')"
+  >
     <div *ngIf="metadata.keywords?.length">
-      <p class="mt-6 mb-3 font-medium text-primary text-sm" translate>
-        record.metadata.keywords
-      </p>
       <div class="sm:pb-4 flex flex-wrap gap-2">
         <gn-ui-badge
           class="inline-block lowercase"
@@ -24,7 +38,15 @@
   </gn-ui-content-ghost>
 </div>
 
-<gn-ui-expandable-panel [title]="'record.metadata.usage' | translate">
+<gn-ui-expandable-panel
+  *ngIf="
+    metadata.licenses ||
+    metadata.legalConstraints ||
+    metadata.securityConstraints ||
+    metadata.otherConstraints
+  "
+  [title]="'record.metadata.usage' | translate"
+>
   <div class="flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900">
     <ng-container *ngFor="let license of licenses">
       <div *ngIf="license.url; else noUrl" class="text-primary">