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">
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>