adding search grid results styles for collection link card

nasa-jpl · Sep 24, 2024 · 6c3f409 · 6c3f409
1 parent b072230
commit 6c3f409
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 16 deletions.
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
@@ -266,6 +266,7 @@ export const EduCollection = {
   ],
   args: {
     ...BlockLinkCardData,
+    size: 'sm',
     specialStyles: true,
     data: {
       page: {
@@ -294,11 +295,6 @@ export const EduCollection = {
   }
 }
 export const EduCollectionLarge = {
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
-    })
-  ],
   args: {
     ...BlockLinkCardData,
     size: 'lg',

diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -1,10 +1,11 @@
 <template>
   <div v-if="theItem">
-    <template v-if="metadataType === 'EDUCollectionsDetailPage' && size === 'lg' && specialStyles">
+    <template v-if="metadataType === 'EDUCollectionsDetailPage' && specialStyles">
       <BlockLinkCardCollectionLg
         :the-item="theItem as EduResourceCardObject"
         :metadata-type="metadataType"
         :metadata-attrs="metadataAttrs"
+        :size="size"
       />
     </template>
     <template v-else>

diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { computed, reactive } from 'vue'
 import type { EduResourceCardObject } from '../../interfaces'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
@@ -13,17 +13,23 @@ interface BlockLinkCardCollectionLgProps {
   metadataType?: string
   metadataAttrs?: any
   headingLevel?: HeadingLevel
+  size?: string
 }
 
 // define props
 const props = withDefaults(defineProps<BlockLinkCardCollectionLgProps>(), {
   theItem: undefined,
   metadataType: undefined,
   metadataAttrs: undefined,
-  headingLevel: undefined
+  headingLevel: undefined,
+  size: undefined
 })
 
-const { theItem, metadataType, metadataAttrs, headingLevel } = reactive(props)
+const { theItem, metadataType, metadataAttrs, headingLevel, size } = reactive(props)
+
+const isSmall = computed(() => {
+  return size === 'sm'
+})
 </script>
 
 <template>
@@ -33,11 +39,16 @@ const { theItem, metadataType, metadataAttrs, headingLevel } = reactive(props)
     :to="theItem.url ? theItem.url : undefined"
     :href="theItem.externalLink ? theItem.externalLink : undefined"
     class="BlockLinkCardCollectionLg group bg-stars bg-primary-dark"
-    link-class="block sm:flex flex-row mb-8 relative"
+    :link-class="`block mb-8 relative ${isSmall ? 'flex flex-col' : 'sm:flex flex-row'}`"
     external-target-blank
   >
     <BaseImagePlaceholder
-      class="bg-gray-dark h-full relative sm:absolute sm:top-0 sm:right-0 sm:bottom:0 overflow-hidden mb-6 sm:w-1/3 lg:mb-0 order-1 sm:order-2 z-20 aspect-ratio-three-two sm:aspect-ratio-one-one"
+      class="bg-gray-dark h-full relative overflow-hidden mb-6 z-20"
+      :class="{
+        'aspect-ratio-sixteen-nine': isSmall,
+        'sm:absolute sm:top-0 sm:right-0 sm:bottom:0 sm:w-1/3 lg:mb-0 order-1 sm:order-2 aspect-ratio-three-two sm:aspect-ratio-one-one':
+          !isSmall
+      }"
       dark-mode
       no-logo
     >
@@ -54,35 +65,48 @@ const { theItem, metadataType, metadataAttrs, headingLevel } = reactive(props)
       <div v-else></div>
     </BaseImagePlaceholder>
     <div
-      class="BlockLinkCard__CardContent px-6 pb-6 sm:pt-6 lg:px-12 lg:py-10 can-hover:group-hover:delay-200 ThemeVariantLight sm:w-2/3 order-2 sm:order-1"
+      class="BlockLinkCard__CardContent can-hover:group-hover:delay-200 ThemeVariantLight"
+      :class="{
+        'px-4 pb-4': isSmall,
+        'px-6 pb-6 sm:pt-6 lg:px-12 lg:py-10 sm:w-2/3 order-2 sm:order-1': !isSmall
+      }"
     >
       <div
         class="absolute z-0 inset-0 bg-gradient-to-r from-transparent-black-75 to-transparent"
       ></div>
       <div class="relative z-10">
         <template v-if="metadataAttrs">
           <BasePill
-            class="mb-4"
+            :class="{
+              'mb-2': isSmall,
+              'mb-4': !isSmall
+            }"
             size="sm"
             :content-type="metadataType"
           />
         </template>
 
         <component
           :is="headingLevel || 'p'"
-          class="text-white text-xl font-medium leading-tight tracking-tight edu:font-extrabold lg:text-3xl"
+          class="text-white text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
+          :class="{
+            'lg:text-3xl': !isSmall
+          }"
         >
           {{ theItem.title }}
         </component>
         <p
-          v-if="theItem.summary"
+          v-if="theItem.summary && !isSmall"
           class="mt-4 text-white line-clamp-2 sm:line-clamp-1 lg:line-clamp-2 xl:line-clamp-3"
         >
           {{ theItem.summary }}
         </p>
         <div
           v-if="metadataAttrs"
-          class="mt-4"
+          :class="{
+            'mt-1': isSmall,
+            'mt-4': !isSmall
+          }"
         >
           <MetadataEduResource
             :resource="theItem"

diff --git a/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.vue b/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.vue
@@ -28,6 +28,7 @@
       :heading-level="headingLevel"
       size="sm"
       show-calendar-chip
+      special-styles
     />
     <BlockLinkCard
       v-else-if="typename === 'News'"