fix: improve display

geonetwork · Jul 25, 2023 · 3f8b954 · 3f8b954
1 parent 98a6dc8
commit 3f8b954
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 23 deletions.
diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
@@ -4,12 +4,11 @@
     [title]="organisation.name"
   >
     <div
-      class="flex-shrink-0 bg-gray-100 rounded-lg w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0"
+      class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
         [thumbnailUrl]="organisation.logoUrl"
-        fit="contain"
       >
       </gn-ui-thumbnail>
     </div>
@@ -24,15 +23,6 @@
       >
         {{ organisation.description }}
       </p>
-      <!--
-    <button
-      translate
-      class="flex items-center justify-center capitalize bg-[#c2cfe3] text-white p-1 rounded text-sm my-2 p-0 pr-1"
-    >
-      <mat-icon class="flex text-base">add </mat-icon>
-      <span>suivre</span>
-    </button>
--->
       <div class="flex-shrink-0 text-primary opacity-50 flex leading-6">
         <mat-icon class="text-primary opacity-50 mr-1">folder_open </mat-icon>
         <span class="mx-1">{{ organisation.recordCount }}</span>

diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -30,7 +30,7 @@ export class ThumbnailComponent implements AfterViewInit, OnDestroy {
     this.imgUrl = url || this.placeholderUrl
     this.isPlaceholder = !url
   }
-  @Input() fit: 'cover' | 'contain' = 'contain'
+  @Input() fit: 'cover' | 'contain' | 'scale-down'
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   imgUrl: string
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
@@ -67,13 +67,13 @@ export class ThumbnailComponent implements AfterViewInit, OnDestroy {
   }
 
   setObjectFit(e) {
-    if (e && e.target) {
-      if (
-        e.target.naturalWidth > e.target.parentElement.clientWidth ||
-        e.target.naturalHeight > e.target.parentElement.clientHeight
-      ) {
-        this.fit = 'cover'
-      }
+    const cw = e?.target?.parentElement.clientWidth
+    const ch = e?.target?.parentElement.clientHeight
+    if (!this.fit && cw > 0 && ch > 0) {
+      this.fit =
+        e.target.naturalWidth > cw || e.target.naturalHeight > ch
+          ? 'cover'
+          : 'scale-down'
     }
   }
 }
diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
@@ -22,11 +22,9 @@
           style="width: 42px; height: 42px; font-size: 42px; margin: 10px"
           >{{ hasOnlyPerson ? 'face' : 'home_work' }}</mat-icon
         >
-        <img
+        <gn-ui-thumbnail
           *ngIf="hasLogo"
-          [src]="contact.logoUrl"
-          alt="Organization logo"
-          class="object-contain w-full h-full"
+          [thumbnailUrl]="contact.logoUrl"
         />
       </div>
       <div class="flex flex-col overflow-hidden items-start">