From 6a9a46ba0533ecb86654e539850d7fedefde229c Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Thu, 20 Jul 2023 15:41:04 +0200
Subject: [PATCH] simplify avatar setup via background-image

---
 src/lib/components/UserHeader.svelte | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/UserHeader.svelte b/src/lib/components/UserHeader.svelte
index ed378ed..25d2617 100644
--- a/src/lib/components/UserHeader.svelte
+++ b/src/lib/components/UserHeader.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	export let username;
-	console.log("username UESRHEADER", username)
 	function show_options(){
 		const el = document.querySelector("#options")
 		el.hidden = !el.hidden
 	}
+	let src="https://new.bocken.org/static/user/thumb/" +  username + ".webp"
 </script>
 <style>
 	/* (A) SPEECH BOX */
@@ -54,12 +54,9 @@
 		height: 2.5rem;
 		border-radius: 50%;
 		margin-right: var(--margin-right);
-	}
-	img{
-		height: 2.5rem;
-		border-radius: 50%;
-		object-fit: cover;
-		object-position: center;
+		background-color: var(--nord4);
+		background-position: center;
+		background-size: contain;
 	}
 	#options{
 		--bg_color: var(--nord3);
@@ -117,8 +114,8 @@
 </style>
 
 {#if username}
-	<button on:click={show_options}><img src="https://new.bocken.org/static/user/thumb/{username}.webp">
-		<div id=options class="speech top" hidden>
+	<button on:click={show_options} style="background-image: url({src})">
+	<div id=options class="speech top" hidden>
 			<ul>
 				<li><a href="/logout">Log Out</a></li>
 			</ul>