feat(DH): Styling

geonetwork · Jan 15, 2024 · 7a8cc67 · 7a8cc67
1 parent 6fb189b
commit 7a8cc67
Showing 1 changed file with 81 additions and 74 deletions.
diff --git a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html
@@ -1,90 +1,97 @@
-<div class="py-4 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12">
-  <div *ngIf="shownOrganization" class="mb-6">
-    <p class="text-sm mb-3 font-medium" translate>record.metadata.contact</p>
+<div class="py-5 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12">
+  <div class="grid gap-3">
+    <div>
+      <p class="text-sm font-medium" translate>record.metadata.contact</p>
+    </div>
     <div
       *ngIf="shownOrganization?.logoUrl?.href"
-      class="mb-3 flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden"
+      class="flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
         [thumbnailUrl]="shownOrganization.logoUrl.href"
         fit="contain"
       ></gn-ui-thumbnail>
     </div>
-    <div class="flex mb-1">
-      <div
-        class="text-primary font-title text-21 mr-2 cursor-pointer hover:underline"
-        (click)="onOrganizationClick()"
-        data-cy="organization-name"
-      >
-        {{ shownOrganization.name }}
-      </div>
-    </div>
-    <div *ngIf="shownOrganization?.website" class="mb-6">
-      <a
-        [href]="shownOrganization.website"
-        target="_blank"
-        class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
-        >{{ shownOrganization.website }}
-        <mat-icon
-          class="material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
-          >open_in_new</mat-icon
+    <div class="grid gap-1">
+      <div class="flex">
+        <div
+          class="text-primary font-title text-21 mr-2 cursor-pointer hover:underline"
+          (click)="onOrganizationClick()"
+          data-cy="organization-name"
         >
-      </a>
-    </div>
-  </div>
-  <div *ngIf="contacts[0]?.phone" class="mb-5">
-    <div class="flex">
-      <mat-icon
-        class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-        >call_outline</mat-icon
-      >
-      <div class="flex flex-col ml-2">
-        <p class="text-sm">{{ contacts[0].phone }}</p>
+          {{ shownOrganization.name }}
+        </div>
       </div>
-    </div>
-  </div>
-  <div *ngIf="contacts[0]?.email" class="mb-5">
-    <div class="flex">
-      <mat-icon
-        class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-      >
-        mail_outline</mat-icon
-      >
-      <a
-        *ngIf="contacts.length"
-        [href]="'mailto:' + contacts[0].email"
-        class="text-sm hover:underline ml-2"
-        target="_blank"
-        data-cy="contact-email"
-        >{{ contacts[0].email }}</a
-      >
-    </div>
-  </div>
-  <div *ngIf="contacts[0]?.firstName || contacts[0]?.lastName" class="mb-5">
-    <div class="flex">
-      <mat-icon
-        class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-        >person_outline</mat-icon
-      >
-      <div class="flex flex-col ml-2">
-        <p class="text-sm">
-          {{ contacts[0]?.firstName || '' }} {{ contacts[0]?.lastName || '' }}
-        </p>
+      <div *ngIf="shownOrganization?.website">
+        <a
+          [href]="shownOrganization.website"
+          target="_blank"
+          class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
+          >{{ shownOrganization.website }}
+          <mat-icon
+            class="material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
+            >open_in_new</mat-icon
+          >
+        </a>
       </div>
     </div>
-  </div>
-  <div *ngIf="contacts[0]?.address" class="mb-2">
-    <div class="flex">
-      <mat-icon
-        class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-      >
-        location_on</mat-icon
-      >
-      <div class="flex flex-col ml-2">
-        <p *ngFor="let addressPart of address" class="text-sm">
-          {{ addressPart }}
-        </p>
+    <div class="grid gap-5 py-3 overflow-hidden">
+      <div *ngIf="contacts[0]?.phone">
+        <div class="flex">
+          <mat-icon
+            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+            >call_outline</mat-icon
+          >
+          <div class="flex flex-col ml-2">
+            <p class="text-sm">{{ contacts[0].phone }}</p>
+          </div>
+        </div>
+      </div>
+      <div *ngIf="contacts[0]?.email">
+        <div class="flex">
+          <mat-icon
+            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+          >
+            mail_outline</mat-icon
+          >
+          <a
+            *ngIf="contacts.length"
+            [href]="'mailto:' + contacts[0].email"
+            class="text-sm hover:underline ml-2"
+            target="_blank"
+            data-cy="contact-email"
+            >{{ contacts[0].email }}</a
+          >
+        </div>
+      </div>
+      <div *ngIf="contacts[0]?.firstName || contacts[0]?.lastName">
+        <div class="flex">
+          <mat-icon
+            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+            >person_outline</mat-icon
+          >
+          <div class="flex flex-col ml-2">
+            <p class="text-sm">
+              {{ contacts[0]?.firstName || '' }}
+              {{ contacts[0]?.lastName || '' }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div *ngIf="contacts[0]?.address">
+        <div class="flex">
+          <mat-icon
+            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+          >
+            location_on</mat-icon
+          >
+          <div class="flex flex-col ml-2">
+            <p *ngFor="let addressPart of address" class="text-sm">
+              {{ addressPart }}
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>