fix: EDU Event Detail Page (#537)

* fixes after feedback on edu event detail page * fixing speaker data shape * fixing ICS generation * fixing custom date display * fixing ongoing date display * layout adjustment to related events carousel * fixing time for multi-day events
nasa-jpl · Aug 12, 2024 · 5f1ca74 · 5f1ca74
1 parent 8f2e3a2
commit 5f1ca74
Show file tree

Hide file tree

Showing 9 changed files with 345 additions and 209 deletions.
diff --git a/packages/vue/src/components/BaseTag/BaseTag.vue b/packages/vue/src/components/BaseTag/BaseTag.vue
@@ -11,7 +11,7 @@ const variantMap: Attributes = {
 const sizeMap: Attributes = {
   sm: 'text-xs border-t-2 py-1 px-2.5',
   md: 'text-xs lg:text-base border-t py-1.5 px-3.5',
-  lg: 'text-base lg:text-lg border-t py-1.5 px-5'
+  lg: 'text-base lg:text-lg border-t pt-1.5 pb-1 px-5'
 }
 
 interface BaseTagProps {

diff --git a/packages/vue/src/components/CalendarButton/CalendarButton.vue b/packages/vue/src/components/CalendarButton/CalendarButton.vue
@@ -64,13 +64,18 @@ export default defineComponent({
       options: undefined
     }
   },
+  computed: {
+    icsDescription() {
+      return `${(this.description ? this.description + '\n\n' : '') + window?.location.href}`
+    }
+  },
 
   mounted() {
     this.init()
   },
   methods: {
     init() {
-      let recurrence = {}
+      let recurrence = undefined
       if (this.endDatetime && this.isAllDay) {
         // Calculate how many full days
         const startDateDayjs = dayjs(this.startDatetime)
@@ -81,21 +86,15 @@ export default defineComponent({
 
       this.options = {
         title: this.title ? this.title : undefined,
-        location: this.location ? this.addSlashes(this.location) : undefined,
-        description: this.description ? this.description : undefined,
+        location: this.location ? this.location : undefined,
+        description: this.icsDescription,
         start: new Date(this.startDatetime),
         end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
         recurrence
       }
+
       this.icalendar = new ICalendar(this.options)
     },
-    addSlashes(string: string): string {
-      // Escape special characters COMMA, SEMI-COLON and BACKSLASH
-      // as temporary fix for this issue https://github.com/jshor/datebook/issues/179
-      // regex based of https://stackoverflow.com/a/770533
-      // eslint-disable-next-line
-      return string.replace(/[,;\\]/g, '\\$&').replace(/\u0000/g, '\\0')
-    },
     handleDownload() {
       const ics = this.icalendar.render()
       const blob = new Blob([ics], {

diff --git a/packages/vue/src/components/EventCard/EventCard.vue b/packages/vue/src/components/EventCard/EventCard.vue
@@ -65,12 +65,22 @@
             v-if="splitDate"
             class="hidden md:block absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
           >
-            <div class="font-extrabold text-6xl leading-tight tracking-wider">
-              {{ splitDate.day }}
-            </div>
-            <div class="text-subtitle">
-              {{ splitDate.monthAndYear }}
-            </div>
+            <template v-if="themeStore.isEdu">
+              <div class="font-extrabold text-6xl leading-tight tracking-wider">
+                {{ splitDate.month }}
+              </div>
+              <div class="text-subtitle">
+                {{ splitDate.year }}
+              </div>
+            </template>
+            <template v-else>
+              <div class="font-extrabold text-6xl leading-tight tracking-wider">
+                {{ splitDate.day }}
+              </div>
+              <div class="text-subtitle">
+                {{ splitDate.monthAndYear }}
+              </div>
+            </template>
           </div>
         </BaseImagePlaceholder>
       </div>
@@ -84,8 +94,11 @@ import { defineComponent } from 'vue'
 import {
   mixinFormatEventDates,
   mixinFormatSplitEventDates,
-  mixinFormatEventTimeInHoursAndMinutes
+  mixinFormatEventTimeInHoursAndMinutes,
+  type EventDateObject
 } from './../../utils/mixins'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -145,7 +158,8 @@ export default defineComponent({
     }
   },
   computed: {
-    splitDate(): { day: string; monthAndYear: string } | null {
+    ...mapStores(useThemeStore),
+    splitDate(): EventDateObject | null {
       if (this.startDate) {
         return mixinFormatSplitEventDates(this.startDate, this.endDate)
       }

diff --git a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue b/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
@@ -4,41 +4,55 @@
     class="EventDetailHero mb-10 md:mb-10 lg:mb-14 -mx-4 lg:mx-0"
   >
     <div class="hero">
-      <BaseImage
-        v-if="image.src"
-        :src="image.src.url"
-        :srcset="getSrcSet"
-        :width="image.src.width"
-        :height="image.src.height"
-        :alt="image.alt"
-        image-class="w-full h-auto"
-        object-fit-class="cover"
-        loading="lazy"
-      />
-      <div
-        v-if="startDateSplit"
-        class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+      <BaseImagePlaceholder
+        :aspect-ratio="constrain ? '16:9' : 'none'"
+        dark-mode
       >
-        <div class="font-extrabold text-6xl leading-tight tracking-wider">
-          {{ startDateSplit.day }}
+        <BaseImage
+          v-if="image.src"
+          :src="image.src.url"
+          :srcset="getSrcSet"
+          :width="image.src.width"
+          :height="image.src.height"
+          :alt="image.alt"
+          image-class="w-full h-auto"
+          object-fit-class="cover"
+          loading="lazy"
+        />
+        <div
+          v-if="startDateSplit || ongoing"
+          class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+        >
+          <template v-if="ongoing">
+            <div class="text-subtitle">Ongoing</div>
+          </template>
+          <template v-else>
+            <div class="font-extrabold text-6xl leading-tight tracking-wider uppercase">
+              {{ themeStore.isEdu ? startDateSplit?.month : startDateSplit?.day }}
+            </div>
+            <div class="text-subtitle">
+              {{ themeStore.isEdu ? startDateSplit?.year : startDateSplit?.monthAndYear }}
+            </div>
+          </template>
         </div>
-        <div class="text-subtitle">
-          {{ startDateSplit.monthAndYear }}
-        </div>
-      </div>
+      </BaseImagePlaceholder>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseImage from '../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from '../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import { mixinGetSrcSet, type EventDateObject } from './../../utils/mixins'
 import type { PropType } from 'vue'
 
 export default defineComponent({
   name: 'EventDetailHero',
   components: {
-    BaseImage
+    BaseImage,
+    BaseImagePlaceholder
   },
   props: {
     data: {
@@ -50,13 +64,23 @@ export default defineComponent({
       type: Object as PropType<EventDateObject | undefined>,
       required: true
     },
+    ongoing: {
+      type: Boolean,
+      default: false
+    },
     image: {
       type: Object,
       required: false,
       default: undefined
+    },
+    constrain: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     getSrcSet() {
       return this.image ? mixinGetSrcSet(this.image) : undefined
     }

diff --git a/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue b/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue
@@ -174,6 +174,7 @@ import BlockImageStandard from './../../components/BlockImage/BlockImageStandard
 import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
 import BlockText from './../../components/BlockText/BlockText.vue'
+import BlockVideo from './../../components/BlockText/BlockText.vue'
 
 export default defineComponent({
   name: 'PageNewsDetail',
@@ -190,7 +191,8 @@ export default defineComponent({
     BlockImageStandard,
     BlockLinkCarousel,
     ShareButtons,
-    BlockText
+    BlockText,
+    BlockVideo
   },
   props: {
     data: {