SectionTeaserCard

UCLALibrary · Jul 24, 2024 · ea70b53 · ea70b53
1 parent fc0c997
commit ea70b53
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 44 deletions.
diff --git a/app.vue b/app.vue
@@ -1,6 +1,9 @@
 <script setup>
+import { provideTheme } from '@/composables/provideTheme'
+provideTheme()
 const { enabled, state } = usePreviewMode()
 </script>
+
 <template>
   <div>
     <NuxtLoadingIndicator

diff --git a/gql/queries/FTVAEventDetail.gql b/gql/queries/FTVAEventDetail.gql
@@ -6,6 +6,7 @@ query FTVAEventDetail($slug: [String!]) {
     typeHandle
     slug
     uri
+
     imageCarousel {
       ...on imageCarousel_imageCarousel_BlockType {
         image {
@@ -27,6 +28,28 @@ query FTVAEventDetail($slug: [String!]) {
     guestSpeaker
     acknowledements: richText
 
+    ftvaEventScreeningDetails {
+      ...on ftvaEventScreeningDetails_screeningDetails_BlockType {
+        screeningTitle
+        alternateTitle
+        languageTranslated
+        year
+        country
+        languageInfo
+        runtime
+        screeningTags {
+          title
+        }
+        descriptionOfScreening
+        trailer
+        image {
+          ...on mediaAndDocuments_Asset {
+            ...Image
+          }
+        }
+      }
+    }
+
     # SIDEBAR
     # BlockEventDetail
     startDateWithTime
@@ -38,42 +61,21 @@ query FTVAEventDetail($slug: [String!]) {
       publicUrl
       address
     }
+
     # BlockInfo / Ticket Info
     ftvaTicketInformation {
       title
       uri
     }
-
     ftvaEventRegistration {
       ...on ftvaEventRegistration_eventRegistration_BlockType {
         registrationText
         registrationUrlLink
       }
     }
-
-    ftvaEventScreeningDetails {
-      ...on ftvaEventScreeningDetails_screeningDetails_BlockType {
-        screeningTitle
-        alternateTitle
-        languageTranslated
-        year
-        country
-        languageInfo
-        runtime
-        screeningTags {
-          title
-        }
-        descriptionOfScreening
-        trailer
-        image {
-          ...on mediaAndDocuments_Asset {
-            ...Image
-          }
-        }
-      }
-    }
   }
 
+  # SectionTeaserCard
   ftvaEventSeries: entries(
     section: "ftvaEventSeries",  orderBy: "postDate",
     relatedToEntries: {section: "ftvaEvent", slug: $slug}) {
@@ -84,12 +86,11 @@ query FTVAEventDetail($slug: [String!]) {
       title
       ftvaEvent {
         ... on ftvaEvent_ftvaEvent_Entry {
-        id
-        title
-        startDate: startDateWithTime @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
-        startTime: startDateWithTime @formatDateTime(format: "TH:i:s", timezone: "America/Los_Angeles")
-
-          image: ftvaImage {
+          id
+          title
+          startDate: startDateWithTime @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
+          startTime: startDateWithTime @formatDateTime(format: "TH:i:s", timezone: "America/Los_Angeles")
+          media: ftvaImage {
             ...Image
           }
         }

diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
@@ -1,6 +1,4 @@
 <script setup>
-// COMPONENTS
-// import { SectionWrapper, DividerWayFinder, NavBreadcrumb, ResponsiveImage, FlexibleMediaGalleryNewLightbox, CardMeta, RichText, BlockInfo, SectionScreeningDetails, SectionCardWithImage } from 'ucla-library-website-components'
 
 // HELPERS
 import _get from 'lodash/get'
@@ -104,22 +102,15 @@ const parsedStartTime = computed(() => {
       parent-title="All Events"
     />
 
-    <h4>{{ parsedImage }}</h4>
-    <h3>ResponsiveImage 1</h3>
-    <ResponsiveImage
-      :media="parsedImage[0].media[0]"
-      class="responsive-image"
-    />
-
-
-    <h3>ResponsiveImage 2</h3>
-    <responsive-image :media="parsedImage[0].media[0]">
+    <responsive-image :media="parsedImage[0].image[0]">
       <template v-slot:credit>
         Photo by John Doe
       </template>
     </responsive-image>
     <hr>
 
+    <h3>FlexibleMediaGalleryNewLightbox </h3>
+    <h4>parsedImage-- {{ parsedImage }}</h4>
     <FlexibleMediaGalleryNewLightbox :items="parsedImage" />
 
     <SectionWrapper>
@@ -149,17 +140,17 @@ const parsedStartTime = computed(() => {
       <SectionScreeningDetails :items="page.ftvaEventScreeningDetails" />
     </SectionWrapper>
 
+    <h3>series[0].ftvaEvent--{{ series[0].ftvaEvent }}</h3>
     <SectionWrapper
       v-if="series && series.length > 0"
       section-title="Explore upcoming events in this series"
     >
-      <h3>CardWithImage</h3>
-      <code v-if="series[0].ftvaEvent"> series.ftvaEvent:: {{ series[0].ftvaEvent }} </code>
 
-      <SectionCardWithImage
+      <SectionTeaserCard
         v-if="series && series.length > 0"
         :items="series[0].ftvaEvent"
       />
+
     </SectionWrapper>
 
     <SectionWrapper section-title="SIDEBAR">