From e2e15378e78e339c097e14a0f9aa0a3458092a31 Mon Sep 17 00:00:00 2001
From: Philip Saa <cowglow@gmail.com>
Date: Wed, 5 Jun 2024 22:32:02 +0200
Subject: [PATCH] Improves image placement in team member component

---
 src/routes/team/TeamMember.svelte | 144 ++++++++++++++++--------------
 1 file changed, 76 insertions(+), 68 deletions(-)

diff --git a/src/routes/team/TeamMember.svelte b/src/routes/team/TeamMember.svelte
index 02920863..89458ba6 100644
--- a/src/routes/team/TeamMember.svelte
+++ b/src/routes/team/TeamMember.svelte
@@ -1,77 +1,85 @@
 <script lang="ts">
-	import Box from '$lib/layout/Box.svelte';
-	import linkedinLogo from '$lib/participants/linkedin.svg';
+    import Box from '$lib/layout/Box.svelte';
+    import linkedinLogo from '$lib/participants/linkedin.svg';
 
-	export let email: string = '';
-	export let linkedin: string | undefined = undefined;
-	export let image: string | undefined = undefined;
-	export let name: string;
+    export let email: string = '';
+    export let linkedin: string | undefined = undefined;
+    export let image: string | undefined = undefined;
+    export let name: string;
 </script>
 
 <Box>
-	<div class="member">
-		<div class="image">
-			{#if image}
-				<img src={image} alt={name} />
-			{:else}
-				<span>🧑‍💻</span>
-			{/if}
-		</div>
-		<div class="infos">
-			<strong class="name-with-logo">
-				{name}
-				{#if linkedin}
-					<a
-						href={linkedin}
-						rel="external"
-						class="linkedin-link"
-						title="Link to {name} on LinkedIn"
-					>
-						<img src={linkedinLogo} height="32" width="32" alt="Link to {name} on LinkedIn" />
-					</a>
-				{/if}
-			</strong>
-			{#if email}
-				<a href="mailto:{email}" title={email}>{email}</a>
-			{:else}
-				<span>-</span>
-			{/if}
-		</div>
-	</div>
+    <div class="member">
+        <div class="image">
+            {#if image}
+                <img src={image} alt={name}/>
+            {:else}
+                <span>🧑‍💻</span>
+            {/if}
+        </div>
+        <div class="infos">
+            <strong class="name-with-logo">
+                {name}
+                {#if linkedin}
+                    <a
+                            href={linkedin}
+                            rel="external"
+                            class="linkedin-link"
+                            title="Link to {name} on LinkedIn"
+                    >
+                        <img src={linkedinLogo} height="32" width="32" alt="Link to {name} on LinkedIn"/>
+                    </a>
+                {/if}
+            </strong>
+            {#if email}
+                <a href="mailto:{email}" title={email}>{email}</a>
+            {:else}
+                <span>&nbsp;</span>
+            {/if}
+        </div>
+    </div>
 </Box>
 
 <style>
-	.member {
-		display: flex;
-		flex-flow: column;
-		height: 100%;
-	}
-	.infos {
-		display: flex;
-		flex-flow: column;
-		padding: 1em;
-	}
-	.name-with-logo {
-		display: flex;
-		align-items: center;
-	}
-	.linkedin-link {
-		margin-left: 0.5em;
-	}
-	a {
-		max-width: 13em;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	.image {
-		flex: 1;
-		display: grid;
-		place-items: center;
-		max-width: 15em;
-	}
-	img,
-	.image > span {
-		display: block;
-		max-width: 100%;
-	}
+    .member {
+        display: flex;
+        flex-flow: column;
+        height: 100%;
+    }
+
+    .infos {
+        display: flex;
+        flex-flow: column;
+        padding: 1em;
+    }
+
+    .name-with-logo {
+        display: flex;
+        align-items: center;
+    }
+
+    .linkedin-link {
+        margin-left: 0.5em;
+    }
+
+    a {
+        max-width: 13em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .image {
+        display: grid;
+        width: 15em;
+        height: 15em;
+        overflow: hidden;
+    }
+    .image:has(span){
+        place-content: center;
+    }
+    .image > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 </style>