Add color codes, add tailwind class

for mel-badge-button, finish styling card
camptocamp · Jan 30, 2024 · 532e990 · 532e990
1 parent f0200d7
commit 532e990
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 43 deletions.
diff --git a/...mmon/results-list-item/results-card-last-created/results-card-last-created.component.html b/...mmon/results-list-item/results-card-last-created/results-card-last-created.component.html
@@ -2,46 +2,36 @@
   <a
     [title]="record.abstract"
     (click)="mdSelect.emit(record)"
-    class="bg-white group flex flex-col justify-between h-40 p-4 rounded border border-black filter overflow-hidden"
+    class="bg-gray-8 group flex flex-col justify-between relative h-40 p-[18px] [w-330px] rounded border border-gray-6 filter overflow-hidden"
   >
-    <div class="flex flex-col justify-between min-h-full cursor-pointer">
-      <div class="">
-        <h1 class="title-font font-bold text-lg line-clamp-1">
-          {{ record.title }}
-        </h1>
-      </div>
-      <div class="flex flex-row justify-between max-h-20">
-        <div class="flex flex-col grow justify-between basis-1/2">
-          <div class="flex">
-            <!-- <div>{{ creationDate }}</div> -->
-            <div>25/01/2024</div>
-          </div>
-          <div class="flex overflow-hidden">
-            <div *ngIf="record.keywords?.length">
-              <div class="">
-                <gn-ui-badge
-                  class="inline-block mr-2 lowercase truncate !text-primary bg-white"
-                  (click)="onKeywordClick(keyword)"
-                  [clickable]="true"
-                  *ngFor="let keyword of record.keywords.slice(0, 2)"
-                  >{{ keyword }}</gn-ui-badge
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="flex basis-20 max-h-20 items-center self-center">
-          <div class="flex border border-black">
-            <gn-ui-thumbnail
-              class="relative"
-              [thumbnailUrl]="
-                'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ05rFNWBfdbJncZA2x2miO4PpEB_kw_3jRxwZoFrzPCLSFjXnd'
-              "
-              fit="contain"
-            ></gn-ui-thumbnail>
-          </div>
-        </div>
+    <h1 class="title-font font-bold text-lg line-clamp-2">
+      {{ record.title }}
+    </h1>
+
+    <div class="flex flex-col justify-between w-[calc(100%-80px)]">
+      <!-- <div *ngIf="creationDate" class="text-sm mb-[10px] leading-none">{{ creationDate }}</div> -->
+      <div class="text-sm mb-[10px] leading-none">25/01/2024</div>
+
+      <div class="flex gap-1" *ngIf="record.keywords?.length">
+        <button
+          type="button"
+          [attr.aria-label]="keyword"
+          [title]="keyword"
+          class="mel-badge-button truncate"
+          (click)="onKeywordClick(keyword, $event)"
+          *ngFor="let keyword of record.keywords.slice(0, 2)"
+        >
+          {{ keyword }}
+        </button>
       </div>
     </div>
+
+    <gn-ui-thumbnail
+      class="absolute right-[10px] bottom-[10px] w-[80px] h-[80px]"
+      [thumbnailUrl]="
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEXgQAbfNwDvnX/xqI/ztJ3fMwD1v632ybr2yrv64treLADdJQDul3jvmXv//fz99fP76uT42tD41cn1xbTyrJTvoIPzt6LdGgDxqpH0X70FAAABe0lEQVR4nO3dSUpDURBA0Z/GNPbGGN3/So3gRAQVQeS+f84Cirrzgppu7+73D4fDbrt93Jyt3x1XHyx/7Wn1reP6B06bn9h+sp8eny/fXHxt8XvfTP5jV9fT5mIa2WI5g8LT8IVrhW0K+xT2KexT2Kew71x4HL5wpbBNYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2PdWuPjvJf7UuXCpsE1hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CvlkUPg1fOIObKIVtCvsU9insU9insE9hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPbNovBl+MLx/8wojFPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KeybReFp+MKNwjaFfQr7FPYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX2zKNwqbFPYp7BPYZ/CPoV9CvsU9s2j8GoxssubaX+9HNnN7hXkYxS97b4eqQAAAABJRU5ErkJggg=='
+      "
+      fit="contain"
+    ></gn-ui-thumbnail>
   </a>
 </div>
diff --git a/...common/results-list-item/results-card-last-created/results-card-last-created.component.ts b/...common/results-list-item/results-card-last-created/results-card-last-created.component.ts
@@ -23,7 +23,8 @@ export class ResultsCardLastCreatedComponent extends ResultsListItemComponent {
     return this.record?.recordCreated?.toLocaleDateString('fr')
   }
 
-  onKeywordClick(keyword: string) {
+  onKeywordClick(keyword: string, event: Event) {
+    event.stopPropagation()
     this.keyword.emit(keyword)
   }
 }
diff --git a/apps/datahub/src/styles.css b/apps/datahub/src/styles.css
@@ -8,4 +8,8 @@
   .mel-page-title {
     @apply text-black text-5xl font-extrabold font-title;
   }
+
+  .mel-badge-button {
+    @apply inline-block bg-white opacity-70 py-1.5 px-2 rounded font-medium text-primary border border-primary text-sm leading-none hover:border-primary-dark hover:text-gray-8 hover:bg-primary-dark cursor-pointer transition-colors;
+  }
 }
diff --git a/apps/datahub/tailwind.config.js b/apps/datahub/tailwind.config.js
@@ -1,6 +1,6 @@
-const baseConfig = require('../../node_modules/geonetwork-ui/tailwind.base.config');
-const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
-const { join } = require('path');
+const baseConfig = require('../../node_modules/geonetwork-ui/tailwind.base.config')
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind')
+const { join } = require('path')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -14,9 +14,22 @@ module.exports = {
     extend: {
       colors: {
         primary: '#E30513',
+        'primary-dark': '#AB0107',
+        'primary-light': '#FACED2',
         beige: '#F7F5F0',
+        secondary: '#007A80',
+        'secondary-dark': '#004E52',
+        'secondary-light': '#A1DBDE',
+        'gray-1': '#000000',
+        'gray-2': '#4C4C4C',
+        'gray-3': '#646464',
+        'gray-4': '#7C7C7C',
+        'gray-5': '#A1A1A1',
+        'gray-6': '#CCCDD2',
+        'gray-7': '#EEEEEE',
+        'gray-8': '#FFFFFF',
       },
     },
   },
   plugins: [],
-};
+}