fix: image aspect ratios

Author: davidnixon

components/Character/Item.vue

@@ -48,7 +48,7 @@ const thumbnail = computed(() => {
             v-if="thumbnail"
             :src="thumbnail"
             :alt="data?.name"
-            class="h-36 w-24"
+            class="aspect-4/6 min-h-36 w-24"
           />
         </div>
         <p class="text-xl">

components/Comic/Tile.vue

@@ -22,12 +22,12 @@ defineProps({
   <cv-tile
     v-if="comic"
     kind="clickable"
-    class="m-4 h-96"
+    class="m-4"
   >
     <external-image
       :src="`${comic?.thumbnail?.path}.${comic?.thumbnail?.extension}`"
       :alt="comic?.name"
-      class="size-full object-left"
+      class="aspect-4/6 min-h-80 w-full object-cover object-left"
     />
     <div v-if="comic?.error">
       Error loading data

components/Event/DataRow.vue

@@ -1,9 +1,25 @@
 <script setup>
 import { DateTime } from 'luxon'
 
+/**
+ * @typedef MarvelEventAvailable
+ * @propery {number} available
+ */
+
+/**
+ * @typedef MarvelEvent
+ * @property {string} start
+ * @property {string} end
+ * @property {string} title
+ * @property {string} description
+ * @property {ComicImage} thumbnail
+ * @property {MarvelEventAvailable} characters
+ * @property {MarvelEventAvailable} comics
+ */
+
 const props = defineProps({
   data: {
-    type: Object,
+    type: /** @type MarvelEvent */ Object,
     required: true,
   },
   expandable: { type: Boolean, default: false },

components/ExternalImage.vue

@@ -12,18 +12,19 @@ function onImageLoaded() {
 </script>
 
 <template>
-  <img
-    :src="src"
-    :alt="alt"
-    class="opacity-0 blur-lg transition-all duration-500"
-    :class="[{ 'opacity-100 blur-none ': imgLoaded }, $attrs['class']]"
-    @load="onImageLoaded"
-  >
-  <!-- Show a placeholder while loading -->
-  <cv-skeleton-text
-    v-if="!imgLoaded"
-    width="100%"
-  />
+  <div>
+    <img
+      :src="src"
+      :alt="alt"
+      class="opacity-0 blur-lg transition-all duration-500"
+      :class="[{ 'opacity-100 blur-none ': imgLoaded }, $attrs['class']]"
+      @load="onImageLoaded"
+    >
+    <!-- Show a placeholder while loading -->
+    <cv-skeleton-text
+      v-if="!imgLoaded"
+    />
+  </div>
 </template>
 
 <style scoped lang="scss">

components/TheHeader.vue

@@ -29,6 +29,11 @@ const otherApps = ref([
   { id: 'hello-vue', name: 'Hello Carbon Vue', link: 'https://github.com/IBM/hello-carbon-vue3' },
   { id: 'carbon-vue', name: 'Carbon Vue Storybook', link: 'https://vue.carbondesignsystem.com/' },
 ])
+
+// close the sideNav if somethihg is clicked there.
+function sideNav() {
+  document?.activeElement?.blur()
+}
 </script>
 
 <template>
@@ -178,7 +183,7 @@ const otherApps = ref([
         :fixed="true"
         :expanded="false"
       >
-        <cv-side-nav-items>
+        <cv-side-nav-items @click="sideNav">
           <cv-side-nav-link
             id="header-side-nav-home"
             to="/"

composables/useMarvelEvents.js

@@ -6,12 +6,7 @@ const marvelEventData = ref({
     limit: 0,
     total: 0,
     count: 0,
-    results: [
-      { loading: true },
-      { loading: true },
-      { loading: true },
-      { loading: true },
-    ],
+    results: [],
   },
 })
 

pages/Events.vue

@@ -2,12 +2,13 @@
 import { View20 as ShowAllIcon, ViewOff20 as HideIcon } from '@carbon/icons-vue'
 
 const marvelEvents = useMarvelEvents()
-const loading = computed(() => {
-  return marvelEvents.value?.data?.results?.length <= 0
-})
+
 const marveEventsList = computed(() => {
   return marvelEvents.value?.data.results || []
 })
+const loading = computed(() => {
+  return marveEventsList.value.length <= 0
+})
 
 const { t, locale } = useI18n()