Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Apps-2975 implement 2col on event detail, slot event detail in new position #46

Merged
merged 6 commits into from
Oct 3, 2024
Merged

fix: Apps-2975 implement 2col on event detail, slot event detail in new position #46

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2e84df7
chore: start branch
Oct 1, 2024
759cf20
chore: refactor sidebar
Oct 1, 2024
ba16ab4
chore: refactor to use sidebar
Oct 2, 2024
1035bd9
fix: move blockevent detail higher mobile
Oct 2, 2024
d131818
Merge branch 'main' into APPS-2975_implement_2col_event_detail
farosFreed Oct 3, 2024
e5e9c4b
chore: cleanup
Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
218 changes: 70 additions & 148 deletions pages/events/[slug].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// COMPONENT RE-IMPORTS
// TODO: remove when we have implemented component library as a module
// https://nuxt.com/docs/guide/directory-structure/components#library-authors
import { BlockEventDetail, BlockInfo, BlockTag, ButtonDropdown, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, NavBreadcrumb, ResponsiveImage, RichText, SectionScreeningDetails, SectionTeaserCard, SectionWrapper } from 'ucla-library-website-components'
import { BlockEventDetail, BlockInfo, BlockTag, ButtonDropdown, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, NavBreadcrumb, ResponsiveImage, RichText, SectionScreeningDetails, SectionTeaserCard, SectionWrapper, TwoColLayoutWStickySideBar } from 'ucla-library-website-components'

// HELPERS
import _get from 'lodash/get'
Expand Down Expand Up @@ -53,8 +53,6 @@ const parsedCarouselData = computed(() => {
return {
item: [{ ...rawItem.image[0], kind: 'image' }], // Carousels on this page are always images, no videos
credit: rawItem?.creditText,
// captionTitle: 'dfdsfs', // TODO do we need these? test without
// captionText: 'dfsdfsd',
}
})
})
Expand Down Expand Up @@ -153,77 +151,69 @@ const parsedFTVAEventScreeningDetails = computed(() => {
</div>
</div>

<div
<TwoColLayoutWStickySideBar
data-test="second-column"
class="two-column"
>
<div class="primary-column top">
<SectionWrapper>
<CardMeta
data-test="text-block"
:category="series[0]?.title"
:title="page?.title"
:guest-speaker="page?.guestSpeaker"
:tag-labels="page?.tagLabels"
:introduction="page?.introduction"
/>
<RichText
v-if="page?.eventDescription"
data-test="event-description"
class="eventDescription"
:rich-text-content="page?.eventDescription"
/>

<RichText
v-if="page?.acknowledements"
data-test="acknowledgements"
class="acknowledgements"
:rich-text-content="page?.acknowledements"
/>
</SectionWrapper>
</div>

<!-- sidebar slots in here on mobile -->
<!-- on desktop sidebar is stickied to the side with css -->
<div class="sidebar-column">
<div class="sidebar-content-wrapper">
<BlockEventDetail
data-test="event-details"
:start-date="page?.startDateWithTime"
:time="page?.startDateWithTime"
:locations="page?.location"
/>
<ButtonDropdown
data-test="calendar-dropdown"
:title="parsedCalendarData?.title"
:event-description="parsedCalendarData?.eventDescription"
:start-date-with-time="parsedCalendarData?.startDateWithTime"
:location="parsedCalendarData?.location"
:is-event="true"
:debug-mode-enabled="false"
/>
<BlockInfo
v-if="page?.ftvaTicketInformation && page?.ftvaTicketInformation.length > 0"
data-test="ticket-info"
:ftva-ticket-information="page?.ftvaTicketInformation"
/>
</div>
</div>

<div class="primary-column bottom">
<SectionWrapper>
<DividerWayFinder />
</SectionWrapper>

<SectionWrapper>
<SectionScreeningDetails
v-if="parsedFTVAEventScreeningDetails"
data-test="screening-details"
:items="parsedFTVAEventScreeningDetails"
/>
</SectionWrapper>
</div>
</div>
<template #primaryTop>
<CardMeta
data-test="text-block"
:category="series[0]?.title"
:title="page?.title"
/>
</template>
<template #sidebarTop>
<BlockEventDetail
data-test="event-details"
:start-date="page?.startDateWithTime"
:time="page?.startDateWithTime"
:locations="page?.location"
/>
<ButtonDropdown
data-test="calendar-dropdown"
:title="parsedCalendarData?.title"
:event-description="parsedCalendarData?.eventDescription"
:start-date-with-time="parsedCalendarData?.startDateWithTime"
:location="parsedCalendarData?.location"
:is-event="true"
:debug-mode-enabled="false"
/>
</template>
<template #primaryMid>
<CardMeta
:guest-speaker="page?.guestSpeaker"
:tag-labels="page?.tagLabels"
:introduction="page?.introduction"
/>
<RichText
v-if="page?.eventDescription"
data-test="event-description"
class="eventDescription"
:rich-text-content="page?.eventDescription"
/>
<RichText
v-if="page?.acknowledements"
data-test="acknowledgements"
class="acknowledgements"
:rich-text-content="page?.acknowledements"
/>
</template>
<template #sidebarBottom>
<BlockInfo
v-if="page?.ftvaTicketInformation && page?.ftvaTicketInformation.length > 0"
data-test="ticket-info"
:ftva-ticket-information="page?.ftvaTicketInformation"
/>
</template>
<template #primaryBottom>
<DividerWayFinder />
<SectionScreeningDetails
v-if="parsedFTVAEventScreeningDetails"
data-test="screening-details"
:items="parsedFTVAEventScreeningDetails"
/>
</template>
</TwoColLayoutWStickySideBar>

<SectionWrapper
v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
Expand Down Expand Up @@ -267,25 +257,6 @@ const parsedFTVAEventScreeningDetails = computed(() => {
}

.two-column {
position: relative;
width: 100%;
max-width: var(--max-width);
display: flex;
flex-direction: row;
flex-wrap: wrap;

.primary-column {
margin-bottom: 0px;
width: 67%;

.section-wrapper {
padding-left: 0px;
}

&.bottom {
margin-top: -30px;
}
}

.ftva.button-dropdown {
margin-top: 30px;
Expand All @@ -300,25 +271,6 @@ const parsedFTVAEventScreeningDetails = computed(() => {
:deep(figure.responsive-video:not(:has(.video-embed))) {
display: none;
}

// move these styles to a component so they can be reused & kept in sync
// with /series/[slug].vue
.sidebar-column {
min-width: 314px;
width: 30%;
position: absolute;
height: 100%;
top: 0;
right: 0;
padding-top: var(--space-2xl);
padding-bottom: 40px;

.sidebar-content-wrapper {
position: sticky;
top: 85px;
will-change: top;
}
}
}

/* makes all EventSeries same height */
Expand All @@ -328,55 +280,25 @@ const parsedFTVAEventScreeningDetails = computed(() => {

@media (max-width: 1200px) {

.one-column,
.two-column {
// .two-column
.one-column {
padding-left: var(--unit-gutter);
padding-right: var(--unit-gutter);
}

.sidebar-column {
padding-right: var(--unit-gutter);
}

.two-column>.primary-column {
width: 62%;
:deep(.primary-column) {
width: 65%;
}
}

@media #{$small} {
.two-column {
display: grid;
grid-template-columns: 1fr;

.primary-column {
width: auto;
grid-column: 1;

.section-wrapper {
padding-left: var(--unit-gutter);
}

&.bottom {
margin-top: auto;
}
}

.sidebar-column {
width: auto;
position: relative;
grid-column: 1;
margin: auto var(--unit-gutter);
padding-top: 0px;
height: auto; // let content determine height on mobile
}
:deep(.primary-column) {
width: inherit;
}
}
}

// TEMPORARY STYLES THAT SHOULD BE PART OF SECTIONWRAPPER
.series-section-wrapper {
:deep(.section-header) {
margin-bottom: 28px;
:deep(.block-tags) {
padding-top: 30px;
}
}
}
</style>
Loading