fix: APPS-3090 Move CSS from EventSeries page to SectionStaffArticleL…

…ist component for FTVA Theme (#663) * updates to styles * linting * fix border-bottom * update to background * update to background * update to background * add section wrapper story and styles - medium is still broken in section wrapper * update small and medium styling * linting
UCLALibrary · Dec 7, 2024 · 10aaab7 · 10aaab7 · github-actions · Dec 7, 2024
1 parent 44246ee
commit 10aaab7
Show file tree

Hide file tree

Showing 5 changed files with 352 additions and 14 deletions.
diff --git a/src/lib-components/SectionStaffArticleList.vue b/src/lib-components/SectionStaffArticleList.vue
@@ -1,7 +1,4 @@
-<script
-  setup
-  lang="ts"
->
+<script setup lang="ts">
 import { computed } from 'vue'
 import type { PropType } from 'vue'
 
@@ -45,6 +42,7 @@ const classes = computed(() => {
         <BlockStaffArticleList
           v-for="(item, index) in items"
           :key="index"
+          class="block-staff-article-item"
           :image="item.image"
           :to="item.to"
           :category="item.category"
@@ -62,10 +60,7 @@ const classes = computed(() => {
   </section>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 @import "@/styles/default/_section-staff-article-list.scss";
 @import "@/styles/ftva/_section-staff-article-list.scss";
 </style>
diff --git a/src/stories/SectionStaffArticleList.stories.js b/src/stories/SectionStaffArticleList.stories.js
@@ -66,7 +66,7 @@ export function Default() {
 
 const mockCurrentEntriesWithDates = [
   {
-    to: 'series/a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary',
+    to: 'a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary',
     title: 'A Film Series for You: Celebrating Giant Robot‚Äôs 30th Anniversary',
     image: API.image,
     description: 'This deep into the post-print era it may be hard for some to understand how something as ephemeral as a magazine could change the world. That may be especially true when the magazine hasn‚Äôt been in print for over a decade. But from its first issue as a Xeroxed zine in 1994 to its final run as a full-page glossy in 2011, Giant Robot did just that.',
@@ -113,3 +113,22 @@ export function FtvaCurrentEntriesWithDates() {
   `,
   }
 }
+
+export function FtvaNoSectionTitle() {
+  return {
+    data() {
+      return { items: mockCurrentEntriesWithDates }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { SectionStaffArticleList },
+    template: `
+      <section-staff-article-list
+        :items="items"
+      />
+  `,
+  }
+}
diff --git a/src/stories/SectionWrapper.stories.js b/src/stories/SectionWrapper.stories.js
@@ -9,6 +9,7 @@ import BlockMediaWithText from '@/lib-components/BlockMediaWithText'
 import DividerWayFinder from '@/lib-components/DividerWayFinder'
 import SectionTeaserCard from '@/lib-components/SectionTeaserCard'
 import SectionTeaserList from '@/lib-components/SectionTeaserList.vue'
+import SectionStaffArticleList from '@/lib-components/SectionStaffArticleList'
 import SmartLink from '@/lib-components/SmartLink.vue'
 import TabItem from '@/lib-components/TabItem.vue'
 import TabList from '@/lib-components/TabList.vue'
@@ -515,3 +516,261 @@ export function FtvaTabListSectionTeaserListPastUpcoming() {
   `,
   }
 }
+
+const mockSeries = [
+  {
+    id: '3455795',
+    typeHandle: 'eventSeries',
+    sectionHandle: 'ftvaEventSeries',
+    title: 'Triathlon Movies',
+    to: 'triathlon-movies',
+    description: '<p>A <strong>triathlon</strong> is an endurance multisport race consisting of swimming, cycling, and running over various distances.<sup></sup></p>',
+    image: {
+      id: '3461183',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/tri_2024-11-26-230531_mgnw.jpg',
+      height: 1440,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/tri_2024-11-26-230531_mgnw.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/tri_2024-11-26-230531_mgnw.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/tri_2024-11-26-230531_mgnw.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/tri_2024-11-26-230531_mgnw.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/tri_2024-11-26-230531_mgnw.jpg 2560w',
+      alt: null,
+      focalPoint: [
+        0.5,
+        0.5
+      ]
+    },
+    startDate: '2024-11-22T00:00:00',
+    endDate: '2024-11-22T00:00:00',
+    ongoing: false
+  },
+  {
+    id: '3454778',
+    typeHandle: 'eventSeries',
+    sectionHandle: 'ftvaEventSeries',
+    title: 'Holiday Kittens',
+    to: 'holiday-kittens',
+    description: null,
+    image: {
+      id: '3454782',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/kittyforchristmasfeatured-1_2024-11-22-020416_isxa.jpg',
+      height: 1707,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/kittyforchristmasfeatured-1_2024-11-22-020416_isxa.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/kittyforchristmasfeatured-1_2024-11-22-020416_isxa.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/kittyforchristmasfeatured-1_2024-11-22-020416_isxa.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/kittyforchristmasfeatured-1_2024-11-22-020416_isxa.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/kittyforchristmasfeatured-1_2024-11-22-020416_isxa.jpg 2560w',
+      alt: null,
+      focalPoint: [
+        0.5,
+        0.5
+      ]
+    },
+    startDate: '2024-11-19T00:00:00',
+    endDate: '2024-11-21T00:00:00',
+    ongoing: false
+  },
+  {
+    id: '3440739',
+    typeHandle: 'eventSeries',
+    sectionHandle: 'ftvaEventSeries',
+    title: 'Holiday Series on ONE DAY',
+    to: 'holiday-series-on-one-day',
+    description: '<p>Fun, non-religious Christmas movies</p>',
+    image: {
+      id: '3440862',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/netflix-holiday.jpg',
+      height: 1440,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/netflix-holiday.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/netflix-holiday.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/netflix-holiday.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/netflix-holiday.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/netflix-holiday.jpg 2560w',
+      alt: null,
+      focalPoint: [
+        0.5,
+        0.5
+      ]
+    },
+    startDate: '2024-12-23T00:00:00',
+    endDate: '2024-12-23T00:00:00',
+    ongoing: false
+  },
+  {
+    id: '3370267',
+    typeHandle: 'eventSeries',
+    sectionHandle: 'ftvaEventSeries',
+    title: 'Gymnastic Movie Series',
+    to: 'gymnastic-movie-series',
+    description: '<p>Gymnastics Movies for Kids That Inspire Athletic Dreams</p>',
+    image: {
+      id: '3385832',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/paris-olympics-42-gty-gmh-240730_1722364842455_hpMain_2024-10-22-191218_vple.avif',
+      height: null,
+      width: null,
+      srcset: '',
+      alt: null,
+      focalPoint: [
+        0.5,
+        0.5
+      ]
+    },
+    startDate: '2024-04-07T00:00:00',
+    endDate: null,
+    ongoing: true
+  },
+  {
+    id: '3260303',
+    typeHandle: 'eventSeries',
+    sectionHandle: 'ftvaEventSeries',
+    title: 'A Film Series for You: Celebrating Giant Robot‚Äôs 30th Anniversary',
+    to: 'a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary',
+    description: 'This deep into the post-print era it may be hard for some to understand how something as ephemeral as a magazine could change the world. That may be especially true when the magazine hasn‚Äôt been in print for over a decade. But from its first issue as a Xeroxed zine in 1994 to its final run as a full-page glossy in 2011, Giant Robot did just that. Founded by UCLA alumni Eric Nakamura, Giant Robot began, simply enough, as a vehicle for Nakamura and co-editor Martin Wong to write about the stuff they liked ‚Äî whether other people liked it or not. Its first three issues featured articles on sumo wrestling, underground filmmaker Jon Moritsugu, Hello Kitty, Hong Kong movie soundtracks, Pizzicato Five and the delights of Southern California‚Äôs Cambodian-run donut shops. Mixed in with the reviews and profiles were personal essays about being Asian American in a wider culture that didn‚Äôt know or care about any of those things. Steeped in Nakamura‚Äôs DIY, punk rock ethic, Giant Robot quickly attracted a like-minded readership. Its eclectic focus on alternative Asian and Asian American culture was so fresh and so unique that many of the artists, filmmakers, musicians and writers that it profiled, such as Daniel Wu and Ayako Fujitani, asked to become contributors themselves. Maggie Cheung, Jenny Shimizu, Jet Li and Margaret Cho graced its cover as well as work by visual artists such as Yoshitomo Nara and Takashi Murakami. Before its run was over, what Giant Robot thought was cool when no else did ‚Äî ramen, Jackie Chan, Japanese candy ‚Äî was suddenly everywhere. The magazine‚Äôs work and spirit lives on at the Giant Robot retail store on Sawtelle Blvd. in Los Angeles and the GR2 art gallery across the street. The Archive is thrilled to celebrate Giant Robot‚Äôs history and legacy with this special film series co-curated with Eric Nakamura.',
+    image: {
+      id: '3260302',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/Tekkon_Kinkreet_crop.jpeg',
+      height: 1920,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/Tekkon_Kinkreet_crop.jpeg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/Tekkon_Kinkreet_crop.jpeg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/Tekkon_Kinkreet_crop.jpeg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/Tekkon_Kinkreet_crop.jpeg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/Tekkon_Kinkreet_crop.jpeg 2560w',
+      alt: 'An animated scene of a boy sitting on an electrical pole and overlooking a city.',
+      focalPoint: [
+        0.5,
+        0.5
+      ]
+    },
+    startDate: '2024-11-01T19:30:00',
+    endDate: '2024-11-22T00:00:00',
+    ongoing: false
+  },
+  {
+    id: '3260307',
+    typeHandle: 'eventSeries',
+    sectionHandle: 'ftvaEventSeries',
+    title: 'Border Wars',
+    to: 'border-wars',
+    description: null,
+    image: {
+      id: '3461200',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/border-hh_2024-11-26-230828_lxem.webp',
+      height: 1587,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/border-hh_2024-11-26-230828_lxem.webp 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/border-hh_2024-11-26-230828_lxem.webp 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/border-hh_2024-11-26-230828_lxem.webp 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/border-hh_2024-11-26-230828_lxem.webp 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/border-hh_2024-11-26-230828_lxem.webp 2560w',
+      alt: null,
+      focalPoint: [
+        0.5,
+        0.5
+      ]
+    },
+    startDate: '2024-10-26T19:30:00',
+    endDate: '2024-10-26T19:30:00',
+    ongoing: false
+  },
+  {
+    id: '3260314',
+    typeHandle: 'eventSeries',
+    sectionHandle: 'ftvaEventSeries',
+    title: 'Silent Movie Day',
+    to: 'silent-movie-day',
+    description: null,
+    image: {
+      id: '3461192',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/blacknumbers2_2024-11-26-230718_assa.jpg',
+      height: 1438,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/blacknumbers2_2024-11-26-230718_assa.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/blacknumbers2_2024-11-26-230718_assa.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/blacknumbers2_2024-11-26-230718_assa.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/blacknumbers2_2024-11-26-230718_assa.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/blacknumbers2_2024-11-26-230718_assa.jpg 2560w',
+      alt: null,
+      focalPoint: [
+        0.5,
+        0.5
+      ]
+    },
+    startDate: '2024-10-06T19:00:00',
+    endDate: '2024-10-06T19:00:00',
+    ongoing: false
+  },
+  {
+    id: '3260317',
+    typeHandle: 'eventSeries',
+    sectionHandle: 'ftvaEventSeries',
+    title: 'Summer Sci-Fi',
+    to: 'summer-sci-fi',
+    description: 'In advance of its major fall series, Science Fiction Against the Margins, presented as part of the Getty‚Äôs region-wide initiative, PST ART: Art &amp; Science Collide, the Archive is pleased to whet your appetite with a selection of independent films that have helped to push the science fiction genre into new frontiers. While these films represent a wide range of visual styles and thematic concerns, from cult classics to recent masterpieces, they are connected in a shared ethos that low budgets aren‚Äôt anathema to expansive visions.',
+    image: {
+      id: '3260316',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/Animalia-crop.png',
+      height: 1920,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/Animalia-crop.png 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/Animalia-crop.png 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/Animalia-crop.png 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/Animalia-crop.png 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/Animalia-crop.png 2560w',
+      alt: 'A person looking up at dark, cloud-filled sky.',
+      focalPoint: [
+        0.5,
+        0.5
+      ]
+    },
+    startDate: '2024-08-03T19:30:00',
+    endDate: '2024-08-18T19:00:00',
+    ongoing: false
+  },
+  {
+    id: '3197319',
+    typeHandle: 'eventSeries',
+    sectionHandle: 'ftvaEventSeries',
+    title: 'TEST - X-Ray Vision - Series with one old and 2 new events',
+    to: 'series-with-one-old-and-2-new-events',
+    description: null,
+    image: {
+      id: '3461136',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/xray-1_2024-11-26-225648_wmke.jpeg',
+      height: 3840,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/xray-1_2024-11-26-225648_wmke.jpeg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/xray-1_2024-11-26-225648_wmke.jpeg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/xray-1_2024-11-26-225648_wmke.jpeg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/xray-1_2024-11-26-225648_wmke.jpeg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/xray-1_2024-11-26-225648_wmke.jpeg 2560w',
+      alt: null,
+      focalPoint: [
+        0.5,
+        0.5
+      ]
+    },
+    startDate: '2024-08-08T00:00:00',
+    endDate: null,
+    ongoing: true
+  }
+]
+
+export function FtvaSeriesListing() {
+  return {
+    data() {
+      return {
+        mockSeries
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { SectionWrapper, SectionStaffArticleList, TabItem, TabList },
+    template: `
+      <SectionWrapper
+        section-title="Screening Series"
+        section-summary="Discover the magic of our Upcoming Series, where we curate an immersive experience that transcends time and genre. From classic masterpieces to cutting-edge contemporary works, our series showcase the diverse voices and visions that have shaped the evolution of visual storytelling."
+        theme="paleblue"
+      >
+
+        <TabList alignment="center">
+          <TabItem
+            title="Past Series"
+            class="tab-content"
+          >
+            <template v-if="mockSeries.length > 0">
+              <SectionStaffArticleList
+                :items="mockSeries"
+              />
+            </template>
+          </TabItem>
+
+          <TabItem
+            title="Current and Upcoming Series"
+            class="tab-content"
+          >
+            <template v-if="mockSeries.length > 0">
+              <SectionStaffArticleList
+                :items="mockSeries"
+              />
+            </template>
+          </TabItem>
+        </TabList>
+      </SectionWrapper>
+  `,
+  }
+}
diff --git a/src/styles/ftva/_section-staff-article-list.scss b/src/styles/ftva/_section-staff-article-list.scss
@@ -1,10 +1,47 @@
 .ftva.section-staff-article-list {
+  background-color: var(--color-white);
+  padding: 45px;
 
-  // Breakpoints
-  @media #{$small} {
+  .container {
+    max-width: 100%;
+  }
+
+  .block-staff-article-list {
     .block-staff-article-item {
-      border-bottom: 7px dotted indigo;
+      border-bottom: 1px solid $page-blue;
+    }
+
+    .block-staff-article-item:last-child {
       border-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  @media #{$medium} {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  // Breakpoints
+  @media #{$small} {
+    background: none;
+    padding: 0;
+    margin-left: 0;
+    margin-right: 0;
+
+    .block-staff-article-list {
+      .block-staff-article-item {
+        border-bottom: 0;
+        margin-bottom: 40px;
+      }
+
+      .block-staff-article-item:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .container {
+      max-width: none;
     }
   }
 }