Merge pull request #835 from geonetwork/dh-move-keywords-back

feat(dh): move keywords back below abstract, improve badges
geonetwork · Apr 8, 2024 · e441b92 · e441b92
2 parents 70a9dc1 + 34b395d
commit e441b92
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 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
@@ -7,6 +7,20 @@
         ></gn-ui-markdown-parser>
       </div>
     </gn-ui-max-lines>
+    <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"
+          (click)="onKeywordClick(keyword)"
+          [clickable]="true"
+          *ngFor="let keyword of metadata.keywords"
+          >{{ keyword.label }}</gn-ui-badge
+        >
+      </div>
+    </div>
   </gn-ui-content-ghost>
 </div>
 
@@ -234,17 +248,5 @@ <h5 translate class="font-medium text-black text-sm mb-[2px] mt-[16px]">
         >
       </div>
     </div>
-    <div *ngIf="metadata.keywords?.length">
-      <p class="text-sm mb-1" translate>record.metadata.keywords</p>
-      <div class="sm:pb-4 sm:pr-16">
-        <gn-ui-badge
-          class="inline-block mr-2 mb-2 lowercase"
-          (click)="onKeywordClick(keyword)"
-          [clickable]="true"
-          *ngFor="let keyword of metadata.keywords"
-          >{{ keyword.label }}</gn-ui-badge
-        >
-      </div>
-    </div>
   </div>
 </gn-ui-expandable-panel>
diff --git a/libs/ui/widgets/src/lib/badge/badge.component.html b/libs/ui/widgets/src/lib/badge/badge.component.html
@@ -1,7 +1,9 @@
 <div
   class="inline-block bg-black opacity-70 py-1.5 px-3 rounded font-medium text-gray-50 text-sm leading-none"
   [ngClass]="
-    clickable ? 'hover:bg-gray-800 cursor-pointer transition-colors' : ''
+    clickable
+      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'
+      : ''
   "
 >
   <ng-content></ng-content>