Page Request - /collections/[slug].vue StoryTelling Template

[pghorpade]

Page Description

This page is used to display Storytelling Complex Collection landing page for LA Rebellion and In the Life complex collections.

Template is similar to the General Content page template and its use of Flexible Block components.

This template serves only two collections (at the time of this page request) and will use the shared-template pattern similar to the Collection Listing Types and the ARCS & IMSC pages. Template will live inside the la-rebellion route and contain an alias to the in-the-life route. Storytelling component initially planned for this template will be deleted. (Reference: Slack thread.)

Route: ~/collections/la-rebellion/index.vue

Reference: YouTube video walk-through (Up till 32:40)

Implementation tickets: https://uclalibrary.atlassian.net/browse/APPS-3311

Design

Please also see screenshots attached at bottom for reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=7032-6859&t=wRLnb2xG0UNweItr-4
• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=7038-11717&t=wRLnb2xG0UNweItr-4

Slots

None

Props

None

Developer Tips

List any developer tips here

1. Similar layout to GeneralContent page template
2. Axa has created a new content type for this template: ftvaCollectionStory
   • https://test-craft.library.ucla.edu/admin/entries/ftvaCollectionStory
3. Axa is adding option in Craft to style FlexibleCardWithImage with/without scrolls and to choose backgrounds; the component and FlexibleBlock will need to be updated
   • https://uclalibrary.atlassian.net/browse/APPS-3321
4. Per the walkthrough, the Filmography element on the page uses the MediaWithText component; an FTVA variant currently doesn't exist; an update to the component and its Flexible version will be needed
   • https://uclalibrary.atlassian.net/browse/APPS-3320

Events

None

Child components

List out any components that are used by this new Page.

1. NavBreadcrumb - Per video walkthrough; missing in current design
2. ResponsiveImage
3. TwoColLayoutWStickySidebar
4. PageAnchor
5. FlexibleBlock
6. PostSmall for Additional Materials section
7. DividerGeneral
8. RichText
9. SectionWrapper

Screenshots