Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplify avatar setup via background-image

Browse Source
This commit is contained in:
Alexander Bocken 2023-07-20 15:41:04 +02:00
parent 12db3c9e3c
commit 6a9a46ba05
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
1 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/components/UserHeader.svelte
View File

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