teams.logo nimmt eine Datei auf; hochgeladen wird sie in den Team-Einstellungen. Ohne eigenes Logo bleibt das Wappen aus static/ als Rueckfalloption - fuer den Stammtisch Hersbruck aendert sich damit nichts, fuer jedes weitere Team waere es fremdes Vereinswappen gewesen. Dasselbe Logo liegt gedreht und sehr blass in der rechten unteren Ecke der Seite. Es haengt fest im Bildschirm, faengt keine Klicks ab und ist fuer Screenreader nicht vorhanden; im Dunkelmodus etwas kraeftiger, sonst verschwaende es im dunklen Grund. In TODO.md ausserdem der Plan fuer Ausfahrten: Sie werden kein zweites Konzept neben Events, sondern Schalter daran - timing, participation (offen/bestaetigung/geschlossen) und Serien, die echte Einzeltermine erzeugen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014dh9W1i7aLSdPYJzQPid5o
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}" id="logo">
|
|
{#if url}
|
|
<img alt="" class="absolute inset-0 h-full w-full object-contain" src={url} />
|
|
{:else}
|
|
<img alt="" class="absolute inset-0 h-full w-full object-contain" src="/schildl.svg">
|
|
<img alt="" class="absolute inset-0 h-full w-full scale-110 object-contain" src="/radl.svg">
|
|
{/if}
|
|
</div>
|