From d2c5c564c624657aef37b386729f901747ef23fb Mon Sep 17 00:00:00 2001 From: Lindsey Zylstra Date: Mon, 23 Dec 2024 14:01:43 -0800 Subject: [PATCH 1/3] MasonryGrid hover color sync, carousel description and button style, wall of love style --- components/Block/Carousel/CarouselCard.vue | 19 ++- .../Block/MasonryGrid/MasonryGridCard.vue | 18 +-- components/Block/WallOfLove/Testimonial.vue | 23 +--- components/Block/WallOfLove/WallOfLove.vue | 126 +++++++++++++++--- types/schema/blocks/block-carousel-cards.ts | 1 + types/schema/content/testimonials.ts | 1 + 6 files changed, 145 insertions(+), 43 deletions(-) diff --git a/components/Block/Carousel/CarouselCard.vue b/components/Block/Carousel/CarouselCard.vue index b89f0244..73f69405 100644 --- a/components/Block/Carousel/CarouselCard.vue +++ b/components/Block/Carousel/CarouselCard.vue @@ -18,6 +18,7 @@ const { data: cardData } = useAsyncData(`carousel-card-${props.uuid}`, () => 'image', 'external_url', 'button_text', + 'description', { page: ['permalink'] }, { resource: ['slug'] }, ], @@ -46,14 +47,15 @@ const buttonHref = computed(() => {
-
+

{{ cardData?.title }}

+

{{ cardData?.description }}

{ border-radius: var(--rounded-lg); margin-bottom: var(--space-3); } + .card-content { + display: flex; + flex-direction: column; + align-items: center; + } h2 { font-style: normal; font-family: var(--family-display); @@ -87,9 +94,15 @@ const buttonHref = computed(() => { max-width: var(--space-80); word-wrap: break-word; line-height: var(--line-height-2xl); - min-height: calc(var(--line-height-2xl) * 2); + overflow-wrap: break-word; } + .description { + min-height: calc(var(--line-height-2xl) * 1.5); + @media (max-width: 768px) { + max-width: 80%; + } + } .custom-button { margin-top: var(--space-3); } diff --git a/components/Block/MasonryGrid/MasonryGridCard.vue b/components/Block/MasonryGrid/MasonryGridCard.vue index 5275a781..b1396119 100644 --- a/components/Block/MasonryGrid/MasonryGridCard.vue +++ b/components/Block/MasonryGrid/MasonryGridCard.vue @@ -80,16 +80,22 @@ const isExternal = computed(() => !!cardData.value?.external_url); margin: 0 1% 1% 0; } + &:hover { + img { + filter: grayscale(0%) opacity(100%); + } + + .title a { + color: var(--primary-500); + } + } + img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) opacity(40%); transition: filter 0.3s ease-in-out; - - &:hover { - filter: grayscale(0%) opacity(100%); - } } .title { @@ -107,10 +113,6 @@ const isExternal = computed(() => !!cardData.value?.external_url); color: inherit; text-decoration: none; transition: color 0.3s ease; - - &:hover { - color: var(--primary-500); - } } } diff --git a/components/Block/WallOfLove/Testimonial.vue b/components/Block/WallOfLove/Testimonial.vue index cb257697..f32eaa09 100644 --- a/components/Block/WallOfLove/Testimonial.vue +++ b/components/Block/WallOfLove/Testimonial.vue @@ -55,13 +55,13 @@ const logoImageUrl = computed(() => { border-radius: var(--rounded-xl); border: 1px solid var(--gray-200); background: var(--background); - display: flex; - min-width: 358px; - min-height: 330px; padding: var(--space-8); - color: var(--foreground); + display: flex; flex-direction: column; + color: var(--foreground); gap: var(--space-8); + height: 100%; + box-sizing: border-box; @media (max-width: 768px) { padding: var(--space-6); @@ -113,11 +113,11 @@ const logoImageUrl = computed(() => { .quote { margin-bottom: var(--space-3); - font-style: italic; flex-grow: 1; :deep(> *) { quotes: auto; + font-family: var(--family-display) !important; &::before { content: open-quote; @@ -140,24 +140,15 @@ const logoImageUrl = computed(() => { .company-logo { max-height: 40px; - max-width: 150px; + max-width: 120px; width: auto; - @media (max-width: 768px) { - max-width: 150px; - } - @media (max-width: 480px) { + max-height: 30px; max-width: 100px; } } - .logo-placeholder { - width: 40px; - height: 40px; - border-radius: var(--rounded); - } - .stars { display: flex; gap: var(--space-1); diff --git a/components/Block/WallOfLove/WallOfLove.vue b/components/Block/WallOfLove/WallOfLove.vue index d99ed85b..9eaa95e0 100644 --- a/components/Block/WallOfLove/WallOfLove.vue +++ b/components/Block/WallOfLove/WallOfLove.vue @@ -11,7 +11,9 @@ const { data: block } = useAsyncData(`wall-of-love-${props.uuid}`, () => 'heading', { testimonials: [ - { testimonials_id: ['id', 'company', 'name', 'role', 'quote', 'logo', 'avatar', 'avatar_url'] }, + { + testimonials_id: ['id', 'company', 'name', 'role', 'quote', 'logo', 'avatar', 'avatar_url', 'card_width'], + }, ], }, ], @@ -27,18 +29,30 @@ const displayedTestimonials = computed(() => { const toggleShowAll = () => { showAll.value = !showAll.value; + + if (!showAll.value) { + const wallOfLoveElement = document.querySelector('.wall-of-love'); + + if (wallOfLoveElement) { + wallOfLoveElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + } };