Page Request - Filmmakers Listing

[tinuola]

Page Description

This Page is used to display a listing of LA Rebellion filmmakers. The desktop page is paginated; the mobile page has infinite scroll implemented.

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

Reference: YouTube video walk-through (From 1:00)

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

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=2683-2504&t=Wh4TpQcHmq36pJYq-4
• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=7186-2752&t=Wh4TpQcHmq36pJYq-4

Slots

No Slots

Props

No Props

Developer Tips

List any developer tips here

1. Route and GQL query already created
2. Request from Jen Rhee during gathering meeting: Add a dropdown filter with option to sort listings in ascending and descending order; UX will amend Figma design (pending)
   • See ascending/descending sort implemented on Search page
   • Mimic dropdown layout on Filmography page
3. SectionStaffArticleListing component could be edited at page level to override flexed column layout on mobile - Discussed during gathering meeting: Using PostSmall component; but I think the component might require more customization to fit this template, and the tweaks to SectionStaffArticleListing would be less
   • Update: There's a previous/existing ticket to refactor SectionStaffArticleListing for FTVA: https://uclalibrary.atlassian.net/browse/APPS-3098
4. In mobile view, listings show only image and name

Events

No Events

Child components

1. SectionWrapper
2. NavBreadcrumb
3. RichText is used for page summary
4. SectionStaffArticleListing is used for the listings
5. DropdownSingleSelect for filter dropdown
6. BlockTag for number of results
7. SectionPagination is used for pagination in desktop view

Screenshots

Desktop Top Half

Desktop Bottom Half

Mobile Excerpt