From 2e84df797c038626bcebb47646639c48e24cb566 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Tue, 1 Oct 2024 13:37:15 -0700
Subject: [PATCH 1/5] chore: start branch

---
 pages/events/[slug].vue | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index de433a9..9f28c9b 100644
--- a/pages/events/[slug].vue
+++ b/pages/events/[slug].vue
@@ -2,7 +2,7 @@
 // COMPONENT RE-IMPORTS
 // TODO: remove when we have implemented component library as a module
 // https://nuxt.com/docs/guide/directory-structure/components#library-authors
-import { BlockEventDetail, BlockInfo, BlockTag, ButtonDropdown, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, NavBreadcrumb, ResponsiveImage, RichText, SectionScreeningDetails, SectionTeaserCard, SectionWrapper } from 'ucla-library-website-components'
+import { BlockEventDetail, BlockInfo, BlockTag, ButtonDropdown, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, NavBreadcrumb, ResponsiveImage, RichText, SectionScreeningDetails, SectionTeaserCard, SectionWrapper, TwoColLayoutWStickySideBar } from 'ucla-library-website-components'
 
 // HELPERS
 import _get from 'lodash/get'
@@ -153,7 +153,13 @@ const parsedFTVAEventScreeningDetails = computed(() => {
       </div>
     </div>
 
-    <div
+    <TwoColLayoutWStickySideBar data-test="second-column">
+      <template #primaryTop>
+      </template>
+      <template #primaryMid>
+      </template>
+    </TwoColLayoutWStickySidebar>
+    <!-- <div
       data-test="second-column"
       class="two-column"
     >
@@ -183,8 +189,6 @@ const parsedFTVAEventScreeningDetails = computed(() => {
         </SectionWrapper>
       </div>
 
-      <!-- sidebar slots in here on mobile -->
-      <!-- on desktop sidebar is stickied to the side with css -->
       <div class="sidebar-column">
         <div class="sidebar-content-wrapper">
           <BlockEventDetail
@@ -223,7 +227,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
           />
         </SectionWrapper>
       </div>
-    </div>
+    </div> -->
 
     <SectionWrapper
       v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
@@ -240,10 +244,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
   </main>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 // PAGE STYLES
 .page-event-detail {
   position: relative;

From 759cf2036a54feb05eb2d36157892eff49dcb175 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Tue, 1 Oct 2024 16:15:48 -0700
Subject: [PATCH 2/5] chore: refactor sidebar

---
 pages/events/[slug].vue | 66 ++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 41 deletions(-)

diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index 9f28c9b..e8225ab 100644
--- a/pages/events/[slug].vue
+++ b/pages/events/[slug].vue
@@ -153,19 +153,10 @@ const parsedFTVAEventScreeningDetails = computed(() => {
       </div>
     </div>
 
-    <TwoColLayoutWStickySideBar data-test="second-column">
+    <!-- data-test="second-column" -->
+    <TwoColLayoutWStickySideBar>
       <template #primaryTop>
-      </template>
-      <template #primaryMid>
-      </template>
-    </TwoColLayoutWStickySidebar>
-    <!-- <div
-      data-test="second-column"
-      class="two-column"
-    >
-      <div class="primary-column top">
-        <SectionWrapper>
-          <CardMeta
+      <CardMeta
             data-test="text-block"
             :category="series[0]?.title"
             :title="page?.title"
@@ -173,24 +164,8 @@ const parsedFTVAEventScreeningDetails = computed(() => {
             :tag-labels="page?.tagLabels"
             :introduction="page?.introduction"
           />
-          <RichText
-            v-if="page?.eventDescription"
-            data-test="event-description"
-            class="eventDescription"
-            :rich-text-content="page?.eventDescription"
-          />
-
-          <RichText
-            v-if="page?.acknowledements"
-            data-test="acknowledgements"
-            class="acknowledgements"
-            :rich-text-content="page?.acknowledements"
-          />
-        </SectionWrapper>
-      </div>
-
-      <div class="sidebar-column">
-        <div class="sidebar-content-wrapper">
+      </template>
+      <template #sidebarTop>
           <BlockEventDetail
             data-test="event-details"
             :start-date="page?.startDateWithTime"
@@ -206,28 +181,37 @@ const parsedFTVAEventScreeningDetails = computed(() => {
             :is-event="true"
             :debug-mode-enabled="false"
           />
+      </template>
+      <!--<template #primaryMid>
+        <RichText
+            v-if="page?.eventDescription"
+            data-test="event-description"
+            class="eventDescription"
+            :rich-text-content="page?.eventDescription"
+          />
+        <RichText
+            v-if="page?.acknowledements"
+            data-test="acknowledgements"
+            class="acknowledgements"
+            :rich-text-content="page?.acknowledements"
+          />
+      </template> -->
+      <template #sidebarBottom>
           <BlockInfo
             v-if="page?.ftvaTicketInformation && page?.ftvaTicketInformation.length > 0"
             data-test="ticket-info"
             :ftva-ticket-information="page?.ftvaTicketInformation"
           />
-        </div>
-      </div>
-
-      <div class="primary-column bottom">
-        <SectionWrapper>
+      </template>
+      <template #primaryBottom>
           <DividerWayFinder />
-        </SectionWrapper>
-
-        <SectionWrapper>
           <SectionScreeningDetails
             v-if="parsedFTVAEventScreeningDetails"
             data-test="screening-details"
             :items="parsedFTVAEventScreeningDetails"
           />
-        </SectionWrapper>
-      </div>
-    </div> -->
+      </template>
+    </TwoColLayoutWStickySidebar>
 
     <SectionWrapper
       v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"

From ba16ab43d13e20814b54287c96031bd082ae432b Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Wed, 2 Oct 2024 10:57:18 -0700
Subject: [PATCH 3/5] chore: refactor to use sidebar

---
 package.json            |   4 +-
 pages/events/[slug].vue | 208 ++++++++++++++++++----------------------
 pnpm-lock.yaml          |  11 +--
 3 files changed, 98 insertions(+), 125 deletions(-)

diff --git a/package.json b/package.json
index 5329fa3..6b5a0a7 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,6 @@
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
 		"ucla-library-design-tokens": "^5.22.0",
-		"ucla-library-website-components": "3.22.1"
+		"ucla-library-website-components": "3.26.0"
 	}
-}
+}
\ No newline at end of file
diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index e8225ab..2f0ba55 100644
--- a/pages/events/[slug].vue
+++ b/pages/events/[slug].vue
@@ -154,64 +154,67 @@ const parsedFTVAEventScreeningDetails = computed(() => {
     </div>
 
     <!-- data-test="second-column" -->
-    <TwoColLayoutWStickySideBar>
+    <TwoColLayoutWStickySideBar
+      data-test="second-column"
+      class="two-column"
+    >
       <template #primaryTop>
-      <CardMeta
-            data-test="text-block"
-            :category="series[0]?.title"
-            :title="page?.title"
-            :guest-speaker="page?.guestSpeaker"
-            :tag-labels="page?.tagLabels"
-            :introduction="page?.introduction"
-          />
+        <CardMeta
+          data-test="text-block"
+          :category="series[0]?.title"
+          :title="page?.title"
+          :guest-speaker="page?.guestSpeaker"
+          :tag-labels="page?.tagLabels"
+          :introduction="page?.introduction"
+        />
       </template>
       <template #sidebarTop>
-          <BlockEventDetail
-            data-test="event-details"
-            :start-date="page?.startDateWithTime"
-            :time="page?.startDateWithTime"
-            :locations="page?.location"
-          />
-          <ButtonDropdown
-            data-test="calendar-dropdown"
-            :title="parsedCalendarData?.title"
-            :event-description="parsedCalendarData?.eventDescription"
-            :start-date-with-time="parsedCalendarData?.startDateWithTime"
-            :location="parsedCalendarData?.location"
-            :is-event="true"
-            :debug-mode-enabled="false"
-          />
+        <BlockEventDetail
+          data-test="event-details"
+          :start-date="page?.startDateWithTime"
+          :time="page?.startDateWithTime"
+          :locations="page?.location"
+        />
+        <ButtonDropdown
+          data-test="calendar-dropdown"
+          :title="parsedCalendarData?.title"
+          :event-description="parsedCalendarData?.eventDescription"
+          :start-date-with-time="parsedCalendarData?.startDateWithTime"
+          :location="parsedCalendarData?.location"
+          :is-event="true"
+          :debug-mode-enabled="false"
+        />
       </template>
-      <!--<template #primaryMid>
+      <template #primaryMid>
         <RichText
-            v-if="page?.eventDescription"
-            data-test="event-description"
-            class="eventDescription"
-            :rich-text-content="page?.eventDescription"
-          />
+          v-if="page?.eventDescription"
+          data-test="event-description"
+          class="eventDescription"
+          :rich-text-content="page?.eventDescription"
+        />
         <RichText
-            v-if="page?.acknowledements"
-            data-test="acknowledgements"
-            class="acknowledgements"
-            :rich-text-content="page?.acknowledements"
-          />
-      </template> -->
+          v-if="page?.acknowledements"
+          data-test="acknowledgements"
+          class="acknowledgements"
+          :rich-text-content="page?.acknowledements"
+        />
+      </template>
       <template #sidebarBottom>
-          <BlockInfo
-            v-if="page?.ftvaTicketInformation && page?.ftvaTicketInformation.length > 0"
-            data-test="ticket-info"
-            :ftva-ticket-information="page?.ftvaTicketInformation"
-          />
+        <BlockInfo
+          v-if="page?.ftvaTicketInformation && page?.ftvaTicketInformation.length > 0"
+          data-test="ticket-info"
+          :ftva-ticket-information="page?.ftvaTicketInformation"
+        />
       </template>
       <template #primaryBottom>
-          <DividerWayFinder />
-          <SectionScreeningDetails
-            v-if="parsedFTVAEventScreeningDetails"
-            data-test="screening-details"
-            :items="parsedFTVAEventScreeningDetails"
-          />
+        <DividerWayFinder />
+        <SectionScreeningDetails
+          v-if="parsedFTVAEventScreeningDetails"
+          data-test="screening-details"
+          :items="parsedFTVAEventScreeningDetails"
+        />
       </template>
-    </TwoColLayoutWStickySidebar>
+    </TwoColLayoutWStickySideBar>
 
     <SectionWrapper
       v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
@@ -255,25 +258,25 @@ const parsedFTVAEventScreeningDetails = computed(() => {
   }
 
   .two-column {
-    position: relative;
-    width: 100%;
-    max-width: var(--max-width);
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    .primary-column {
-      margin-bottom: 0px;
-      width: 67%;
-
-      .section-wrapper {
-        padding-left: 0px;
-      }
-
-      &.bottom {
-        margin-top: -30px;
-      }
-    }
+    // position: relative;
+    // width: 100%;
+    // max-width: var(--max-width);
+    // display: flex;
+    // flex-direction: row;
+    // flex-wrap: wrap;
+
+    // .primary-column {
+    //   margin-bottom: 0px;
+    //   width: 67%;
+
+    //   .section-wrapper {
+    //     padding-left: 0px;
+    //   }
+
+    //   &.bottom {
+    //     margin-top: -30px;
+    //   }
+    // }
 
     .ftva.button-dropdown {
       margin-top: 30px;
@@ -291,22 +294,22 @@ const parsedFTVAEventScreeningDetails = computed(() => {
 
     // move these styles to a component so they can be reused & kept in sync
     // with /series/[slug].vue
-    .sidebar-column {
-      min-width: 314px;
-      width: 30%;
-      position: absolute;
-      height: 100%;
-      top: 0;
-      right: 0;
-      padding-top: var(--space-2xl);
-      padding-bottom: 40px;
-
-      .sidebar-content-wrapper {
-        position: sticky;
-        top: 85px;
-        will-change: top;
-      }
-    }
+    // .sidebar-column {
+    //   min-width: 314px;
+    //   width: 30%;
+    //   position: absolute;
+    //   height: 100%;
+    //   top: 0;
+    //   right: 0;
+    //   padding-top: var(--space-2xl);
+    //   padding-bottom: 40px;
+
+    //   .sidebar-content-wrapper {
+    //     position: sticky;
+    //     top: 85px;
+    //     will-change: top;
+    //   }
+    // }
   }
 
   /* makes all EventSeries same height */
@@ -316,47 +319,20 @@ const parsedFTVAEventScreeningDetails = computed(() => {
 
   @media (max-width: 1200px) {
 
-    .one-column,
-    .two-column {
+    // .two-column
+    .one-column {
       padding-left: var(--unit-gutter);
       padding-right: var(--unit-gutter);
     }
 
-    .sidebar-column {
-      padding-right: var(--unit-gutter);
-    }
-
-    .two-column>.primary-column {
-      width: 62%;
+    :deep(.primary-column) {
+      width: 65%;
     }
   }
 
   @media #{$small} {
-    .two-column {
-      display: grid;
-      grid-template-columns: 1fr;
-
-      .primary-column {
-        width: auto;
-        grid-column: 1;
-
-        .section-wrapper {
-          padding-left: var(--unit-gutter);
-        }
-
-        &.bottom {
-          margin-top: auto;
-        }
-      }
-
-      .sidebar-column {
-        width: auto;
-        position: relative;
-        grid-column: 1;
-        margin: auto var(--unit-gutter);
-        padding-top: 0px;
-        height: auto; // let content determine height on mobile
-      }
+    :deep(.primary-column) {
+      width: inherit;
     }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 136f573..59bca68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,8 +68,8 @@ devDependencies:
     specifier: ^5.22.0
     version: 5.22.0
   ucla-library-website-components:
-    specifier: 3.22.1
-    version: 3.22.1(typescript@5.4.5)(vue@3.4.31)
+    specifier: 3.26.0
+    version: 3.26.0(typescript@5.4.5)(vue@3.4.31)
 
 packages:
 
@@ -1149,9 +1149,6 @@ packages:
     resolution: {integrity: sha512-7nhBTRkTG0mD+7r7JvNalJz++YwszZk0oP1HIY6fCgz6wNKxT6LuiXCqdPrZmNPe/WbPIKuqxGZN5s+i6NZqow==}
     peerDependencies:
       vue: '>= 3.2.0 < 4.0.0'
-    peerDependenciesMeta:
-      vue-router:
-        optional: true
     dependencies:
       '@gtm-support/core': 2.3.1
       vue: 3.4.31(typescript@5.4.5)
@@ -9991,8 +9988,8 @@ packages:
     resolution: {integrity: sha512-HudkrR/TMd5FTV1VGqOrYLg4bsDgb8kgml6rtDF3NgS9vf0hfQyVipxjbEHlfvuPHtQ7RZcn6ftdJHi92JqfSw==}
     dev: true
 
-  /ucla-library-website-components@3.22.1(typescript@5.4.5)(vue@3.4.31):
-    resolution: {integrity: sha512-urlbfKBTtgMhBQkq5pfob3YvF84RMGii3fGM3kak7AqtGKn39m8RNGGyla6ZPAadH2xVONokV7EOZD4kEfklqw==}
+  /ucla-library-website-components@3.26.0(typescript@5.4.5)(vue@3.4.31):
+    resolution: {integrity: sha512-g56cx6ntsl4dROSjrEGCa+mA++mXRIX3dUrVsCy0AL9EauXk9bUZGWnK0fKg3qXo7+UFICZztqcN5wDsapEB3w==}
     peerDependencies:
       vue: ^3.4.29
     dependencies:

From 1035bd9d83518b115bd417bb4535cdc62c0e3178 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Wed, 2 Oct 2024 12:55:27 -0700
Subject: [PATCH 4/5] fix: move blockevent detail higher mobile

---
 pages/events/[slug].vue | 61 ++++++++++-------------------------------
 1 file changed, 14 insertions(+), 47 deletions(-)

diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index 2f0ba55..647910b 100644
--- a/pages/events/[slug].vue
+++ b/pages/events/[slug].vue
@@ -163,9 +163,6 @@ const parsedFTVAEventScreeningDetails = computed(() => {
           data-test="text-block"
           :category="series[0]?.title"
           :title="page?.title"
-          :guest-speaker="page?.guestSpeaker"
-          :tag-labels="page?.tagLabels"
-          :introduction="page?.introduction"
         />
       </template>
       <template #sidebarTop>
@@ -186,6 +183,11 @@ const parsedFTVAEventScreeningDetails = computed(() => {
         />
       </template>
       <template #primaryMid>
+        <CardMeta
+          :guest-speaker="page?.guestSpeaker"
+          :tag-labels="page?.tagLabels"
+          :introduction="page?.introduction"
+        />
         <RichText
           v-if="page?.eventDescription"
           data-test="event-description"
@@ -258,25 +260,6 @@ const parsedFTVAEventScreeningDetails = computed(() => {
   }
 
   .two-column {
-    // position: relative;
-    // width: 100%;
-    // max-width: var(--max-width);
-    // display: flex;
-    // flex-direction: row;
-    // flex-wrap: wrap;
-
-    // .primary-column {
-    //   margin-bottom: 0px;
-    //   width: 67%;
-
-    //   .section-wrapper {
-    //     padding-left: 0px;
-    //   }
-
-    //   &.bottom {
-    //     margin-top: -30px;
-    //   }
-    // }
 
     .ftva.button-dropdown {
       margin-top: 30px;
@@ -291,25 +274,6 @@ const parsedFTVAEventScreeningDetails = computed(() => {
     :deep(figure.responsive-video:not(:has(.video-embed))) {
       display: none;
     }
-
-    // move these styles to a component so they can be reused & kept in sync
-    // with /series/[slug].vue
-    // .sidebar-column {
-    //   min-width: 314px;
-    //   width: 30%;
-    //   position: absolute;
-    //   height: 100%;
-    //   top: 0;
-    //   right: 0;
-    //   padding-top: var(--space-2xl);
-    //   padding-bottom: 40px;
-
-    //   .sidebar-content-wrapper {
-    //     position: sticky;
-    //     top: 85px;
-    //     will-change: top;
-    //   }
-    // }
   }
 
   /* makes all EventSeries same height */
@@ -334,13 +298,16 @@ const parsedFTVAEventScreeningDetails = computed(() => {
     :deep(.primary-column) {
       width: inherit;
     }
+
+    :deep(.block-tags) {
+      padding-top: 30px;
+    }
   }
 }
 
 // TEMPORARY STYLES THAT SHOULD BE PART OF SECTIONWRAPPER
-.series-section-wrapper {
-  :deep(.section-header) {
-    margin-bottom: 28px;
-  }
-}
-</style>
+// .series-section-wrapper {
+//   :deep(.section-header) {
+//     // margin-bottom: 28px;
+//   }
+// }</style>

From e5e9c4b8bae0665f7da6dc33299776b2f67396da Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Thu, 3 Oct 2024 09:44:50 -0700
Subject: [PATCH 5/5] chore: cleanup

---
 pages/events/[slug].vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index 4be9147..52a46b6 100644
--- a/pages/events/[slug].vue
+++ b/pages/events/[slug].vue
@@ -53,8 +53,6 @@ const parsedCarouselData = computed(() => {
     return {
       item: [{ ...rawItem.image[0], kind: 'image' }], // Carousels on this page are always images, no videos
       credit: rawItem?.creditText,
-      // captionTitle: 'dfdsfs', // TODO do we need these? test without
-      // captionText: 'dfsdfsd',
     }
   })
 })
@@ -153,7 +151,6 @@ const parsedFTVAEventScreeningDetails = computed(() => {
       </div>
     </div>
 
-    <!-- data-test="second-column" -->
     <TwoColLayoutWStickySideBar
       data-test="second-column"
       class="two-column"
@@ -304,10 +301,4 @@ const parsedFTVAEventScreeningDetails = computed(() => {
     }
   }
 }
-
-// TEMPORARY STYLES THAT SHOULD BE PART OF SECTIONWRAPPER
-// .series-section-wrapper {
-//   :deep(.section-header) {
-//     // margin-bottom: 28px;
-//   }
-// }</style>
+</style>