fixes from feedback on edu events and news listing pages

nasa-jpl · Sep 3, 2024 · 40b8c19 · 40b8c19
1 parent 90f67ad
commit 40b8c19
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 19 deletions.
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -5,13 +5,13 @@
     :to="theItem.url ? theItem.url : undefined"
     :href="theItem.externalLink ? theItem.externalLink : undefined"
     class="BlockLinkCard group"
-    :link-class="`block ${small ? 'pb-3' : 'pb-5'} ${large ? 'sm:flex flex-row' : ''}`"
+    :link-class="`block ${small ? 'pb-3' : 'pb-5'} ${large ? 'sm:flex flex-row border-b border-gray-light-mid pb-5 mb-5' : ''}`"
     external-target-blank
   >
     <BaseImagePlaceholder
       :aspect-ratio="large ? '3:2' : '16:9'"
-      class="bg-gray-dark relative mb-6 edu:lg:mb-8 overflow-hidden"
-      :class="{ 'lg:mb-10': medium, 'sm:w-1/3': large }"
+      class="bg-gray-dark h-full relative overflow-hidden mb-6"
+      :class="{ 'lg:mb-10': medium, 'sm:w-1/3 lg:mb-0': large }"
       dark-mode
       no-logo
     >
@@ -97,7 +97,7 @@
         {{ theItem.title }}
       </component>
       <p
-        v-if="theItem.date"
+        v-if="theItem.date && !themeStore.isEdu"
         class="text-gray-mid-dark mt-2"
         :class="{ 'mt-2': !large, 'mt-4': large }"
       >
@@ -106,9 +106,19 @@
       <p
         v-if="large && theItem.summary"
         class="mt-4 text-gray-mid-dark"
+        :class="{
+          'line-clamp-2 sm:line-clamp-1 lg:line-clamp-2 xl:line-clamp-3': themeStore.isEdu
+        }"
       >
         {{ theItem.summary }}
       </p>
+      <p
+        v-if="theItem.date && themeStore.isEdu"
+        class="text-gray-mid-dark mt-2"
+        :class="{ 'mt-2': !large, 'mt-4': large }"
+      >
+        {{ theItem.date }}
+      </p>
       <div
         v-if="metadataAttrs"
         :class="{ 'mt-4': large, 'mt-2 mb-1': medium, 'mt-1 mb-0': small }"
@@ -117,7 +127,6 @@
           v-if="metadataType === 'EDUEventPage'"
           :event="theItem"
           :show-time="large"
-          :show-location="false"
           compact
         />
         <MetadataEduResource

diff --git a/packages/vue/src/components/BlockLinkCardList/BlockLinkCardList.vue b/packages/vue/src/components/BlockLinkCardList/BlockLinkCardList.vue
@@ -16,8 +16,6 @@ const props = withDefaults(defineProps<BlockLinkCardListProps>(), {
     <BlockLinkCard
       v-for="(item, index) in props.items"
       :key="index"
-      class="border-b border-gray-light-mid mb-5"
-      :class="{ 'pt-3': index !== 0 }"
       :data="item"
       size="lg"
       show-calendar-chip

diff --git a/packages/vue/src/components/CalendarChip/CalendarChip.vue b/packages/vue/src/components/CalendarChip/CalendarChip.vue
@@ -33,8 +33,11 @@ const splitDate = computed(() => {
       <div class="text-subtitle">Ongoing</div>
     </template>
     <template v-else-if="themeStore.isEdu && splitDate">
-      <div class="font-extrabold text-6xl leading-tight tracking-wider uppercase">
-        {{ splitDate.month }}
+      <div
+        v-if="splitDate.month"
+        class="font-extrabold text-6xl leading-tight tracking-wider uppercase"
+      >
+        {{ splitDate.month.substring(0, 3) }}
       </div>
       <div class="text-subtitle">
         {{ splitDate.year }}

diff --git a/packages/vue/src/components/Icons/IconCalendar.vue b/packages/vue/src/components/Icons/IconCalendar.vue
@@ -2,8 +2,8 @@
   <svg
     class="IconCalendar"
     width="20"
-    height="19"
-    viewBox="0 0 20 19"
+    height="20"
+    viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
     aria-hidden="true"
     focusable="false"

diff --git a/packages/vue/src/components/SearchResultCard/SearchResultCard.vue b/packages/vue/src/components/SearchResultCard/SearchResultCard.vue
@@ -20,7 +20,7 @@
           endDate,
           customDate,
           location,
-          eventType: eventType,
+          eventType,
           ongoing
         }
       }"

diff --git a/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.vue b/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.vue
@@ -15,12 +15,15 @@
           startDate,
           endTime,
           endDate,
+          customDate,
           location,
-          eventType: eventType
+          eventType,
+          ongoing
         }
       }"
       :heading-level="headingLevel"
       size="sm"
+      show-calendar-chip
     />
     <BlockLinkCard
       v-else-if="typename === 'News'"
@@ -148,6 +151,11 @@ export default defineComponent({
       type: String,
       required: false
     },
+    customDate: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     startTime: {
       type: String,
       required: false,

diff --git a/packages/vue/src/components/SearchResultsList/SearchResultsList.vue b/packages/vue/src/components/SearchResultsList/SearchResultsList.vue
@@ -45,10 +45,14 @@
           :topic="page.topic"
           :image="page.image"
           :date="page.date"
+          :custom-date="page.customDate"
           :start-date="page.startDate"
           :end-date="page.endDate"
           :start-time="page.startTime"
           :end-time="page.endTime"
+          :event-type="page.eventType"
+          :ongoing="page.ongoing"
+          :location="page.location"
           :title="page.title"
           heading-level="h2"
         />
@@ -126,6 +130,7 @@ export default defineComponent({
                   : page._source[handle + '__image']
               // date field is different for mission and event detail pages
               let date
+              let location
               let topic =
                 handle === 'missions_mission'
                   ? page._source[handle + '__status_filter']
@@ -137,6 +142,7 @@ export default defineComponent({
                 date = 'Event date: ' + parseDate(page._source[handle + '__start_datetime'])
               } else if (handle === 'edu_events_edueventpage') {
                 date = null
+                location = page._source[handle + '__location_filter']
               } else if (handle === 'missions_mission') {
                 date = page._source.display_date_filter
                   ? 'Launch date: ' + page._source.display_date_filter
@@ -161,9 +167,7 @@ export default defineComponent({
               page.topic = topic
               // properties for event's page
               page.location =
-                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
-                  ? page._source[handle + '__location'] | page._source[handle + '__location_name']
-                  : null
+                handle === 'events_eventpage' ? page._source[handle + '__location'] : location
               page.startDate =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
                   ? page._source[handle + '__start_datetime']

diff --git a/packages/vue/src/utils/mixins.ts b/packages/vue/src/utils/mixins.ts
@@ -288,14 +288,16 @@ export const mixinLightboxGalleryItems = (items: object | any): object | false =
 // return event dates for the red box that appears in the corner of the hero and thumbnail images
 export const mixinFormatSplitEventDates = (
   startDatetime: string,
-  endDatetime?: string
+  endDatetime?: string,
+  compact?: boolean
 ): EventDateObject => {
   const startDateDayjs = dayjs(startDatetime)
 
+  const monthFormat = compact ? 'MM' : 'MMM'
   let day = startDateDayjs.format('D')
-  const month = startDateDayjs.format('MMM').replace('.', '')
+  const month = startDateDayjs.format(monthFormat).replace('.', '')
   const year = startDateDayjs.format('YYYY')
-  const monthAndYear = startDateDayjs.format('MMM YYYY')
+  const monthAndYear = startDateDayjs.format(`${monthFormat} YYYY`)
 
   if (endDatetime) {
     const endDateDayjs = dayjs(endDatetime)