dne/stammtisch-hersbruck
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Login mit Logo statt Produktname

Browse source 
Auf der Login-Karte steht jetzt das Logo an Stelle des Titels "Zeitnahme",
ebenso entfaellt der Name im Seitentitel. Im Header stand ohnehin nur das
Logo, dort war nichts zu entfernen.

Logo.svelte nimmt dafuer eine class-Prop entgegen, damit dieselbe
Komponente im Header und auf der Login-Karte in unterschiedlicher Groesse
verwendet werden kann; der bisherige Default w-24 h-24 bleibt, der Header
aendert sich also nicht. Die Bilder skalieren nun ueber h-full w-full mit
dem Container statt ueber die nie gueltige Klasse "-24".

"Zeitnahme" als Bezeichnung der Funktion (Navigation, Ueberschrift der
Timing-Seite, Buttons) bleibt bestehen — entfernt wurde nur der
Produktname.

Verifiziert: svelte-check ohne Fehler, Login-Seite im Browser geprueft,
Logo in beiden Groessen isoliert gerendert.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Daniel Michelberger 2026-08-14 15:45:36 +02:00
parent 7df0e9a5ba
commit dc393502c2
2 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/lib/components/Logo.svelte
View file

@ -1,7 +1,10 @@
<script> <script lang="ts">
// Groesse ueber eine Klasse steuerbar, damit dasselbe Logo im Header
// (klein) und auf der Login-Karte (gross) verwendet werden kann.
let { class: className = 'w-24 h-24' }: { class?: string } = $props()
</script> </script>
<div class="w-24 h-24 relative" id="logo"> <div class="relative {className}" id="logo">
<img alt="" class="absolute top-0 w-24 -24 object-contain" src="/schildl.svg"> <img alt="" class="absolute inset-0 h-full w-full object-contain" src="/schildl.svg">
<img alt="" class="absolute top-0 scale-110 w-24 -24 object-contain" src="/radl.svg"> <img alt="" class="absolute inset-0 h-full w-full scale-110 object-contain" src="/radl.svg">
</div> </div>

9
frontend/src/routes/login/+page.svelte
View file

@ -2,10 +2,11 @@
import { auth } from '$lib/stores/pocketbase.svelte' import { auth } from '$lib/stores/pocketbase.svelte'
import { goto } from '$app/navigation' import { goto } from '$app/navigation'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { LoaderCircle } from 'lucide-svelte' import { LoaderCircle } from 'lucide-svelte'
import Logo from '$lib/components/Logo.svelte'
let email = $state('') let email = $state('')
let password = $state('') let password = $state('')
@ -34,12 +35,12 @@
} }
</script> </script>
<svelte:head><title>Login – Zeitnahme</title></svelte:head> <svelte:head><title>Login</title></svelte:head>
<div class="min-h-screen flex items-center justify-center bg-background p-4"> <div class="min-h-screen flex items-center justify-center bg-background p-4">
<Card class="w-full max-w-md"> <Card class="w-full max-w-md">
<CardHeader class="text-center"> <CardHeader class="justify-items-center gap-3 pt-2 text-center">
<CardTitle class="text-2xl">Zeitnahme</CardTitle> <Logo class="h-20 w-20" />
<CardDescription>Melde dich an, um fortzufahren</CardDescription> <CardDescription>Melde dich an, um fortzufahren</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>