From f9b34408f2d237ccfc0a78f7197ed9b39fcf39b1 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 9 Aug 2023 11:26:46 -0400
Subject: [PATCH] Add inline card style

---
 components/Base/Card.vue          | 23 +++++++++++++++++++----
 types/schema/blocks/block-card.ts |  2 +-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/components/Base/Card.vue b/components/Base/Card.vue
index 6ac332f8..0485ee11 100644
--- a/components/Base/Card.vue
+++ b/components/Base/Card.vue
@@ -6,7 +6,7 @@ export interface BaseCardProps {
 	to?: string;
 	layout?: 'vertical' | 'horizontal';
 	aspect?: '16-9' | '1-1';
-	imageSize?: 'icon' | 'cover';
+	imageSize?: 'inline' | 'icon' | 'cover';
 }
 
 withDefaults(defineProps<BaseCardProps>(), {
@@ -18,12 +18,15 @@ withDefaults(defineProps<BaseCardProps>(), {
 
 <template>
 	<NuxtLink :to="to" class="base-card" :class="`direction-${layout}`">
-		<div class="image" :class="[`aspect-${aspect}`, `size-${imageSize}`]">
-			<BaseDirectusImage v-if="image" :uuid="image" :alt="title" />
+		<div v-if="image && imageSize !== 'inline'" class="image" :class="[`aspect-${aspect}`, `size-${imageSize}`]">
+			<BaseDirectusImage :uuid="image" :alt="title" />
 		</div>
 
 		<div class="content">
-			<h3 class="heading">{{ title }}</h3>
+			<h3 class="heading">
+				<BaseDirectusImage v-if="image && imageSize === 'inline'" :uuid="image" :alt="title" />
+				{{ title }}
+			</h3>
 
 			<p v-if="description" class="description">
 				{{ description }}
@@ -84,6 +87,18 @@ withDefaults(defineProps<BaseCardProps>(), {
 	font-size: var(--font-size-base);
 	line-height: var(--line-height-base);
 	font-weight: 600;
+	display: flex;
+
+	> img {
+		width: var(--space-6);
+		height: var(--space-6);
+		object-fit: contain;
+		margin-inline-end: var(--space-2);
+	}
+
+	&:has(img) {
+		margin-block-end: var(--space-3);
+	}
 }
 
 .description {
diff --git a/types/schema/blocks/block-card.ts b/types/schema/blocks/block-card.ts
index 50066e78..fbf18af4 100644
--- a/types/schema/blocks/block-card.ts
+++ b/types/schema/blocks/block-card.ts
@@ -6,7 +6,7 @@ export interface BlockCard {
 	sort: number;
 	title: string;
 	description: string | null;
-	image_size: 'icon' | 'cover' | null;
+	image_size: 'inline' | 'icon' | 'cover' | null;
 	image: string | File | null;
 	type: 'pages' | 'resources' | 'external' | null;
 	external_url: string | null;