diff --git a/.gitignore b/.gitignore index ee7883dff..b0581e14f 100644 --- a/.gitignore +++ b/.gitignore @@ -24,7 +24,10 @@ dist-ssr *.sln *.sw? +cypress/downloads cypress/fixtures cypress/screenshots cypress/e2e/1-getting-started cypress/e2e/2-advanced-examples + +serve \ No newline at end of file diff --git a/serve/index.html b/serve/index.html deleted file mode 100644 index 7d1af68bf..000000000 --- a/serve/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite + Vue + TS - - -
- - - diff --git a/serve/serve.css b/serve/serve.css deleted file mode 100644 index bbf3334d4..000000000 --- a/serve/serve.css +++ /dev/null @@ -1,80 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; - text-align: center; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/serve/serve.js b/serve/serve.js deleted file mode 100644 index 72594b2ff..000000000 --- a/serve/serve.js +++ /dev/null @@ -1,20 +0,0 @@ -import { createApp } from 'vue' - -// import store from '@/store'; -import './serve.css' -import { createPinia } from 'pinia' -import router from '../src/router' -import UclaLibraryWebsiteComponent from '../src/entry.js' -import Dev from './serve.vue' - -// console.log(Dev) -const app = createApp(Dev) - -// In Vue 3, plugins are used via `app.use()` directly on the app instance -app.use(UclaLibraryWebsiteComponent) - -// app.use(store); -app.use(router) -app.use(createPinia()) - -app.mount('#app') diff --git a/serve/serve.vue b/serve/serve.vue deleted file mode 100644 index 4215d0145..000000000 --- a/serve/serve.vue +++ /dev/null @@ -1,369 +0,0 @@ - - - diff --git a/src/App.vue b/src/App.vue index e305fd330..5a8f0c41e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,12 +4,15 @@ import { computed } from 'vue' import BlockMediaWithText from './lib-components/BlockMediaWithText.vue' import SiteBrandBar from './lib-components/SiteBrandBar.vue' import BlockShowHide from './lib-components/BlockShowHide.vue' +import BlockStaffSubjectLibrarian from './lib-components/BlockStaffSubjectLibrarian.vue' import AlphabeticalBrowseBy from '@/lib-components/AlphabeticalBrowseBy.vue' +import BlockAmenities from '@/lib-components/BlockAmenities.vue' import BlockCallToAction from '@/lib-components/BlockCallToAction.vue' import BlockCallToActionTwoUp from '@/lib-components/BlockCallToActionTwoUp.vue' import BlockCardWithIllustration from '@/lib-components/BlockCardWithIllustration.vue' import BlockDate from '@/lib-components/BlockDate.vue' import BlockEvent from '@/lib-components/BlockEvent.vue' +import BlockGenericList from '@/lib-components/BlockGenericList.vue' import BlockSimpleCard from '@/lib-components/BlockSimpleCard.vue' import BlockSpaces from '@/lib-components/BlockSpaces.vue' import BlockSponsor from '@/lib-components/BlockSponsor.vue' @@ -100,6 +103,100 @@ const propsForMediaWithText = { const itemVideo = MEDIA.VideoFile const coverImage = MEDIA.VideoFileCoverImage + +const mockStaff = { + subjectArea: 'African American Studies', + nameFirst: 'Ariane', + nameLast: 'Bicho', + to: '/about/staff/ariane-bicho', + staffName: 'Ariane Bicho 娘の洋子より', + image: null, + + jobTitle: 'Director of Communications and Marketing', + departments: [ + { + id: '7272', + title: 'Communications', + }, + { + id: '7373', + title: 'Marketing', + }, + ], + alternativeName: [ + { + fullName: '娘の洋子より', + languageAltName: 'zh', + }, + ], + uri: 'about/staff/ariane-bicho', + phone: '(222) 444-5555', + email: 'abicho@library.ucla.edu', + consultation: 'https://calendar.library.ucla.edu/appointments/aogarcia', + academicDepartments: [ + { + id: '11947', + title: 'African American Studies', + }, + { + id: '11955', + title: 'Cluster 60: America in Sixties: Politics, Society, and Culture, 1954 to 1974', + }, + ], + locations: [ + { + title: 'DIIT', + to: 'location/bar', + }, + ], +} + +const mockStaff2 = { + title: 'Humanities and Social Sciences Librarian', + alternativeFullName: '陳餘敏卿纪念基金', + language: 'zh', + text: + '

The UCLA Library seeks a highly collaborative, user-focused professional for the position of Humanities and Social Sciences Librarian. The incumbent will join a multi-location, cross disciplinary team that supports teaching and all levels of research in the humanities and social sciences. Note: Two positions are being filled.

', + jobType: [ + { + title: 'Academic Librarian', + }, + ], + jobRequisitionNumber: 'JPF08053', + jobPostingURL: 'https://recruit.apo.ucla.edu/JPF08053', + department: [ + { + title: 'User Engagement', + }, + { + title: 'Human Resources', + }, + ], + associatedLocations: [ + { + title: 'UCLA Film & Television Archive', + uri: 'visit/locations/film-television-archive', + }, + { + title: 'Powell Library', + uri: 'visit/locations/powell-library', + }, + ], +} + +const mockAmenities = { + amenities: [ + 'icon-clock', + 'icon-accessible', + 'icon-chair', + 'icon-virtual', + 'icon-laptop', + 'icon-locker', + 'icon-light', + 'icon-share-printer', + 'icon-book', + ], +} diff --git a/src/lib-components/BlockCallToAction.vue b/src/lib-components/BlockCallToAction.vue index 42fb19262..fede29e5c 100644 --- a/src/lib-components/BlockCallToAction.vue +++ b/src/lib-components/BlockCallToAction.vue @@ -1,4 +1,3 @@ - + + + + diff --git a/src/lib-components/BlockSimpleCard.vue b/src/lib-components/BlockSimpleCard.vue index 20a614de9..8912bec22 100644 --- a/src/lib-components/BlockSimpleCard.vue +++ b/src/lib-components/BlockSimpleCard.vue @@ -91,74 +91,83 @@ export default { // Themes --color-theme: var(--color-default-cyan-01); + &.color-visit { - --color-theme: var(--color-visit-fushia-01); + --color-theme: var(--color-visit-fushia-01); } + &.color-help { - --color-theme: var(--color-help-green-01); + --color-theme: var(--color-help-green-01); } + &.color-about { - --color-theme: var(--color-about-purple-01); + --color-theme: var(--color-about-purple-01); } .section { - display: none; - @include overline; + display: none; + @include overline; } + .title { - @include step-1; - color: var(--color-primary-blue-03); - @include card-clickable-area; + @include step-1; + color: var(--color-primary-blue-03); + @include card-clickable-area; } .text { - @include step--1; - @include truncate(5); + @include step--1; + @include truncate(5); } .spacer { - flex-basis: 0; - flex-grow: 1; + flex-basis: 0; + flex-grow: 1; } .svg-meta { - align-self: flex-end; + align-self: flex-end; } .svg { - z-index: 20; - display: block; + z-index: 20; + display: block; } + // Breakpoints @media #{$small} { - padding: var(--unit-gutter); + padding: var(--unit-gutter); } // Hovers @media #{$has-hover} { - &:hover, - &:focus { - @include card-horizontal-hover; - background-color: var(--color-theme); - z-index: 30; - cursor: pointer; - - .title { - text-decoration-thickness: 1.5px; - color: var(--color-primary-blue-05); - } - .text { - color: var(--color-primary-blue-05); - } - :deep(.svg) { - .svg__stroke--primary-blue-03 { - stroke: var(--color-primary-blue-05); - } - .svg__fill--primary-blue-03 { - fill: var(--color-primary-blue-05); - } - } + + &:hover, + &:focus { + @include card-horizontal-hover; + background-color: var(--color-theme); + z-index: 30; + cursor: pointer; + + .title { + text-decoration-thickness: 1.5px; + color: var(--color-primary-blue-05); + } + + .text { + color: var(--color-primary-blue-05); + } + + :deep(.svg) { + .svg__stroke--primary-blue-03 { + stroke: var(--color-primary-blue-05); + } + + .svg__fill--primary-blue-03 { + fill: var(--color-primary-blue-05); + } } + } } } diff --git a/src/lib-components/BlockSpaces.vue b/src/lib-components/BlockSpaces.vue index 801e94abe..5997f139f 100644 --- a/src/lib-components/BlockSpaces.vue +++ b/src/lib-components/BlockSpaces.vue @@ -56,12 +56,7 @@ export default { @@ -71,131 +66,140 @@ export default { diff --git a/src/lib-components/BlockSponsor.vue b/src/lib-components/BlockSponsor.vue index a18ae0c82..153ab4c3e 100644 --- a/src/lib-components/BlockSponsor.vue +++ b/src/lib-components/BlockSponsor.vue @@ -30,16 +30,12 @@ export default { diff --git a/src/lib-components/BlockStaffSubjectLibrarian.vue b/src/lib-components/BlockStaffSubjectLibrarian.vue new file mode 100644 index 000000000..8b3648b33 --- /dev/null +++ b/src/lib-components/BlockStaffSubjectLibrarian.vue @@ -0,0 +1,309 @@ + + + + + diff --git a/src/lib-components/Flexible/MediaGallery/NewLightbox.vue b/src/lib-components/Flexible/MediaGallery/NewLightbox.vue index 804086575..8e38fee37 100644 --- a/src/lib-components/Flexible/MediaGallery/NewLightbox.vue +++ b/src/lib-components/Flexible/MediaGallery/NewLightbox.vue @@ -123,250 +123,250 @@ function setCurrentSlide(currentSlide: number) { /*@import "@/styles/vue-glide.scss";*/ .lightbox { - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; - overflow-y: auto; - overscroll-behavior: contain; - - --side-column-min-width: 72px; - --gap-width: var(--space-m); - --media-width: min(calc(100vw - (2 * var(--side-column-min-width)) - (2 * var(--gap-width))), - 992px); - --media-height: calc(var(--media-width) * 9 / 16); - --side-column-width: calc((100vw - var(--media-width) - 2 * var(--gap-width)) / 2); - - background: var(--color-primary-blue-05); - z-index: 800; - - display: grid; - grid-template-columns: - [col] var(--side-column-width) [col] var(--media-width) [col] var(--side-column-width); - grid-template-rows: [row] auto [row] min-content [row] auto; - grid-gap: var(--gap-width); + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow-y: auto; + overscroll-behavior: contain; + + --side-column-min-width: 72px; + --gap-width: var(--space-m); + --media-width: min(calc(100vw - (2 * var(--side-column-min-width)) - (2 * var(--gap-width))), + 992px); + --media-height: calc(var(--media-width) * 9 / 16); + --side-column-width: calc((100vw - var(--media-width) - 2 * var(--gap-width)) / 2); + + background: var(--color-primary-blue-05); + z-index: 800; + + display: grid; + grid-template-columns: + [col] var(--side-column-width) [col] var(--media-width) [col] var(--side-column-width); + grid-template-rows: [row] auto [row] min-content [row] auto; + grid-gap: var(--gap-width); + + .button-close { + grid-row: row 1; + grid-column: col 3 / span 1; + justify-self: start; + align-self: end; + + width: auto; + padding: 0; + + :deep(.svg__fill--primary-blue-01) { + fill: none; + } - .button-close { - grid-row: row 1; - grid-column: col 3 / span 1; - justify-self: start; - align-self: end; + :deep(.svg__stroke--default-cyan-02) { + stroke: var(--color-white); + } + } - width: auto; - padding: 0; + .media-container { + position: relative; + grid-row: row 2; + grid-column: col 2 / span 1; + } - :deep(.svg__fill--primary-blue-01) { - fill: none; - } + // Override colors of all the SVG icons + :deep(svg) { + display: block; + + .svg__fill--primary-blue-03 { + fill: none; + } - :deep(.svg__stroke--default-cyan-02) { - stroke: var(--color-white); + .svg__stroke--primary-blue-03 { + stroke: white; + } + } + + @media #{$has-hover} { + button:enabled { + .media-counter-item:hover { + :deep(.svg__fill--primary-blue-03) { + fill: var(--color-white); } + } } - .media-container { - position: relative; - grid-row: row 2; - grid-column: col 2 / span 1; + button:disabled { + cursor: default; } + } - // Override colors of all the SVG icons + button:disabled { :deep(svg) { - display: block; + .svg__fill--primary-blue-03 { + fill: var(--color-white); + } + } + } + + :deep(.media-item) { + height: var(--media-height); + } + + .controls { + width: 110%; + display: flex; + justify-content: space-between; + position: absolute; + top: 250px; + left: -50px; + } + + --media-height-half: calc(var(--media-height) / 2); + + .button-prev { + position: absolute; + top: var(--media-height-half); + left: calc(-1 * var(--side-column-min-width)); + justify-self: end; + align-self: center; + color: white; + + :deep(.svg__fill--primary-blue-01) { + fill: none; + } - .svg__fill--primary-blue-03 { - fill: none; - } + :deep(.svg__fill--primary-blue-03) { + fill: var(--color-white); + } + } + + .button-next { + position: absolute; + top: var(--media-height-half); + right: calc(-1 * var(--side-column-min-width)); + justify-self: start; + align-self: center; + color: white; + + :deep(.svg__fill--primary-blue-01) { + fill: none; + } - .svg__stroke--primary-blue-03 { - stroke: white; - } + :deep(.svg__fill--primary-blue-03) { + fill: var(--color-white); } + } - @media #{$has-hover} { - button:enabled { - .media-counter-item:hover { - :deep(.svg__fill--primary-blue-03) { - fill: var(--color-white); - } - } - } + @media #{$medium} { + --side-column-min-width: 64px; - button:disabled { - cursor: default; - } + .button-prev { + top: calc(var(--media-width) / 3); } - button:disabled { - :deep(svg) { - .svg__fill--primary-blue-03 { - fill: var(--color-white); - } - } + .button-next { + top: calc(var(--media-width) / 3); } :deep(.media-item) { - height: var(--media-height); + height: calc(var(--media-height) * 1.2); } - .controls { - width: 110%; - display: flex; - justify-content: space-between; - position: absolute; - top: 250px; - left: -50px; + :deep(.glide__slides) { + align-items: center; } + } - --media-height-half: calc(var(--media-height) / 2); + @media #{$small} { + --side-column-min-width: var(--unit-gutter); - .button-prev { - position: absolute; - top: var(--media-height-half); - left: calc(-1 * var(--side-column-min-width)); - justify-self: end; - align-self: center; - color: white; - - :deep(.svg__fill--primary-blue-01) { - fill: none; - } - - :deep(.svg__fill--primary-blue-03) { - fill: var(--color-white); - } + .button-close { + grid-column: col 2; + justify-self: end; } + .button-prev, .button-next { - position: absolute; - top: var(--media-height-half); - right: calc(-1 * var(--side-column-min-width)); - justify-self: start; - align-self: center; - color: white; - - :deep(.svg__fill--primary-blue-01) { - fill: none; - } - - :deep(.svg__fill--primary-blue-03) { - fill: var(--color-white); - } + display: none; } - @media #{$medium} { - --side-column-min-width: 64px; - - .button-prev { - top: calc(var(--media-width) / 3); - } + :deep(.media-item) { + height: 100%; + } - .button-next { - top: calc(var(--media-width) / 3); - } + :deep(.glide__slides) { + align-items: center; + } + } - :deep(.media-item) { - height: calc(var(--media-height) * 1.2); - } + .caption-block { + color: var(--color-white); + grid-row: row 3; + grid-column: col 2; - :deep(.glide__slides) { - align-items: center; - } - } + .media-counter { + display: flex; + flex-direction: row; + justify-content: center; + margin-bottom: 24px; - @media #{$small} { - --side-column-min-width: var(--unit-gutter); + .media-counter-item { + padding: 0; - .button-close { - grid-column: col 2; - justify-self: end; + .svg { + display: block; } - .button-prev, - .button-next { - display: none; + :deep(.svg__fill--primary-blue-03) { + fill: none; } - :deep(.media-item) { - height: 100%; - } + &:disabled { + :deep(.svg__stroke--primary-blue-03) { + stroke: white; + } - :deep(.glide__slides) { - align-items: center; + :deep(.svg__fill--primary-blue-03) { + fill: white; + } } + } } - .caption-block { - color: var(--color-white); - grid-row: row 3; - grid-column: col 2; - - .media-counter { - display: flex; - flex-direction: row; - justify-content: center; - margin-bottom: 24px; - - .media-counter-item { - padding: 0; - - .svg { - display: block; - } - - :deep(.svg__fill--primary-blue-03) { - fill: none; - } - - &:disabled { - :deep(.svg__stroke--primary-blue-03) { - stroke: white; - } - - :deep(.svg__fill--primary-blue-03) { - fill: white; - } - } - } - } - - .media-object-title { - @include step-0; - margin-bottom: var(--space-s); - } + .media-object-title { + @include step-0; + margin-bottom: var(--space-s); + } - .media-object-caption { - @include step--1; - } + .media-object-caption { + @include step--1; + } - .media-object-credit { - margin-top: 4px; + .media-object-credit { + margin-top: 4px; - @include step--1; - font-style: italic; - } + @include step--1; + font-style: italic; + } - .media-object-caption-link { - @include step--1; + .media-object-caption-link { + @include step--1; - margin-top: 4px; - padding: 0; + margin-top: 4px; + padding: 0; - display: flex; - align-items: center; + display: flex; + align-items: center; - color: $white; + color: $white; - :deep(.svg__icon-external-link) { - .svg__fill--primary-blue-03 { - fill: $white; + :deep(.svg__icon-external-link) { + .svg__fill--primary-blue-03 { + fill: $white; - fill: $white; - stroke: $white; - } - } + fill: $white; + stroke: $white; } + } } + } } diff --git a/src/lib-components/FooterPrimary.vue b/src/lib-components/FooterPrimary.vue index 2a23c4984..95fbfb391 100644 --- a/src/lib-components/FooterPrimary.vue +++ b/src/lib-components/FooterPrimary.vue @@ -41,7 +41,7 @@ export default { else { // eslint-disable-next-line no-console console.log( - `Pinia state data not present: is it client side:${process.client}` + `Pinia state data not present: is it client side:${process.client}` ) } return [] @@ -53,7 +53,7 @@ export default { else { // eslint-disable-next-line no-console console.log( - `Pinia state data for footer primary not present, it could be because navigation is not setup for the website: is it client side:${process.client}` + `Pinia state data for footer primary not present, it could be because navigation is not setup for the website: is it client side:${process.client}` ) } return [] @@ -116,8 +116,8 @@ export default {