66e351e54f
Das Teamdropdown stand als eigenes Bedienelement neben dem Namen — ein zweiter Schalter fuer eine Sache, die schon einen Menuepunkt hat. Jetzt klappt der Menuepunkt Team beim Ueberfahren auf: die eigenen Teams, ein Klick wechselt und oeffnet die Teamseite, darunter "Team erstellen". Die Zeiger- und Tastenhandler von bits-ui werden am Trigger bewusst ueberschrieben. Deren onclick ruft preventDefault und macht den Link tot, ihr pointerdown klappt zu, was der Hover gerade aufgeklappt hat — zwei Herren ueber dasselbe open, das Ergebnis war Flackern statt Navigation. Das Menue verzichtet zudem auf Fokusfang und Scrollsperre; beides gehoert zu einem Dialog, nicht zu etwas, ueber das der Zeiger nur streift. Der Anlegedialog liegt jetzt als CreateTeamDialog vor: Es gibt zwei Einstiege, und ein neues Team muss an beiden dasselbe bedeuten — Team anlegen, Standardsatz Flag-Typen dazu, ab dann ist es das aktive. Das Logo ragt mit -my-3 leicht ueber die Kopfleiste hinaus, verlinkt aufs Dashboard und teilt sich den Hover mit dessen Menuepunkt. Der aktive Menuepunkt traegt das Primary-Design. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P32KoesVtABd6xWsqMKzhr
28 lines
1.1 KiB
Svelte
28 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* Logo eines Teams. Ist eins hinterlegt, steht es allein; sonst bleibt das
|
|
* Wappen des Stammtischs als Rückfalloption — zwei übereinanderliegende
|
|
* SVGs, weil das Radl über dem Schildl leicht übersteht.
|
|
*
|
|
* Groesse ueber eine Klasse steuerbar, damit dasselbe Logo im Header
|
|
* (klein) und auf der Login-Karte (gross) verwendet werden kann.
|
|
*/
|
|
import { getFileURL } from '$lib/stores/pocketbase.svelte'
|
|
import type { TeamsResponse } from '$lib/types'
|
|
|
|
let {
|
|
class: className = 'w-24 h-24',
|
|
team = null,
|
|
}: { class?: string; team?: TeamsResponse | null } = $props()
|
|
|
|
const url = $derived(team?.logo ? getFileURL(team, team.logo) : null)
|
|
</script>
|
|
|
|
<div class="relative {className} hover:scale-110 hover:rotate-3 transition-transform" id="logo">
|
|
{#if url}
|
|
<img alt="" class="absolute h-full w-full object-contain" src={url} />
|
|
{:else}
|
|
<img alt="" class="absolute h-full w-full object-contain" src="/schildl.svg">
|
|
<img alt="" class="absolute h-full w-full scale-110 object-contain" src="/radl.svg">
|
|
{/if}
|
|
</div>
|