Merge pull request #660 from geonetwork/DH-fix-bug-font-size

fix(DH): Make font-sizes and colors same across the expandable panel
geonetwork · Oct 24, 2023 · f8b9e53 · f8b9e53
2 parents f87f421 + f6c3fe5
commit f8b9e53
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
@@ -4,11 +4,12 @@
 >
   record.metadata.about
 </p>
-<div class="mb-6 md-description sm:mb-4 sm:pr-16" *ngIf="metadata.abstract">
+<div class="text-gray-900 mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
     <p
       class="whitespace-pre-line break-words"
       [innerHTML]="metadata.abstract | safe: 'html'"
+      *ngIf="metadata.abstract"
     ></p>
   </gn-ui-content-ghost>
 </div>
@@ -32,27 +33,30 @@
   *ngIf="metadata.lineage"
   [title]="'record.metadata.origin' | translate"
 >
-  <p class="mb-5 pt-4 whitespace-pre-line break-words" gnUiLinkify>
+  <p
+    class="text-gray-900 mb-5 pt-4 whitespace-pre-line break-words"
+    gnUiLinkify
+  >
     {{ metadata.lineage }}
   </p>
   <div
     class="py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid"
   >
     <div *ngIf="metadata.recordUpdated">
       <p class="text-sm" translate>record.metadata.updatedOn</p>
-      <p class="text-primary font-medium mt-2">
+      <p class="text-primary font-medium mt-[4px]">
         {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
       </p>
     </div>
     <div *ngIf="metadata.updateFrequency">
       <p class="text-sm" translate>record.metadata.updateFrequency</p>
-      <p class="text-primary font-medium mt-2" translate>
+      <p class="text-primary font-medium mt-[4px]" translate>
         domain.record.updateFrequency.{{ metadata.updateFrequency }}
       </p>
     </div>
     <div *ngIf="metadata.status">
       <p class="text-sm" translate>record.metadata.updateStatus</p>
-      <p class="text-primary font-medium mt-2" translate>
+      <p class="text-primary font-medium mt-[4px]" translate>
         domain.record.status.{{ metadata.status }}
       </p>
     </div>
@@ -63,7 +67,11 @@
     <gn-ui-badge *ngIf="metadata.extras?.isOpenData">
       <span translate>record.metadata.isOpenData</span>
     </gn-ui-badge>
-    <span *ngFor="let usage of usages" gnUiLinkify>
+    <span
+      class="text-primary font-medium"
+      *ngFor="let usage of usages"
+      gnUiLinkify
+    >
       {{ usage }}
     </span>
     <span class="noUsage" *ngIf="!hasUsage">
@@ -79,7 +87,7 @@
     <p class="text-sm" translate>record.metadata.sheet</p>
     <a [href]="metadata.landingPage" target="_blank">
       <mat-icon
-        class="material-symbols-outlined inline-block align-bottom pt-1.5 text-xs text-black"
+        class="material-symbols-outlined inline-block align-bottom pt-1.5 text-xs text-black !w-[20px]"
         >open_in_new</mat-icon
       >
       <span class="text-primary break-all">{{ metadata.landingPage }}</span>

diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts
@@ -43,7 +43,7 @@ describe('MetadataInfoComponent', () => {
     })
     it('should not display the abstract section', () => {
       const displayedElement =
-        fixture.nativeElement.querySelector('.md-description')
+        fixture.nativeElement.querySelector('.md-description p')
       expect(displayedElement).toBeFalsy()
     })
   })
@@ -69,7 +69,7 @@ describe('MetadataInfoComponent', () => {
     })
     it('should display the abstract section', () => {
       const displayedElement =
-        fixture.nativeElement.querySelector('.md-description')
+        fixture.nativeElement.querySelector('.md-description p')
       expect(displayedElement).toBeTruthy()
     })
   })

diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts
@@ -5,10 +5,7 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import {
-  DatasetDistribution,
-  DatasetRecord,
-} from '@geonetwork-ui/common/domain/record'
+import { DatasetRecord } from '@geonetwork-ui/common/domain/record'
 
 @Component({
   selector: 'gn-ui-metadata-info',

diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html
@@ -15,7 +15,7 @@
   </div>
 </div>
 <div
-  class="content duration-500 overflow-hidden transition-[max-height]"
+  class="content duration-250 overflow-hidden transition-[max-height]"
   [ngClass]="collapsed ? 'ease-out' : 'ease-in'"
   [style.maxHeight]="maxHeight"
   #contentDiv