2
2
// COMPONENT RE-IMPORTS
3
3
// TODO: remove when we have implemented component library as a module
4
4
// https://nuxt.com/docs/guide/directory-structure/components#library-authors
5
- import { BlockTag , ButtonDropdown , CardMeta , DividerWayFinder , FlexibleMediaGalleryNewLightbox , NavBreadcrumb , ResponsiveImage , RichText , SectionScreeningDetails , SectionTeaserCard , SectionStaffSubjectLibrarian , SectionWrapper , TwoColLayoutWStickySideBar } from ' ucla-library-website-components'
5
+ import { BlockTag , ButtonDropdown , CardMeta , FlexibleMediaGalleryNewLightbox , NavBreadcrumb , ResponsiveImage , RichText , SectionStaffSubjectLibrarian , SectionWrapper , TwoColLayoutWStickySideBar } from ' ucla-library-website-components'
6
6
7
7
// HELPERS
8
8
import _get from ' lodash/get'
@@ -39,7 +39,7 @@ if (!data.value.ftvaLARebellionIndividual) {
39
39
}
40
40
41
41
// This is creating an index of the content for ES search
42
- if (data .value .ftvaEvent && import .meta.prerender) {
42
+ if (data .value .ftvaLARebellionIndividual && import .meta.prerender) {
43
43
try {
44
44
// Call the composable to use the indexing function
45
45
const { indexContent } = useContentIndexer()
@@ -52,13 +52,10 @@ if (data.value.ftvaEvent && import.meta.prerender) {
52
52
}
53
53
54
54
const page = ref (_get (data .value , ' ftvaLARebellionIndividual' , {}))
55
- // TODO refactor for filmography data ? Delete if not needed
56
- // const series = ref(_get(data.value, 'ftvaEventSeries', {}))
57
55
58
56
watch (data, (newVal , oldVal ) => {
59
57
// console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)
60
58
page .value = _get (newVal, ' ftvaLARebellionIndividual' , {})
61
- // series.value = _get(newVal, 'ftvaEventSeries', {})
62
59
})
63
60
64
61
// Get data for Image or Carousel at top of page
@@ -77,13 +74,40 @@ const parsedCarouselData = computed(() => {
77
74
})
78
75
})
79
76
77
+ const parsedAssociatedFilms = computed (() => {
78
+ if (page .value .associatedFilms .length === 0 ) return []
79
+ return page .value .associatedFilms .map ((obj ) => {
80
+ // console.log('obj link', obj.filmLink)
81
+ const newFilmLink = [' /' , obj .filmLink [0 ].uri ].join (' ' )
82
+ // console.log('newFilmLink', newFilmLink)
83
+ // console.log('new obj', {
84
+ // ...obj,
85
+ // filmLink: [
86
+ // {
87
+ // ...obj.filmLink[0],
88
+ // uri: newFilmLink
89
+ // }
90
+ // ]
91
+ // })
92
+ return {
93
+ ... obj,
94
+ filmLink: [
95
+ {
96
+ ... obj .filmLink [0 ],
97
+ uri: newFilmLink
98
+ }
99
+ ]
100
+ }
101
+ })
102
+ })
103
+
80
104
useHead ({
81
105
title: page .value ? page .value .title : ' ... loading' ,
82
106
meta: [
83
107
{
84
108
hid: ' description' ,
85
109
name: ' description' ,
86
- content: removeTags (page .value .text )
110
+ content: removeTags (page .value .richText )
87
111
}
88
112
]
89
113
})
@@ -92,7 +116,7 @@ useHead({
92
116
< template>
93
117
< main
94
118
id= " main"
95
- class = " page page-detail page-event -detail"
119
+ class = " page page-detail page-filmmaker -detail"
96
120
>
97
121
< div class = " one-column" >
98
122
< NavBreadcrumb
@@ -138,69 +162,80 @@ useHead({
138
162
class = " two-column"
139
163
>
140
164
< template #primaryTop>
141
- <!-- < CardMeta
165
+ < CardMeta
142
166
data- test= " text-block"
167
+ category= " L.A. Rebellion"
143
168
: title= " page?.title"
144
- > -->
145
- {{ page }}
169
+ >
170
+ < template #sharebutton>
171
+ < ButtonDropdown
172
+ data- test= " share-button"
173
+ button- title= " Share"
174
+ : has- icon= " true"
175
+ : dropdown- list= " socialList.dropdownList"
176
+ / >
177
+ < / template>
178
+ < / CardMeta>
179
+ < RichText : rich- text- content= " page?.richText" / >
146
180
< / template>
147
181
< / TwoColLayoutWStickySideBar>
148
182
149
- <!-- TODO : add conditional render once vars exist
150
- v- if = " parsedFilmography && parsedFilmography.length > 0" -->
151
183
< SectionWrapper
184
+ v- if = " parsedAssociatedFilms && parsedAssociatedFilms.length > 0"
152
185
section- title= " Filmography"
153
186
theme= " paleblue"
154
- class = " series -section-wrapper"
187
+ class = " filmography -section-wrapper"
155
188
>
156
- <!-- < SectionStaffSubjectLibrarian / > -->
189
+ < section- staff- subject- librarian
190
+ : items= " page.associatedFilms"
191
+ : table- headers= " ['', 'Film', 'Role', 'Year']"
192
+ / >
157
193
< / SectionWrapper>
158
194
< / main>
159
195
< / template>
160
196
161
197
< style lang= " scss" scoped>
162
- // PAGE STYLES - USE OLD STYLES
163
- // .page-event-detail {
164
- // position: relative;
165
-
166
- // .two-column {
167
-
168
- // .ftva.button-dropdown {
169
- // margin-top: 30px;
170
- // }
171
-
172
- // .ftva.block-info {
173
- // margin-top: 48px;
174
- // }
175
-
176
- // // SECTION SCREENING DETAILS
177
- // // TODO when component is patched, remove styles?
178
- // :deep(figure.responsive-video:not(:has(.video-embed))) {
179
- // display: none;
180
- // }
181
- // }
182
-
183
- // /* makes all EventSeries same height */
184
- // :deep(.card) {
185
- // min-height: 350px;
186
- // }
187
-
188
- // @media (max-width: 1200px) {
189
- // :deep(.primary-column) {
190
- // width: 65%;
191
- // }
192
- // }
193
-
194
- // @media (max-width: 899px) {
195
- // :deep(.primary-column) {
196
- // width: inherit;
197
- // }
198
-
199
- // :deep(.block-tags) {
200
- // padding-top: 30px;
201
- // }
202
- // }
203
- // }
204
-
205
198
@import ' assets/styles/slug-pages.scss' ;
199
+
200
+ .page - filmmaker- detail {
201
+ position: relative;
202
+
203
+ .two - column {
204
+
205
+ .ftva .button - dropdown {
206
+ margin- top: 30px ;
207
+ }
208
+
209
+ .ftva .block - info {
210
+ margin- top: 48px ;
211
+ }
212
+
213
+ // when two-column div is not followed by a filmography section
214
+ & : last- child {
215
+ // add 8px of space between the last element in the two-column div and the footer
216
+ padding- bottom: 8px ;
217
+ }
218
+
219
+ // fix button scrolling over header
220
+ : deep (.sharebutton - slot ) {
221
+ position: relative;
222
+ z- index: 1 ;
223
+ }
224
+ }
225
+
226
+ // change filmography section title color
227
+ : deep (.section - header ) {
228
+
229
+ // reduce space below title by 12px on desktop (was 40px)
230
+ @media #{$large} {
231
+ margin- bottom: 28px ;
232
+ }
233
+
234
+ .section - title {
235
+ color: #2f2f2f ;
236
+ }
237
+
238
+ font- weight: 800 ;
239
+ }
240
+ }
206
241
< / style>
0 commit comments