Block CardGroup

directus · Aug 7, 2023 · 3deea8c · 3deea8c
1 parent bb6d61f
commit 3deea8c
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 21 deletions.
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -13,6 +13,10 @@ body {
 	color: var(--black);
 }
 
+::selection {
+	background-color: var(--purple-100);
+}
+
 img,
 picture,
 video,

diff --git a/components/Base/Card.vue b/components/Base/Card.vue
@@ -22,12 +22,14 @@ withDefaults(defineProps<BaseCardProps>(), {
 			<BaseDirectusImage v-if="image" :uuid="image" :alt="title" />
 		</div>
 
-		<h3 class="heading">{{ title }}</h3>
+		<div class="content">
+			<h3 class="heading">{{ title }}</h3>
 
-		<p v-if="description" class="description">
-			{{ description }}
-			<slot />
-		</p>
+			<p v-if="description" class="description">
+				{{ description }}
+				<slot />
+			</p>
+		</div>
 	</NuxtLink>
 </template>
 
@@ -36,6 +38,7 @@ withDefaults(defineProps<BaseCardProps>(), {
 	container-type: inline-size;
 	color: inherit;
 	text-decoration: none;
+	display: block;
 
 	&:hover .heading {
 		text-decoration: underline;
@@ -88,4 +91,40 @@ withDefaults(defineProps<BaseCardProps>(), {
 	line-height: var(--line-height-sm);
 	color: var(--gray-400);
 }
+
+.base-card.direction-horizontal {
+	@container (width > 25rem) {
+		display: flex;
+		gap: var(--space-5);
+		align-items: center;
+
+		.image {
+			flex-basis: var(--space-32);
+			flex-grow: 1;
+			flex-shrink: 0;
+			margin-block-end: 0;
+		}
+
+		.content {
+			flex-basis: var(--space-48);
+			flex-grow: 3;
+		}
+	}
+
+	@container (width > 35rem) {
+		gap: var(--space-10);
+
+		.image,
+		.content {
+			flex-basis: var(--space-32);
+			flex-grow: 1;
+		}
+
+		.heading {
+			font-size: var(--font-size-lg);
+			line-height: var(--line-height-lg);
+			margin-block-end: var(--space-2);
+		}
+	}
+}
 </style>
diff --git a/components/Block/Card.vue b/components/Block/Card.vue
@@ -3,7 +3,13 @@ import type { BlockProps } from './types';
 
 const { $directus, $readItem } = useNuxtApp();
 
-const props = defineProps<BlockProps>();
+interface BlockCardProps extends BlockProps {
+	direction?: 'vertical' | 'horizontal';
+}
+
+const props = withDefaults(defineProps<BlockCardProps>(), {
+	direction: 'vertical',
+});
 
 const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
@@ -30,5 +36,6 @@ const { data: block } = useAsyncData(props.uuid, () =>
 		:image-size="block.image_size ?? undefined"
 		:description="block.description ?? undefined"
 		:to="block.external_url ?? block.page?.permalink ?? resourcePermalink(block.resource) ?? undefined"
+		:layout="direction"
 	/>
 </template>
diff --git a/components/Block/CardGroup.vue b/components/Block/CardGroup.vue
@@ -17,7 +17,13 @@ const { data: block } = useAsyncData(props.uuid, () =>
 <template>
 	<div class="block-cardgroup-container">
 		<div v-if="block" :class="[`direction-${block.direction ?? 'horizontal'}`, 'block-cardgroup']">
-			<BlockCard v-for="{ block_card_id: card } in block.cards" :key="card" :uuid="card" />
+			<BlockCard
+				v-for="{ block_card_id: card } in block.cards"
+				class="card"
+				:key="card"
+				:uuid="card"
+				:direction="block.direction === 'vertical' ? 'horizontal' : 'vertical'"
+			/>
 		</div>
 	</div>
 </template>
@@ -28,25 +34,57 @@ const { data: block } = useAsyncData(props.uuid, () =>
 }
 
 .block-cardgroup {
-	--columns: 1;
-	--gap: var(--space-5);
+	&.direction-horizontal {
+		--columns: 1;
+		--gap: var(--space-5);
 
-	display: grid;
-	grid-template-columns: repeat(var(--columns), 1fr);
-	gap: var(--gap);
+		display: grid;
+		grid-template-columns: repeat(var(--columns), 1fr);
+		gap: var(--gap);
 
-	@container (width > 20rem) {
-		--columns: 2;
-	}
+		@container (width > 20rem) {
+			--columns: 2;
+		}
+
+		@container (width > 40rem) {
+			--columns: 3;
+			--gap: var(--space-6);
+		}
 
-	@container (width > 40rem) {
-		--columns: 3;
-		--gap: var(--space-6);
+		@container (width > 60rem) {
+			--columns: 4;
+			--gap: var(--space-8);
+		}
 	}
 
-	@container (width > 60rem) {
-		--columns: 4;
-		--gap: var(--space-8);
+	&.direction-vertical {
+		.card + .card {
+			margin-block-start: var(--space-5);
+		}
+
+		@container (width > 25rem) {
+			.card {
+				padding-block-end: var(--space-5);
+			}
+
+			.card + .card {
+				margin-block-start: var(--space-5);
+			}
+
+			.card:not(:last-child) {
+				border-block-end: 1px solid var(--gray-200);
+			}
+		}
+
+		@container (width > 35rem) {
+			.card {
+				padding-block-end: var(--space-10);
+			}
+
+			.card + .card {
+				margin-block-start: var(--space-10);
+			}
+		}
 	}
 }
 </style>