refactor: item media thumbnails aspect ratio (#2447)

* Refactor item media thumbnail to show in aspect ratio * Override default thumbnail aspect ratio xxxl breakpoint * Remove p. from label * Update min-width small bp
europeana · Oct 9, 2024 · 433384f · 433384f
1 parent d447d14
commit 433384f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 39 deletions.
diff --git a/packages/portal/src/components/item/ItemMediaThumbnail.vue b/packages/portal/src/components/item/ItemMediaThumbnail.vue
@@ -11,11 +11,13 @@
       thumbnail-size="small"
       :linkable="false"
     />
-    <span class="thumbnail-page">{{ label }}</span>
-    <span
-      class="icon-media-type"
-      :class="mediaTypeIconClass"
-    />
+    <span class="thumbnail-content d-flex flex-wrap align-items-center position-absolute">
+      {{ label }}
+      <span
+        class="icon-media-type ml-auto"
+        :class="mediaTypeIconClass"
+      />
+    </span>
   </SmartLink>
 </template>
 
@@ -65,7 +67,7 @@
         return mediaType ? `icon-${mediaType.toLowerCase()}-bold` : '';
       },
       label() {
-        return this.$t('media.pages.indexLabel', { pageNumber: this.page });
+        return this.$n(this.page);
       }
     }
   };
@@ -77,11 +79,11 @@
   .item-media-thumbnail {
     background-color: $grey;
     padding: 0;
-    flex-shrink: 0;
-    width: 5.125rem;
+    width: auto;
     height: 3.625rem;
+    min-width: 3rem;
     display: flex;
-    align-items: center;
+    align-items: stretch;
     justify-content: center;
     overflow: hidden;
     margin-right: 1rem;
@@ -90,11 +92,14 @@
     color: $black;
 
     @media (min-width: $bp-medium) {
-      width: 11rem;
       height: 7.75rem;
     }
 
     @media (min-width: $bp-large) {
+      width: 11rem;
+      height: auto;
+      min-height: 5rem;
+      max-height: 28rem;
       margin-bottom: 1rem;
     }
 
@@ -127,13 +132,50 @@
       background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%);
     }
 
+    .thumbnail-content {
+      left: 0.25rem;
+      right: 0.25rem;
+      bottom: 0.25rem;
+      z-index: 1;
+      font-size: $font-size-small;
+      color: $white;
+      line-height: 1;
+
+      @media (min-width: $bp-medium) {
+        left: 0.5rem;
+        right: 0.5rem;
+        bottom: 0.5rem;
+      }
+
+      @media (min-width: $bp-large) {
+        left: 1rem;
+        right: 0.75rem;
+        bottom: 0.75rem;
+      }
+    }
+
     .media-card-image {
       width: 100%;
-      height: 100%;
+
+      @media (min-width: $bp-large) {
+        height: auto;
+      }
 
       .default-thumbnail {
         width: 100%;
         height: 100%;
+        min-width: 3rem;
+        aspect-ratio: auto;
+
+        @media (min-width: $bp-medium) {
+          min-width: 5rem;
+        }
+
+        [class^='icon-'] {
+          @media (max-width: ($bp-medium - 1px)) {
+            font-size: $font-size-large;
+          }
+        }
       }
 
       .card-img {
@@ -148,33 +190,8 @@
     }
 
     .icon-media-type {
-      position: absolute;
-      right: 0.5rem;
-      bottom: 0.5rem;
-      z-index: 1;
-      color: $white;
-      font-size: $font-size-small;
-      line-height: 1;
-
       @media (min-width: $bp-medium) {
         font-size: $font-size-large;
-        right: 0.75rem;
-        bottom: 0.75rem;
-      }
-    }
-
-    .thumbnail-page {
-      position: absolute;
-      bottom: 0.5rem;
-      left: 0.5rem;
-      color: $white;
-      z-index: 1;
-      line-height: 1;
-
-      @media (min-width: $bp-medium) {
-        font-size: $font-size-small;
-        bottom: 1rem;
-        left: 1rem;
       }
     }
   }

diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -110,6 +110,7 @@
 
     li {
       list-style-type: none;
+      flex-shrink: 0;
     }
 
     @media (min-width: $bp-large) {

diff --git a/packages/portal/src/i18n/lang/en.js b/packages/portal/src/i18n/lang/en.js
@@ -949,8 +949,7 @@ export default {
     },
     "pages": {
       "hide": "Hide pages",
-      "show": "Show pages",
-      "indexLabel": "p. {pageNumber}"
+      "show": "Show pages"
     }
   },
   "messages": {

diff --git a/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js b/packages/portal/tests/unit/components/item/ItemMediaThumbnail.spec.js
@@ -9,6 +9,7 @@ const factory = ({ propsData = {}, mocks = {} } = {}) => shallowMount(ItemMediaT
   mocks: {
     $route: { path: '/mock/path/', query: {} },
     $t: (key, opts) => key + JSON.stringify(opts),
+    $n: num => num,
     $nuxt: {},
     ...mocks
   }
@@ -56,7 +57,7 @@ describe('components/item/ItemMediaThumbnail', () => {
 
       const pageLabel = wrapper.vm.label;
 
-      expect(pageLabel).toBe('media.pages.indexLabel{"pageNumber":6}');
+      expect(pageLabel).toBe(6);
     });
   });
 });