Fix for bouncing buttons

directus · Jan 29, 2025 · c182ced · c182ced
1 parent 2401d6d
commit c182ced
Showing 1 changed file with 69 additions and 55 deletions.
diff --git a/components/Block/Carousel/CarouselCard.vue b/components/Block/Carousel/CarouselCard.vue
@@ -31,18 +31,20 @@ const { data: cardData } = useAsyncData(`carousel-card-${props.uuid}`, () =>
 <template>
 	<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" class="card-content">
+		<div class="content-container">
+			<div class="card-content" :class="{ 'is-hidden': !props.isFocused }">
 				<h2 class="title">{{ cardData?.title }}</h2>
 				<p v-if="cardData?.description" class="description">{{ cardData?.description }}</p>
-				<BlockButtonGroup
-					v-if="cardData?.block_button_group"
-					class="custom-button-group"
-					:uuid="cardData?.block_button_group.id as string"
-					:align="cardData.block_button_group.alignment"
-				/>
+				<div class="button-container">
+					<BlockButtonGroup
+						v-if="cardData?.block_button_group"
+						class="custom-button-group"
+						:uuid="cardData?.block_button_group.id as string"
+						:align="cardData.block_button_group.alignment"
+					/>
+				</div>
 			</div>
-		</Transition>
+		</div>
 	</div>
 </template>
 <style lang="scss" scoped>
@@ -56,59 +58,71 @@ const { data: cardData } = useAsyncData(`carousel-card-${props.uuid}`, () =>
 	img {
 		border-radius: var(--rounded-lg);
 		margin-bottom: var(--space-3);
+		width: 100%;
+		object-fit: cover;
 	}
-	.card-content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: var(--space-4);
-		padding-bottom: var(--space-2);
-	}
-	h2 {
-		font-style: normal;
-		font-family: var(--family-display);
-		background: linear-gradient(143deg, var(--primary-500) 0%, var(--secondary) 100%);
-		background-clip: text;
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		position: relative;
-		z-index: 1;
-		max-width: var(--space-80);
-		word-wrap: break-word;
-		line-height: var(--line-height-2xl);
+}
 
-		overflow-wrap: break-word;
-	}
-	.description {
-		order: 1;
-		min-height: calc(var(--line-height-2xl) * 1.5);
-		@media (max-width: 768px) {
-			max-width: 80%;
-		}
-	}
-	.custom-button-group {
-		order: 2;
-		display: flex;
-		flex-wrap: nowrap !important;
-		justify-content: center;
-		align-items: center;
-		gap: var(--space-4);
-	}
-	.custom-button-group :deep(.button-group) {
-		display: flex;
-		flex-wrap: nowrap !important;
-		justify-content: center;
-		align-items: center;
-	}
+.content-container {
+	position: relative;
+	width: 100%;
 }
-.fade-enter-active,
-.fade-leave-active {
+
+.card-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--space-4);
+	padding-bottom: var(--space-2);
 	transition: opacity 0.3s ease-in-out;
 }
-.fade-enter-from,
-.fade-leave-to {
+
+.is-hidden {
 	opacity: 0;
+	pointer-events: none;
 }
+
+h2 {
+	font-style: normal;
+	font-family: var(--family-display);
+	background: linear-gradient(143deg, var(--primary-500) 0%, var(--secondary) 100%);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	position: relative;
+	z-index: 1;
+	max-width: var(--space-80);
+	word-wrap: break-word;
+	line-height: var(--line-height-2xl);
+	overflow-wrap: break-word;
+}
+.description {
+	order: 1;
+	min-height: calc(var(--line-height-2xl) * 1.5);
+	@media (max-width: 768px) {
+		max-width: 80%;
+	}
+}
+
+.button-container {
+	order: 2;
+	width: 100%;
+}
+
+.custom-button-group {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--space-4);
+}
+
+.custom-button-group :deep(.button-group) {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--space-4);
+}
+
 @media (max-width: 768px) {
 	.carousel-card-content {
 		margin-left: var(--space-0);