Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Artikelbild per Klick gross anzeigen (Lightbox)

Browse Source 
Klick aufs Artikelbild oeffnet es bildschirmfuellend; Schliessen per Knopf, Klick auf den Hintergrund oder Escape. Neue Lightbox-Komponente (Portal an <body>), im bestehenden Farbschema.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-27 14:44:43 +02:00
parent 89d8ba4eff
commit 4887596b43
3 changed files with 65 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/styles.css
View File

@@ -209,11 +209,35 @@ input::placeholder { color: var(--muted); opacity: 0.7; }
border-radius: var(--radius);
padding: var(--sp-2);
}
.produkt-bild.clickable { cursor: zoom-in; }
/* Auf schmalen Fenstern haben Bild und Felder nebeneinander keinen Platz mehr. */
@media (max-width: 560px) {
.produkt-kopf { flex-direction: column-reverse; align-items: center; }
}
/* Bild-Lightbox: Klick aufs Artikelbild zeigt es gross (Schliessen per Knopf,
Klick auf den Hintergrund oder Escape). */
.lightbox {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: var(--sp-5);
background: rgba(0, 0, 0, 0.82);
}
.lightbox-img {
max-width: 92vw; max-height: 92vh; object-fit: contain;
border-radius: var(--radius);
box-shadow: 0 16px 56px rgba(0, 0, 0, 0.5);
cursor: default;
}
.lightbox-close {
position: fixed; top: 16px; right: 16px;
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); cursor: pointer;
}
.lightbox-close:hover { background: var(--surface-2); }
/* Knoepfe neben dem Barcode-Feld: nebeneinander, mit Umbruch auf schmalen
Fenstern. Das Eingabefeld daneben fuellt die restliche Breite. */
.knopf-spalte { display: flex; flex-flow: row wrap; gap: var(--sp-2); flex: 0 0 auto; }