Masonry Grid and Small Carousel Update

directus · Nov 13, 2024 · 8ba5bd8 · 8ba5bd8
1 parent 5c69a14
commit 8ba5bd8
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 32 deletions.
diff --git a/components/Block/Carousel/Carousel.vue b/components/Block/Carousel/Carousel.vue
@@ -103,13 +103,18 @@ onMounted(async () => {
 		}
 	}
 	&__controls {
-		position: absolute;
-		top: 250px;
+		position: relative;
+		justify-content: center;
 		left: 0;
 		right: 0;
 		display: flex;
-		justify-content: center;
 		gap: 30%;
+		bottom: 80px;
+		top: auto;
+		@media (max-width: 1704px) {
+			bottom: 60px;
+			top: auto;
+		}
 		@media (max-width: 847px) {
 			bottom: 40px;
 			top: auto;

diff --git a/components/Block/MasonryGrid/MasonryGrid.vue b/components/Block/MasonryGrid/MasonryGrid.vue
@@ -39,41 +39,42 @@ const limitedCards = computed(() => {
 <style lang="scss" scoped>
 .masonry-grid {
 	display: grid;
-	gap: 1rem;
 	margin: 0 auto;
+	gap: 1rem;
 
 	&.six_cards {
-		grid-template-columns: repeat(3, auto);
+		grid-template-columns: repeat(3, 1fr);
 		grid-auto-rows: auto;
 	}
 
 	&.four_cards {
-		grid-template-columns: repeat(2, auto);
+		grid-template-columns: repeat(2, 1fr);
 		grid-auto-rows: auto;
 	}
 
 	&.two_cards {
-		grid-template-columns: repeat(2, auto);
+		grid-template-columns: repeat(2, 1fr);
 		grid-auto-rows: auto;
 	}
-
-	@media (max-width: 1024px) {
-		.masonry-grid {
-			gap: 0.5rem;
+	@media (max-width: 1456px) {
+		&.six_cards,
+		&.four_cards,
+		&.two_cards {
+			grid-template-columns: repeat(2, 1fr);
 		}
-
-		.masonry-grid.six_cards,
-		.masonry-grid.four_cards,
-		.masonry-grid.two_cards {
-			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	}
+	@media (max-width: 911px) {
+		grid-auto-rows: auto;
+		&.six_cards,
+		&.four_cards,
+		&.two_cards {
+			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 		}
 	}
 
-	@media (max-width: 768px) {
-		.masonry-grid {
-			grid-template-columns: 1fr;
-			gap: 0.5rem;
-		}
+	@media (max-width: 819px) {
+		grid-template-columns: 1fr;
+		gap: 0.5rem;
 	}
 }
 </style>
diff --git a/components/Block/MasonryGrid/MasonryGridCard.vue b/components/Block/MasonryGrid/MasonryGridCard.vue
@@ -32,14 +32,17 @@ const { data: cardData } = useAsyncData(`masonry-grid-card-${props.uuid}`, () =>
 	overflow: hidden;
 	position: relative;
 	height: 290px;
+	width: 100%;
 	transition: transform 0.3s ease;
 
 	&.single-card {
-		width: 290px; // Single card width
+		min-width: 290px;
+		flex-grow: 1;
 	}
 
 	&.double-card {
-		width: 500px; // Double card width
+		min-width: 500px;
+		flex-grow: 2;
 	}
 
 	img {
@@ -58,32 +61,51 @@ const { data: cardData } = useAsyncData(`masonry-grid-card-${props.uuid}`, () =>
 	}
 
 	.title {
-		position: relative;
+		position: absolute;
+		top: 0;
+		left: 0;
 		z-index: 2;
+		background-color: rgba(255, 255, 255, 0.8);
 		padding: 8px;
 		border-radius: 4px;
 		margin: 8px;
 		font-size: 16px;
+		font-weight: bold;
 	}
 }
-@media (max-width: 1024px) {
+
+@media (max-width: 911px) {
 	.masonry-card-content {
-		&.single-card {
-			width: 200px; // Adjust width for smaller screens
+		&.double-card {
+			grid-column: span 2;
+			width: 100%;
 		}
+	}
+}
 
+@media (max-width: 819px) {
+	.masonry-card-content {
 		&.double-card {
-			width: 350px; // Adjust width for smaller screens
+			grid-column: span 1;
+		}
+
+		&.single-card {
+			min-width: 250px;
 		}
 	}
 }
+
 @media (max-width: 768px) {
 	.masonry-card-content {
 		height: 180px;
-		width: 100%;
-	}
-	img {
-		display: none;
+		min-width: 100%;
+		&.single-card {
+			min-width: 100px;
+		}
+
+		&.double-card {
+			min-width: 250px;
+		}
 	}
 }
 </style>