From fb1ef2cef59165b80f711c2396786307f1b78e9d Mon Sep 17 00:00:00 2001 From: jendiamond Date: Wed, 13 Nov 2024 20:19:28 -0800 Subject: [PATCH 01/21] add a simple date component --- src/lib-components/Date.vue | 51 +++++++++++++++++++++++++ src/stories/Date.stories.js | 75 +++++++++++++++++++++++++++++++++++++ 2 files changed, 126 insertions(+) create mode 100644 src/lib-components/Date.vue create mode 100644 src/stories/Date.stories.js diff --git a/src/lib-components/Date.vue b/src/lib-components/Date.vue new file mode 100644 index 000000000..eb0b5bdfc --- /dev/null +++ b/src/lib-components/Date.vue @@ -0,0 +1,51 @@ +// Single date, Date Range & Ongoing + + + + + diff --git a/src/stories/Date.stories.js b/src/stories/Date.stories.js new file mode 100644 index 000000000..d3f72c44f --- /dev/null +++ b/src/stories/Date.stories.js @@ -0,0 +1,75 @@ +import { computed } from 'vue' +import Date from '@/lib-components/Date' + +// Storybook default settings +export default { + title: 'Date', + component: Date, +} + +const mockDefault = { + startDate: "2026-11-03T00:00:00", + endDate: "2027-12-23T00:00:00", + ongoing: false +} + +// Variations of stories below +export function Default() { + return { + data() { + return { data: mockDefault } + }, + components: { Date }, + template: ` + + `, + } +} + +const mockStartEndDateSame = { + startDate: "2025-11-23T00:00:00", + endDate: "2025-11-23T00:00:00", + ongoing: false +} + +export function StartEndDateSame() { + return { + data() { + return { data: mockStartEndDateSame } + }, + components: { Date }, + template: ` + + `, + } +} + +const mockOngoing = { + startDate: "2025-12-23T00:00:00", + endDate: null, + ongoing: true +} + +export function Ongoing() { + return { + data() { + return { data: mockOngoing } + }, + components: { Date }, + template: ` + + `, + } +} From bd82445350eed71a696ba0754956326632c2ac62 Mon Sep 17 00:00:00 2001 From: jendiamond Date: Tue, 19 Nov 2024 11:09:36 -0800 Subject: [PATCH 02/21] add styles --- src/lib-components/BlockStaffArticleList.vue | 204 ++++++------------ src/stories/BlockStaffArticleList.stories.js | 97 +++++++++ .../SectionStaffArticleList.stories.js | 54 +++++ src/styles/_base.scss | 3 +- src/styles/_ftva-theme.scss | 1 + .../default/_block-staff-article-item.scss | 128 +++++++++++ .../ftva/_block-staff-article-item.scss | 54 +++++ 7 files changed, 407 insertions(+), 134 deletions(-) create mode 100644 src/styles/default/_block-staff-article-item.scss create mode 100644 src/styles/ftva/_block-staff-article-item.scss diff --git a/src/lib-components/BlockStaffArticleList.vue b/src/lib-components/BlockStaffArticleList.vue index 2d0daed98..1010bca11 100644 --- a/src/lib-components/BlockStaffArticleList.vue +++ b/src/lib-components/BlockStaffArticleList.vue @@ -8,18 +8,23 @@ import type { PropType } from 'vue' // LODASH FUNCTIONS import format from 'date-fns/format' +// UTILITY FUNCTIONS +import removeHtmlTruncate from '@/utils/removeHtmlTruncate' +import formatDates from '@/utils/formatEventDates' + +// THEME +import { useTheme } from '@/composables/useTheme' + // SVGs import MoleculePlaceholder from 'ucla-library-design-tokens/assets/svgs/molecule-placeholder.svg' // TYPESCRIPT import type { ArticleStaffItemType, MediaItemType } from '@/types/types' -// UTILITY FUNCTIONS -import removeHtmlTruncate from '@/utils/removeHtmlTruncate' - -// COMPONENTS +// CHILD COMPONENTS import ResponsiveImage from '@/lib-components/ResponsiveImage.vue' import SmartLink from '@/lib-components/SmartLink.vue' +//import Date from '@/lib-components/Date.vue' // PROPS & DATA const props = defineProps({ @@ -55,6 +60,24 @@ const props = defineProps({ type: Number, default: 0, }, + startDate: { + type: String, + required: false, + }, + endDate: { + type: String, + required: false, + }, + ongoing: { + type: Boolean, + default: false, + }, +}) + +const theme = useTheme() + +const classes = computed(() => { + return ['block-staff-article-item', theme?.value || ''] }) const parsedDate = computed(() => { @@ -76,10 +99,41 @@ const parsedTextAll = computed(() => { ? removeHtmlTruncate(props.description, 250) : '' }) + +// Display date based on which data is provided +const parsedDateDisplay = computed(() => { + if (props.ongoing == true) + return 'Ongoing' + else if (props.endDate) + return formatDates(props.startDate, props.endDate, 'shortWithYear') + else if (props.startDate) + return formatDates(props.startDate, props.startDate) + else + return null +}) + + @@ -156,132 +220,6 @@ const parsedTextAll = computed(() => { lang="scss" scoped > -.block-staff-article-item { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-content: center; - align-items: center; - width: 100%; - position: relative; - - margin-bottom: var(--space-xl); - padding-bottom: var(--space-xl); - - .image { - width: 50%; - margin-right: var(--space-xl); - } - - .molecule-no-image { - width: 50%; - height: 272px; - margin-right: var(--space-xl); - background: var(--gradient-01); - overflow: hidden; - display: flex; - align-items: center; - position: relative; - - .molecule { - flex-shrink: 0; - position: absolute; - opacity: 0.7; - } - } - - .meta { - width: calc(50% - var(--space-xl)); - height: 272px; - } - - .category { - @include overline; - color: var(--color-primary-blue-05); - margin-bottom: var(--space-s); - } - - .title { - @include step-1; - color: var(--color-primary-blue-03); - margin-bottom: var(--space-s); - @include truncate(3); - @include card-clickable-area; - } - - .byline { - @include step-0; - margin: var(--space-s) 0; - color: var(--color-secondary-grey-04); - display: flex; - flex-direction: column; - flex-wrap: wrap; - } - - // .author { - // &:after { - // content: ","; - // padding-right: 5px; - // } - // &:nth-last-child(2):after { - // content: ""; - // } - // } - // .date:not(:only-child) { - // padding-left: 20px; - // } - - .description { - @include step-0; - color: var(--color-black); - @include truncate(4); - } - - .description-summary-only { - @include step-0; - color: var(--color-black); - @include truncate(5); - } - - :deep(.image) { - height: 272px; - - .media { - object-fit: cover; - } - } - - // Hovers - @media #{$has-hover} { - .title:hover { - @include link-hover; - } - } -} - -// Breakpoints -@media #{$small} { - .block-staff-article-item { - display: flex; - flex-direction: column; - flex-wrap: wrap; - - .image, - .molecule-no-image { - width: 100%; - margin-right: 0; - margin-bottom: var(--space-l); - } - - .meta { - width: 100%; - height: 100%; - - >*:last-child { - padding-bottom: 0; - } - } - } -} +@import "@/styles/default/_block-staff-article-item.scss"; +@import "@/styles/ftva/_block-staff-article-item.scss"; diff --git a/src/stories/BlockStaffArticleList.stories.js b/src/stories/BlockStaffArticleList.stories.js index 9ff39acb3..1c4743679 100644 --- a/src/stories/BlockStaffArticleList.stories.js +++ b/src/stories/BlockStaffArticleList.stories.js @@ -1,3 +1,5 @@ +import { computed } from 'vue' + // Import mock api data import * as API from '@/stories/mock-api.json' import BlockStaffArticleList from '@/lib-components/BlockStaffArticleList' @@ -19,6 +21,26 @@ const mock = { 'Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Egestas integer eget aliquet nibh praesent tristique. Quis imperdiet massa tincidunt nunc pulvinar sapien. Quis imperdiet massa tincidunt nunc pulvinar sapien.', } +const mockDateRange = { + to: "series/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.", + startDate: "2024-11-01T19:30:00", + endDate: "2024-11-17T19:30:00", + ongoing: false +} + +const mockDateRange2 = { + to: "series/a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary", + title: "A Film Series for You", + image: API.image, + description: "This deep into the post-print era it may be hard for some to understand.", + startDate: "2024-11-01T19:30:00", + endDate: "2024-11-17T19:30:00", + ongoing: false +} + // Variations of stories below export function Default() { return { @@ -164,3 +186,78 @@ export function NoAuthorOrDate() { `, } } + +export function FtvaDateRange() { + return { + data() { + return { ...mockDateRange2 } + }, + provide() { + return { + theme: computed(() => 'ftva'), + } + }, + components: { BlockStaffArticleList }, + template: ` + + `, + } +} + +export function FtvaStartEndDateSame() { + return { + data() { + return { ...mockDateRange2 } + }, + provide() { + return { + theme: computed(() => 'ftva'), + } + }, + components: { BlockStaffArticleList }, + template: ` + + `, + } +} + +export function FtvaOngoing() { + return { + data() { + return { ...mockDateRange } + }, + provide() { + return { + theme: computed(() => 'ftva'), + } + }, + components: { BlockStaffArticleList }, + template: ` + + `, + } +} diff --git a/src/stories/SectionStaffArticleList.stories.js b/src/stories/SectionStaffArticleList.stories.js index 50b1303a0..cdb541f07 100644 --- a/src/stories/SectionStaffArticleList.stories.js +++ b/src/stories/SectionStaffArticleList.stories.js @@ -61,3 +61,57 @@ export function Default() { `, } } + +const mockCurrentEntriesWithDates = [ + { + id: "3440739", + typeHandle: "eventSeries", + sectionHandle: "ftvaEventSeries", + to: "series/holiday-series-on-one-day", + title: "Non-Religious Celebrators of Christmas", + description: "

Fun, non-religious Christmas movies

", + image: API.image, + startDate: "2024-12-23T00:00:00", + endDate: "2024-12-23T00:00:00", + ongoing: false + }, + { + id: "3370267", + typeHandle: "eventSeries", + sectionHandle: "ftvaEventSeries", + to: "series/gymnastic-movie-series", + title: null, + description: "

Gymnastics Movies for Kids That Inspire Athletic Dreams

", + image: API.image, + startDate: "2024-04-07T00:00:00", + endDate: null, + ongoing: true + }, + { + id: "3260303", + typeHandle: "eventSeries", + sectionHandle: "ftvaEventSeries", + to: "series/a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary", + title: null, + 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: API.image, + startDate: "2025-11-01T19:30:00", + endDate: "2025-11-17T19:30:00", + ongoing: false + }, +] + +export function CurrentEntriesWithDates() { + return { + data() { + return { items: mockCurrentEntriesWithDates } + }, + components: { SectionStaffArticleList }, + template: ` + + `, + } +} diff --git a/src/styles/_base.scss b/src/styles/_base.scss index c0f319156..694294d5f 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -13,4 +13,5 @@ @import "default/_block-card-with-image"; @import "default/_rich-text"; @import "default/_section-teaser-card"; -@import "default/_section-teaser-list" +@import "default/_section-teaser-list"; +@import "default/_block-staff-article-item"; diff --git a/src/styles/_ftva-theme.scss b/src/styles/_ftva-theme.scss index eec455755..68d167033 100644 --- a/src/styles/_ftva-theme.scss +++ b/src/styles/_ftva-theme.scss @@ -14,3 +14,4 @@ @import "ftva/_rich-text"; @import "ftva/_section-teaser-card"; @import"ftva/_section-teaser-list"; +@import "ftva/_block-staff-article-item"; diff --git a/src/styles/default/_block-staff-article-item.scss b/src/styles/default/_block-staff-article-item.scss new file mode 100644 index 000000000..9a75ebcf8 --- /dev/null +++ b/src/styles/default/_block-staff-article-item.scss @@ -0,0 +1,128 @@ +.block-staff-article-item { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: center; + align-items: center; + width: 100%; + position: relative; + + margin-bottom: var(--space-xl); + padding-bottom: var(--space-xl); + + .image { + width: 50%; + margin-right: var(--space-xl); + } + + .molecule-no-image { + width: 50%; + height: 272px; + margin-right: var(--space-xl); + background: var(--gradient-01); + overflow: hidden; + display: flex; + align-items: center; + position: relative; + + .molecule { + flex-shrink: 0; + position: absolute; + opacity: 0.7; + } + } + + .meta { + width: calc(50% - var(--space-xl)); + height: 272px; + } + + .category { + @include overline; + color: var(--color-primary-blue-05); + margin-bottom: var(--space-s); + } + + .title { + @include step-1; + color: var(--color-primary-blue-03); + margin-bottom: var(--space-s); + @include truncate(3); + @include card-clickable-area; + } + + .byline { + @include step-0; + margin: var(--space-s) 0; + color: var(--color-secondary-grey-04); + display: flex; + flex-direction: column; + flex-wrap: wrap; + } + + // .author { + // &:after { + // content: ","; + // padding-right: 5px; + // } + // &:nth-last-child(2):after { + // content: ""; + // } + // } + // .date:not(:only-child) { + // padding-left: 20px; + // } + + .description { + @include step-0; + color: var(--color-black); + @include truncate(4); + } + + .description-summary-only { + @include step-0; + color: var(--color-black); + @include truncate(5); + } + + :deep(.image) { + height: 272px; + + .media { + object-fit: cover; + } + } + + // Hovers + @media #{$has-hover} { + .title:hover { + @include link-hover; + } + } +} + +// Breakpoints +@media #{$small} { + .block-staff-article-item { + display: flex; + flex-direction: column; + flex-wrap: wrap; + + .image, + .molecule-no-image { + width: 100%; + margin-right: 0; + margin-bottom: var(--space-l); + } + + .meta { + width: 100%; + height: 100%; + + >*:last-child { + padding-bottom: 0; + } + } + } +} diff --git a/src/styles/ftva/_block-staff-article-item.scss b/src/styles/ftva/_block-staff-article-item.scss new file mode 100644 index 000000000..d38f5d8aa --- /dev/null +++ b/src/styles/ftva/_block-staff-article-item.scss @@ -0,0 +1,54 @@ +.ftva.block-staff-article-item { + margin-bottom: 0; + padding-bottom: 0; + + .image { + max-width: 284px; + height: 213px; + width: 33%; + aspect-ratio: 4/3; + margin-right: var(--space-xl); + } + + .meta { + width: unset; + height: 213px; + } + + .title { + @include ftva-card-title-1; + color: $heading-grey; + @include truncate(3); + @include card-clickable-area; + margin-bottom: var(--space-s); + margin-bottom: 8px; + } + + .description-summary-only { + @include ftva-body; + color: $body-grey; + @include truncate(2); + margin-bottom: 16px; + } + + .date { + position: absolute; + bottom: var(--space-s); + display: flex; + flex-direction: row; + + @include ftva-emphasized-subtitle; + color: $accent-blue; + letter-spacing: .04px; + + height: 40px; + overflow: hidden; + } + + // Breakpoints + @media #{$small} { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + } +} From 6119f0b1d8299960345012de1499addf709270f4 Mon Sep 17 00:00:00 2001 From: jendiamond Date: Tue, 19 Nov 2024 13:51:28 -0800 Subject: [PATCH 03/21] Fix the date range format, fix ongoing story --- src/lib-components/BlockStaffArticleList.vue | 17 ++--- src/lib-components/Date.vue | 51 ------------- src/stories/BlockStaffArticleList.stories.js | 18 ++++- src/stories/Date.stories.js | 75 ------------------- .../ftva/_block-staff-article-item.scss | 24 +++--- src/utils/formatEventSeriesDates.js | 52 +++++++++++++ 6 files changed, 86 insertions(+), 151 deletions(-) delete mode 100644 src/lib-components/Date.vue delete mode 100644 src/stories/Date.stories.js create mode 100644 src/utils/formatEventSeriesDates.js diff --git a/src/lib-components/BlockStaffArticleList.vue b/src/lib-components/BlockStaffArticleList.vue index 1010bca11..ca7df136f 100644 --- a/src/lib-components/BlockStaffArticleList.vue +++ b/src/lib-components/BlockStaffArticleList.vue @@ -10,7 +10,7 @@ import format from 'date-fns/format' // UTILITY FUNCTIONS import removeHtmlTruncate from '@/utils/removeHtmlTruncate' -import formatDates from '@/utils/formatEventDates' +import formatSeriesDates from '@/utils/formatEventSeriesDates' // THEME import { useTheme } from '@/composables/useTheme' @@ -24,7 +24,7 @@ import type { ArticleStaffItemType, MediaItemType } from '@/types/types' // CHILD COMPONENTS import ResponsiveImage from '@/lib-components/ResponsiveImage.vue' import SmartLink from '@/lib-components/SmartLink.vue' -//import Date from '@/lib-components/Date.vue' +// import Date from '@/lib-components/Date.vue' // PROPS & DATA const props = defineProps({ @@ -102,12 +102,12 @@ const parsedTextAll = computed(() => { // Display date based on which data is provided const parsedDateDisplay = computed(() => { - if (props.ongoing == true) + if (props.ongoing === true) return 'Ongoing' else if (props.endDate) - return formatDates(props.startDate, props.endDate, 'shortWithYear') + return formatSeriesDates(props.startDate, props.endDate, 'shortWithYear') else if (props.startDate) - return formatDates(props.startDate, props.startDate) + return formatSeriesDates(props.startDate, props.startDate) else return null }) @@ -141,7 +141,6 @@ isMobile.value = newWidth <= object-fit="cover" class="image" /> -
diff --git a/src/lib-components/Date.vue b/src/lib-components/Date.vue deleted file mode 100644 index eb0b5bdfc..000000000 --- a/src/lib-components/Date.vue +++ /dev/null @@ -1,51 +0,0 @@ -// Single date, Date Range & Ongoing - - - - - diff --git a/src/stories/BlockStaffArticleList.stories.js b/src/stories/BlockStaffArticleList.stories.js index 1c4743679..804677c17 100644 --- a/src/stories/BlockStaffArticleList.stories.js +++ b/src/stories/BlockStaffArticleList.stories.js @@ -41,6 +41,16 @@ const mockDateRange2 = { ongoing: false } +const mockOngoing = { + to: "series/a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary", + title: "An Ongoing Film Series for You", + image: API.image, + description: "This deep into the post-print era it may be hard for some to understand.", + startDate: "2024-11-01T19:30:00", + endDate: null, + ongoing: true +} + // Variations of stories below export function Default() { return { @@ -240,7 +250,7 @@ export function FtvaStartEndDateSame() { export function FtvaOngoing() { return { data() { - return { ...mockDateRange } + return { ...mockOngoing } }, provide() { return { @@ -254,9 +264,9 @@ export function FtvaOngoing() { :to="to" :title="title" :description="description" - startDate="2024-11-01T19:30:00" - endDate=null - ongoing=true + :startDate="startDate" + :endDate="endDate" + :ongoing="ongoing" /> `, } diff --git a/src/stories/Date.stories.js b/src/stories/Date.stories.js deleted file mode 100644 index d3f72c44f..000000000 --- a/src/stories/Date.stories.js +++ /dev/null @@ -1,75 +0,0 @@ -import { computed } from 'vue' -import Date from '@/lib-components/Date' - -// Storybook default settings -export default { - title: 'Date', - component: Date, -} - -const mockDefault = { - startDate: "2026-11-03T00:00:00", - endDate: "2027-12-23T00:00:00", - ongoing: false -} - -// Variations of stories below -export function Default() { - return { - data() { - return { data: mockDefault } - }, - components: { Date }, - template: ` - - `, - } -} - -const mockStartEndDateSame = { - startDate: "2025-11-23T00:00:00", - endDate: "2025-11-23T00:00:00", - ongoing: false -} - -export function StartEndDateSame() { - return { - data() { - return { data: mockStartEndDateSame } - }, - components: { Date }, - template: ` - - `, - } -} - -const mockOngoing = { - startDate: "2025-12-23T00:00:00", - endDate: null, - ongoing: true -} - -export function Ongoing() { - return { - data() { - return { data: mockOngoing } - }, - components: { Date }, - template: ` - - `, - } -} diff --git a/src/styles/ftva/_block-staff-article-item.scss b/src/styles/ftva/_block-staff-article-item.scss index d38f5d8aa..92b488a71 100644 --- a/src/styles/ftva/_block-staff-article-item.scss +++ b/src/styles/ftva/_block-staff-article-item.scss @@ -2,18 +2,18 @@ margin-bottom: 0; padding-bottom: 0; - .image { - max-width: 284px; - height: 213px; - width: 33%; - aspect-ratio: 4/3; - margin-right: var(--space-xl); - } - - .meta { - width: unset; - height: 213px; - } + // .image { + // max-width: 284px; + // height: 213px; + // width: 33%; + // aspect-ratio: 4/3; + // margin-right: var(--space-xl); + // } + + // .meta { + // width: unset; + // height: 213px; + // } .title { @include ftva-card-title-1; diff --git a/src/utils/formatEventSeriesDates.js b/src/utils/formatEventSeriesDates.js new file mode 100644 index 000000000..cb97a0b9d --- /dev/null +++ b/src/utils/formatEventSeriesDates.js @@ -0,0 +1,52 @@ +import format from 'date-fns/format' + +/** + * Take two date strings, and return them in human readable date formats for Events + * + * @param {string} startDate + * @param {string} endDate + * @param {string} dateFormat - 'long', 'short', or 'shortWithYear' + * @returns {string} + */ + +function formatDates(startDate = '', endDate = '', dateFormat = 'long') { + const start = format(new Date(startDate), 'MMMM d, Y') + // console.log(start) + const end = format(new Date(endDate), 'MMMM d, Y') + + // "February 11 2020 – May 31 2021" + let output = `${start} - ${end}` + + if (start === end) { + // Thursday, January 28 + output = format(new Date(startDate), 'MMMM d, Y') + } + + if (!endDate) { + // February 11 2020 + output = start + } + + if (dateFormat === 'short' || dateFormat === 'shortWithYear') { + // "Feb 11 2020" + const day = output.slice(0, 3) + const dateYear = output.split(' ').slice(1).join(' ') + if (endDate && endDate !== startDate) { + // Feb 11 – May 31 + const shortFormatStartDate = format(new Date(startDate), 'MMM d, Y') + const shortFormatEndDate = format(new Date(endDate), 'MMM d, Y') + // if 'shortWithYear' is selected, add the year to the end date + // Feb 11 – May 31 2020 + if (dateFormat === 'shortWithYear') { + const shortFormatEndDateYear = format(new Date(endDate), 'MMM d, Y') + return `${shortFormatStartDate} - ${shortFormatEndDateYear}` + } + return `${shortFormatStartDate} - ${shortFormatEndDate}` + } + return `${day} ${dateYear}` + } + + return output +} + +export default formatDates From dd5f5c25523446ae0992be0b97d0f893149f9dc7 Mon Sep 17 00:00:00 2001 From: jendiamond Date: Tue, 19 Nov 2024 15:45:21 -0800 Subject: [PATCH 04/21] mobile styling --- src/lib-components/BlockStaffArticleList.vue | 12 +-- .../SectionStaffArticleList.vue | 97 ++++++++++--------- src/stories/BlockStaffArticleList.stories.js | 2 +- .../SectionStaffArticleList.stories.js | 2 +- .../ftva/_block-staff-article-item.scss | 75 +++++++++++--- src/types/types.ts | 4 + 6 files changed, 122 insertions(+), 70 deletions(-) diff --git a/src/lib-components/BlockStaffArticleList.vue b/src/lib-components/BlockStaffArticleList.vue index ca7df136f..fd3205ce3 100644 --- a/src/lib-components/BlockStaffArticleList.vue +++ b/src/lib-components/BlockStaffArticleList.vue @@ -24,7 +24,6 @@ import type { ArticleStaffItemType, MediaItemType } from '@/types/types' // CHILD COMPONENTS import ResponsiveImage from '@/lib-components/ResponsiveImage.vue' import SmartLink from '@/lib-components/SmartLink.vue' -// import Date from '@/lib-components/Date.vue' // PROPS & DATA const props = defineProps({ @@ -202,15 +201,12 @@ isMobile.value = newWidth <= -
+
{{ parsedDateDisplay }}
- -
diff --git a/src/lib-components/SectionStaffArticleList.vue b/src/lib-components/SectionStaffArticleList.vue index 9715df8aa..f18607810 100644 --- a/src/lib-components/SectionStaffArticleList.vue +++ b/src/lib-components/SectionStaffArticleList.vue @@ -42,6 +42,10 @@ const { items, sectionTitle } = defineProps({ :authors="item.authors" :description="item.description" :external-resource-url="item.externalResourceUrl" + :image-aspect-ratio="item.imageAspectRatio" + :start-date="item.startDate" + :end-date="item.endDate" + :ongoing="item.ongoing" /> @@ -49,59 +53,60 @@ const { items, sectionTitle } = defineProps({ + @media #{$medium} { + margin-left: var(--unit-gutter); + margin-right: var(--unit-gutter); + } + } + diff --git a/src/stories/BlockStaffArticleList.stories.js b/src/stories/BlockStaffArticleList.stories.js index 804677c17..a63c1000e 100644 --- a/src/stories/BlockStaffArticleList.stories.js +++ b/src/stories/BlockStaffArticleList.stories.js @@ -222,7 +222,7 @@ export function FtvaDateRange() { } } -export function FtvaStartEndDateSame() { +export function FtvaSameStartEndDate() { return { data() { return { ...mockDateRange2 } diff --git a/src/stories/SectionStaffArticleList.stories.js b/src/stories/SectionStaffArticleList.stories.js index cdb541f07..a09397168 100644 --- a/src/stories/SectionStaffArticleList.stories.js +++ b/src/stories/SectionStaffArticleList.stories.js @@ -101,7 +101,7 @@ const mockCurrentEntriesWithDates = [ }, ] -export function CurrentEntriesWithDates() { +export function FtvaCurrentEntriesWithDates() { return { data() { return { items: mockCurrentEntriesWithDates } diff --git a/src/styles/ftva/_block-staff-article-item.scss b/src/styles/ftva/_block-staff-article-item.scss index 92b488a71..4905f7414 100644 --- a/src/styles/ftva/_block-staff-article-item.scss +++ b/src/styles/ftva/_block-staff-article-item.scss @@ -2,18 +2,22 @@ margin-bottom: 0; padding-bottom: 0; - // .image { - // max-width: 284px; - // height: 213px; - // width: 33%; - // aspect-ratio: 4/3; - // margin-right: var(--space-xl); - // } - - // .meta { - // width: unset; - // height: 213px; - // } + .image { + max-width: 284px; + height: 213px; + width: 33%; + aspect-ratio: 4/3; + margin-right: var(--space-xl); + } + + .meta { + width: unset; + height: 213px; + } + + .meta { + background-color: white; + } .title { @include ftva-card-title-1; @@ -47,8 +51,51 @@ // Breakpoints @media #{$small} { + background-color: aquamarine; display: flex; - flex-direction: row; - flex-wrap: nowrap; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-content: center; + align-items: center; + width: 100%; + position: relative; + + .image { + width: 100%; + max-width: unset; + height: 213px; + margin-right: 0; + aspect-ratio: 4/3; + //margin-right: var(--space-xl); + } + + :deep(.image) { + height: 272px; + + .media { + object-fit: cover; + } + } + + .meta { + width: 100%; + height: 213px; + background-color: pink; + } + + .date { + position: absolute; + bottom: var(--space-s); + display: flex; + flex-direction: row; + + @include ftva-emphasized-subtitle; + color: $accent-blue; + letter-spacing: .04px; + + height: 40px; + overflow: hidden; + } } } diff --git a/src/types/types.ts b/src/types/types.ts index d17b3908f..1fb3cab41 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -113,6 +113,10 @@ export interface BlockStaffArticleListItemType { authors?: AuthorsItemType[] description?: string externalResourceUrl?: string + imageAspectRatio?: number + startDate?: string + endDate?: string + ongoing?: boolean } export interface StaffLocationItemType { From 34555864764b2e0140169db24fedf0b10848bd4a Mon Sep 17 00:00:00 2001 From: jendiamond Date: Tue, 19 Nov 2024 16:16:41 -0800 Subject: [PATCH 05/21] updateing styles --- .../SectionStaffArticleList.vue | 93 +++++++++---------- src/stories/BlockStaffArticleList.stories.js | 2 +- .../SectionStaffArticleList.stories.js | 53 +++++------ .../ftva/_block-staff-article-item.scss | 14 +-- 4 files changed, 76 insertions(+), 86 deletions(-) diff --git a/src/lib-components/SectionStaffArticleList.vue b/src/lib-components/SectionStaffArticleList.vue index f18607810..a92085daa 100644 --- a/src/lib-components/SectionStaffArticleList.vue +++ b/src/lib-components/SectionStaffArticleList.vue @@ -53,60 +53,59 @@ const { items, sectionTitle } = defineProps({ + @media #{$medium} { + margin-left: var(--unit-gutter); + margin-right: var(--unit-gutter); + } +} + diff --git a/src/stories/BlockStaffArticleList.stories.js b/src/stories/BlockStaffArticleList.stories.js index a63c1000e..6d47eb042 100644 --- a/src/stories/BlockStaffArticleList.stories.js +++ b/src/stories/BlockStaffArticleList.stories.js @@ -45,7 +45,7 @@ const mockOngoing = { to: "series/a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary", title: "An Ongoing Film Series for You", image: API.image, - description: "This deep into the post-print era it may be hard for some to understand.", + description: "This deep into the post-print era it may be hard for some to understand. Someday, if you study hard enough you might be able to inderstand. Unless that it, you are particularly dense.", startDate: "2024-11-01T19:30:00", endDate: null, ongoing: true diff --git a/src/stories/SectionStaffArticleList.stories.js b/src/stories/SectionStaffArticleList.stories.js index a09397168..4ac7d3d60 100644 --- a/src/stories/SectionStaffArticleList.stories.js +++ b/src/stories/SectionStaffArticleList.stories.js @@ -1,3 +1,5 @@ +import { computed } from 'vue' + import SectionStaffArticleList from '@/lib-components/SectionStaffArticleList' import * as API from '@/stories/mock-api.json' @@ -64,48 +66,47 @@ export function Default() { const mockCurrentEntriesWithDates = [ { - id: "3440739", - typeHandle: "eventSeries", - sectionHandle: "ftvaEventSeries", - to: "series/holiday-series-on-one-day", - title: "Non-Religious Celebrators of Christmas", - description: "

Fun, non-religious Christmas movies

", + to: "series/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, - startDate: "2024-12-23T00:00:00", - endDate: "2024-12-23T00:00:00", + 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.", + startDate: "2024-11-01T19:30:00", + endDate: "2024-11-17T19:30:00", ongoing: false }, { - id: "3370267", - typeHandle: "eventSeries", - sectionHandle: "ftvaEventSeries", - to: "series/gymnastic-movie-series", - title: null, - description: "

Gymnastics Movies for Kids That Inspire Athletic Dreams

", + to: "series/a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary", + title: "A Film Series for You", image: API.image, - startDate: "2024-04-07T00:00:00", - endDate: null, - ongoing: true + description: "This deep into the post-print era it may be hard for some to understand.", + startDate: "2024-11-01T19:30:00", + endDate: "2024-11-17T19:30:00", + ongoing: false }, { - id: "3260303", - typeHandle: "eventSeries", - sectionHandle: "ftvaEventSeries", to: "series/a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary", - title: null, - 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.", + title: "An Ongoing Film Series for You", image: API.image, - startDate: "2025-11-01T19:30:00", - endDate: "2025-11-17T19:30:00", - ongoing: false - }, + description: "This deep into the post-print era it may be hard for some to understand. Someday, if you study hard enough you might be able to inderstand. Unless that it, you are particularly dense.", + startDate: "2024-11-01T19:30:00", + endDate: null, + ongoing: true + } ] + + + export function FtvaCurrentEntriesWithDates() { return { data() { return { items: mockCurrentEntriesWithDates } }, + provide() { + return { + theme: computed(() => 'ftva'), + } + }, components: { SectionStaffArticleList }, template: ` Date: Tue, 19 Nov 2024 17:54:53 -0800 Subject: [PATCH 06/21] fix existance check --- src/lib-components/BlockStaffArticleList.vue | 2 +- .../SectionStaffArticleList.vue | 52 +------------------ src/stories/BlockStaffArticleList.stories.js | 2 +- .../SectionStaffArticleList.stories.js | 6 +-- src/styles/_base.scss | 1 + src/styles/_ftva-theme.scss | 1 + .../default/_section-staff-article-list.scss | 52 +++++++++++++++++++ .../ftva/_section-staff-article-list.scss | 3 ++ 8 files changed, 64 insertions(+), 55 deletions(-) create mode 100644 src/styles/default/_section-staff-article-list.scss create mode 100644 src/styles/ftva/_section-staff-article-list.scss diff --git a/src/lib-components/BlockStaffArticleList.vue b/src/lib-components/BlockStaffArticleList.vue index fd3205ce3..6ade50bc3 100644 --- a/src/lib-components/BlockStaffArticleList.vue +++ b/src/lib-components/BlockStaffArticleList.vue @@ -202,7 +202,7 @@ isMobile.value = newWidth <=
{{ parsedDateDisplay }} diff --git a/src/lib-components/SectionStaffArticleList.vue b/src/lib-components/SectionStaffArticleList.vue index a92085daa..b0672160b 100644 --- a/src/lib-components/SectionStaffArticleList.vue +++ b/src/lib-components/SectionStaffArticleList.vue @@ -57,55 +57,7 @@ const { items, sectionTitle } = defineProps({ scoped > .section-staff-article-list { - --divider-color: var(--color-secondary-grey-02); - max-width: 100%; - margin: auto; - - .container { - max-width: $container-l-main + px; - margin: auto; - } - - .section-title { - @include step-3; - line-height: $line-height--1; - text-transform: capitalize; - color: var(--color-primary-blue-03); - margin-bottom: var(--space-xl); - } - - .block-staff-article-list { - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: center; - align-content: center; - align-items: center; - - .block-staff-article-item { - border-bottom: 2px dotted var(--divider-color); - - &:last-child { - border-bottom: 0; - padding: 0; - margin: 0; - } - } - - @for $i from 1 through 30 { - :deep(.block-staff-article-item:nth-child(#{$i}) .molecule) { - left: calc(random(500) * -1) + px; - } - } - } - - @media (min-width: 1025px) and (max-width: 1300px) { - padding: 0 var(--unit-gutter); - } - - @media #{$medium} { - margin-left: var(--unit-gutter); - margin-right: var(--unit-gutter); - } + @import "@/styles/default/_section-staff-article-list.scss"; + @import "@/styles/ftva/_section-staff-article-list.scss"; } diff --git a/src/stories/BlockStaffArticleList.stories.js b/src/stories/BlockStaffArticleList.stories.js index 6d47eb042..09c5f8c66 100644 --- a/src/stories/BlockStaffArticleList.stories.js +++ b/src/stories/BlockStaffArticleList.stories.js @@ -37,7 +37,7 @@ const mockDateRange2 = { image: API.image, description: "This deep into the post-print era it may be hard for some to understand.", startDate: "2024-11-01T19:30:00", - endDate: "2024-11-17T19:30:00", + endDate: "2024-11-01T19:30:00", ongoing: false } diff --git a/src/stories/SectionStaffArticleList.stories.js b/src/stories/SectionStaffArticleList.stories.js index 4ac7d3d60..32202915a 100644 --- a/src/stories/SectionStaffArticleList.stories.js +++ b/src/stories/SectionStaffArticleList.stories.js @@ -79,8 +79,8 @@ const mockCurrentEntriesWithDates = [ title: "A Film Series for You", image: API.image, description: "This deep into the post-print era it may be hard for some to understand.", - startDate: "2024-11-01T19:30:00", - endDate: "2024-11-17T19:30:00", + startDate: "2024-08-17T19:30:00", + endDate: "2024-08-17T19:30:00", ongoing: false }, { @@ -88,7 +88,7 @@ const mockCurrentEntriesWithDates = [ title: "An Ongoing Film Series for You", image: API.image, description: "This deep into the post-print era it may be hard for some to understand. Someday, if you study hard enough you might be able to inderstand. Unless that it, you are particularly dense.", - startDate: "2024-11-01T19:30:00", + startDate: "2024-05-07T19:30:00", endDate: null, ongoing: true } diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 694294d5f..cb649fab6 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -15,3 +15,4 @@ @import "default/_section-teaser-card"; @import "default/_section-teaser-list"; @import "default/_block-staff-article-item"; +@import "default/_section-staff-article-list"; diff --git a/src/styles/_ftva-theme.scss b/src/styles/_ftva-theme.scss index 68d167033..5bc32c39c 100644 --- a/src/styles/_ftva-theme.scss +++ b/src/styles/_ftva-theme.scss @@ -15,3 +15,4 @@ @import "ftva/_section-teaser-card"; @import"ftva/_section-teaser-list"; @import "ftva/_block-staff-article-item"; +@import "ftva/_section-staff-article-list"; diff --git a/src/styles/default/_section-staff-article-list.scss b/src/styles/default/_section-staff-article-list.scss new file mode 100644 index 000000000..a67bbfacb --- /dev/null +++ b/src/styles/default/_section-staff-article-list.scss @@ -0,0 +1,52 @@ +.section-staff-article-list { + --divider-color: var(--color-secondary-grey-02); + max-width: 100%; + margin: auto; + + .container { + max-width: $container-l-main + px; + margin: auto; + } + + .section-title { + @include step-3; + line-height: $line-height--1; + text-transform: capitalize; + color: var(--color-primary-blue-03); + margin-bottom: var(--space-xl); + } + + .block-staff-article-list { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-content: center; + align-items: center; + + .block-staff-article-item { + border-bottom: 2px dotted var(--divider-color); + + &:last-child { + border-bottom: 0; + padding: 0; + margin: 0; + } + } + + @for $i from 1 through 30 { + :deep(.block-staff-article-item:nth-child(#{$i}) .molecule) { + left: calc(random(500) * -1) + px; + } + } + } + + @media (min-width: 1025px) and (max-width: 1300px) { + padding: 0 var(--unit-gutter); + } + + @media #{$medium} { + margin-left: var(--unit-gutter); + margin-right: var(--unit-gutter); + } +} diff --git a/src/styles/ftva/_section-staff-article-list.scss b/src/styles/ftva/_section-staff-article-list.scss new file mode 100644 index 000000000..9b3fe7846 --- /dev/null +++ b/src/styles/ftva/_section-staff-article-list.scss @@ -0,0 +1,3 @@ +.ftva.section-staff-article-list { + background-color: aqua; +} From b5dbced31abcd0d470799037b8dd3060f5b6cbf0 Mon Sep 17 00:00:00 2001 From: jendiamond Date: Wed, 20 Nov 2024 11:10:21 -0800 Subject: [PATCH 07/21] update section styles --- src/lib-components/BlockStaffArticleList.vue | 14 +++++------ .../SectionStaffArticleList.vue | 19 +++++++++++---- src/styles/_ftva-theme.scss | 2 +- .../ftva/_block-staff-article-item.scss | 24 +++++++++++++++---- .../ftva/_section-staff-article-list.scss | 5 +++- 5 files changed, 46 insertions(+), 18 deletions(-) diff --git a/src/lib-components/BlockStaffArticleList.vue b/src/lib-components/BlockStaffArticleList.vue index 6ade50bc3..c2e87cb2a 100644 --- a/src/lib-components/BlockStaffArticleList.vue +++ b/src/lib-components/BlockStaffArticleList.vue @@ -172,6 +172,13 @@ isMobile.value = newWidth <= > {{ parsedTextAll }}
+ +
+ {{ parsedDateDisplay }} +
@@ -200,13 +207,6 @@ isMobile.value = newWidth <= {{ parsedTextTruncated }} - -
- {{ parsedDateDisplay }} -
diff --git a/src/lib-components/SectionStaffArticleList.vue b/src/lib-components/SectionStaffArticleList.vue index b0672160b..2403157ca 100644 --- a/src/lib-components/SectionStaffArticleList.vue +++ b/src/lib-components/SectionStaffArticleList.vue @@ -2,11 +2,16 @@ setup lang="ts" > +import { computed } from 'vue' import type { PropType } from 'vue' // TYPESCRIPT import type { BlockStaffArticleListItemType } from '@/types/types' +// THEME +import { useTheme } from '@/composables/useTheme' + +// CHILD COMPONENTS import BlockStaffArticleList from '@/lib-components/BlockStaffArticleList.vue' const { items, sectionTitle } = defineProps({ @@ -20,10 +25,16 @@ const { items, sectionTitle } = defineProps({ }, }) // TODO? we could parse the heroImage here instead of on the page similar to flexible/highlight + +const theme = useTheme() + +const classes = computed(() => { + return ['section-staff-article-list', theme?.value || ''] +})