Updates to Masonry Grid, Carousel, Wall of Love (#177)

* MasonryGrid hover color sync, carousel description and button style, wall of love style * PR updates (quotes styling, if for carousel description) * imports should go before props --------- Co-authored-by: Lindsey Zylstra <[email protected]>
directus · Dec 31, 2024 · 532fa2f · 532fa2f
1 parent 995b044
commit 532fa2f
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 49 deletions.
diff --git 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(() => {
 	<div :class="['carousel-card-content', { 'carousel-card--focused': props.isFocused }]">
 		<BaseDirectusImage v-if="cardData?.image" :uuid="cardData?.image as string" :alt="cardData?.title ?? ''" />
 		<Transition name="fade">
-			<div v-show="props.isFocused">
+			<div v-show="props.isFocused" class="card-content">
 				<h2 class="title">{{ cardData?.title }}</h2>
+				<p v-if="cardData?.description" class="description">{{ cardData?.description }}</p>
 				<BaseButton
 					v-show="props.isFocused"
 					:href="buttonHref"
 					:label="cardData?.button_text"
 					color="secondary"
-					ghost
+					outline
 					class="custom-button"
 					size="medium"
 					icon="arrow_forward"
@@ -75,6 +77,11 @@ const buttonHref = computed(() => {
 		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
@@ -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
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const props = defineProps<{ testimonialData: Testimonial }>();
-
 import placeholderAvatar from '~/assets/svg/placeholder-avatar.svg';
 import starIcon from '~/assets/svg/star.svg';
-import type { Testimonial } from '~/types/schema/content';
+import type { Testimonial } from '~/types/schema';
+
+const props = defineProps<{ testimonialData: Testimonial }>();
 
 const {
 	public: { directusUrl },
@@ -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,20 +113,42 @@ const logoImageUrl = computed(() => {
 
 	.quote {
 		margin-bottom: var(--space-3);
-		font-style: italic;
 		flex-grow: 1;
 
-		:deep(> *) {
+		:deep(> *:not(p)) {
+			position: relative;
+			display: inline;
 			quotes: auto;
+			font-family: var(--family-display) !important;
 
 			&::before {
 				content: open-quote;
-				position: absolute;
-				translate: -0.7ch 0;
+				margin-right: 0.2ch;
 			}
 
 			&::after {
 				content: close-quote;
+				margin-left: 0.2ch;
+			}
+		}
+
+		:deep(p) {
+			position: relative;
+			display: inline;
+			font-family: var(--family-display) !important;
+
+			&[data-no-quotes='false'] {
+				quotes: auto;
+
+				&::before {
+					content: open-quote;
+					margin-right: 0.2ch;
+				}
+
+				&::after {
+					content: close-quote;
+					margin-left: 0.2ch;
+				}
 			}
 		}
 	}
@@ -140,24 +162,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
@@ -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' });
+		}
+	}
 };
 </script>
 
 <template>
 	<div v-if="block" class="wall-of-love">
 		<h2 class="wall-heading">{{ block.heading }}</h2>
-		<div class="testimonial-container">
+		<div class="testimonial-container" :class="{ expanded: showAll }">
 			<BlockWallOfLoveTestimonial
 				v-for="testimonial in displayedTestimonials"
 				:key="testimonial.testimonials_id.id"
 				:testimonial-data="testimonial.testimonials_id"
-				class="testimonial-item"
+				:class="[
+					'testimonial-item',
+					`size-${testimonial.testimonials_id.card_width || 'flexible'}`,
+					testimonial.testimonials_id.quote.length > 400 ? 'long-quote' : '',
+				]"
 			/>
 			<!-- Fading effect -->
 			<div v-if="!showAll && block.testimonials && block.testimonials.length > 6" class="fade-out"></div>
@@ -68,7 +82,6 @@ const toggleShowAll = () => {
 	.wall-heading {
 		color: var(--gray-500);
 		font-size: var(--font-size-2xl);
-		font-style: normal;
 		font-weight: 600;
 		line-height: var(--line-height-2xl);
 	}
@@ -81,37 +94,118 @@ const toggleShowAll = () => {
 		justify-content: center;
 		width: 100%;
 		position: relative;
+		align-items: stretch;
+		max-height: calc(2 * 300px + var(--space-4) / 2);
+		overflow: hidden;
+		transition: max-height 0.3s ease;
+
+		&.expanded {
+			max-height: none;
+			overflow: visible;
+		}
+
+		.fade-out {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 100px; /* Height of the fade effect */
+			background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9));
+			pointer-events: none;
+			z-index: 1;
+		}
 	}
 
 	.testimonial-item {
-		flex: 1 1 calc(33.333% - 16px);
+		display: flex;
 		min-width: 300px;
+		flex-direction: column;
+		justify-content: space-between;
+		width: 100%;
+		height: auto; /* Ensure cards maintain their height */
 		box-sizing: border-box;
+		padding: var(--space-8); /* Restore proper padding inside the cards */
+		background: var(--background); /* Ensure cards have background */
+		border: 1px solid var(--gray-200);
+		border-radius: var(--rounded-xl);
+
+		& p {
+			font-family: var(--family-display) !important;
+		}
+
+		&.size-small {
+			flex: 1 1 calc(20% - 16px);
+		}
+
+		&.size-medium {
+			flex: 1 1 calc(30% - 16px);
+		}
+
+		&.size-large {
+			flex: 1 1 calc(40% - 16px);
+		}
+
+		&.size-flexible {
+			flex: 1 1 calc(33.333% - 16px);
+		}
+
+		&.long-quote {
+			flex: 1 1 calc(60% - 16px);
+		}
+
+		.footer {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: var(--space-2);
+			margin-top: var(--space-4);
+
+			.company-logo {
+				max-height: 40px;
+				max-width: 120px;
+				width: auto;
+
+				@media (max-width: 480px) {
+					max-height: 30px;
+					max-width: 100px;
+				}
+			}
+
+			.stars {
+				display: flex;
+				gap: var(--space-1);
+
+				.star-icon {
+					width: 16px;
+					height: 16px;
+
+					@media (max-width: 480px) {
+						width: 14px;
+						height: 14px;
+					}
+				}
+			}
+		}
 	}
 
+	/* Tablet adjustments */
 	@media (max-width: 768px) {
 		.testimonial-item {
 			flex: 1 1 calc(50% - 16px);
 		}
+
+		.testimonial-item.long-quote {
+			flex: 1 1 calc(100% - 16px);
+		}
 	}
 
+	/* Mobile adjustments */
 	@media (max-width: 480px) {
 		.testimonial-item {
 			flex: 1 1 100%;
 		}
 	}
 
-	.fade-out {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		height: 450px;
-		background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9));
-		pointer-events: none;
-		z-index: 1;
-	}
-
 	.see-more-button {
 		margin: var(--space-4) auto;
 		align-self: center;

diff --git a/types/schema/blocks/block-carousel-cards.ts b/types/schema/blocks/block-carousel-cards.ts
@@ -5,6 +5,7 @@ import type { File } from '../system';
 export interface BlockCarouselCards {
 	id: string;
 	title: string;
+	description: string;
 	image?: string | File | null;
 	type?: 'pages' | 'resources' | 'external' | null;
 	external_url?: string | null;

diff --git a/types/schema/content/testimonials.ts b/types/schema/content/testimonials.ts
@@ -8,4 +8,5 @@ export interface Testimonial {
 	logo: string | File | null;
 	avatar: string | File | null;
 	avatar_url: string | null;
+	card_width: string | null;
 }