Skip to content

Commit

Permalink
feat: APPS-3058 Create FTVA variation of SectionStaffArticleList (#653)
Browse files Browse the repository at this point in the history 
* add a simple date component

* add styles

* Fix the date range format, fix ongoing story

* mobile styling

* updateing styles

* fix existance check

* update section styles

* linting

* fix build error

* add horizontal lines to full width only

* move svg under svg comment

* move simports

* delete aspect ration from section

* update typescript file

* remove old comment

* remove default false

* remove else statement from parsedDateDisplay.

* revert parsedDateDisplay change to check ftva

* update formatEventSeries

* linting

* linting

---------

Co-authored-by: Parinita Mulak <[email protected]>
  • Loading branch information
@jendiamond @pghorpade
jendiamond and pghorpade authored Nov 26, 2024
1 parent d9f928f commit 4a68214
Show file tree
Hide file tree
Showing 12 changed files with 578 additions and 185 deletions.
176 changes: 46 additions & 130 deletions src/lib-components/BlockStaffArticleList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ import type { ArticleStaffItemType, MediaItemType } from '@/types/types'
// UTILITY FUNCTIONS
import removeHtmlTruncate from '@/utils/removeHtmlTruncate'
import formatSeriesDates from '@/utils/formatEventSeriesDates'
// THEME
import { useTheme } from '@/composables/useTheme'
// COMPONENTS
import ResponsiveImage from '@/lib-components/ResponsiveImage.vue'
Expand Down Expand Up @@ -55,6 +59,22 @@ const props = defineProps({
type: Number,
default: 0,
},
startDate: {
type: String,
},
endDate: {
type: String,
},
ongoing: {
type: Boolean,
default: false,
},
})
const theme = useTheme()
const classes = computed(() => {
return ['block-staff-article-item', theme?.value || '']
})
const parsedDate = computed(() => {
Expand All @@ -76,18 +96,33 @@ const parsedTextAll = computed(() => {
? removeHtmlTruncate(props.description, 250)
: ''
})
// If the component is in the FTVA site the field ongoing with exist
// Ongoing will only be true if the event is Ongoing
// If the event is not Ongoing
// it will be displayed as a date range: Nov 1, 2024 - Nov 17, 2024
// or and individual date (Nov 1, 2024)if all events in the series are on the same date
const parsedDateDisplay = computed(() => {
if (theme?.value !== 'ftva')
return null
if (props.ongoing)
return 'Ongoing'
else if (props.startDate && props.endDate)
return formatSeriesDates(props.startDate, props.endDate, 'shortWithYear')
else
return null
})
</script>
<template>
<li class="block-staff-article-item">
<li :class="classes">
<ResponsiveImage
v-if="imageExists"
:media="props.image"
:aspect-ratio="props.imageAspectRatio"
object-fit="cover"
class="image"
/>

<div
v-else
class="molecule-no-image"
Expand Down Expand Up @@ -120,6 +155,13 @@ const parsedTextAll = computed(() => {
>
{{ parsedTextAll }}
</div>
<div
v-if="parsedDateDisplay"
class="date"
>
{{ parsedDateDisplay }}
</div>
</div>
<!-- AUTHOR(S) - DATE - SUMMARY -->
Expand Down Expand Up @@ -156,132 +198,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";
</style>
70 changes: 17 additions & 53 deletions src/lib-components/SectionStaffArticleList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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 || '']
})
</script>
<template>
<section class="section-staff-article-list">
<section :class="classes">
<div class="container">
<div
v-if="sectionTitle"
Expand All @@ -42,6 +53,9 @@ const { items, sectionTitle } = defineProps({
:authors="item.authors"
:description="item.description"
:external-resource-url="item.externalResourceUrl"
:start-date="item.startDate"
:end-date="item.endDate"
:ongoing="item.ongoing"
/>
</ul>
</div>
Expand All @@ -52,56 +66,6 @@ const { items, sectionTitle } = defineProps({
lang="scss"
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";
</style>
Loading

1 comment on commit 4a68214

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://ucla-library-storybook.netlify.app as production
🚀 Deployed on https://6746391bfbdd35192eecf599--ucla-library-storybook.netlify.app

Please sign in to comment.