Gulum
b83e96f552
Detailseite (Rennmausakte): - Neugestaltung: Hero-Foto + Overlay, Schnellfakten-Pills, Karten-Sektionen, Charakter als Chips, getabte Fotos/Gesundheit/Gewicht. - Eltern (Vater/Mutter) als Links; Charakter-Karte klappt bei Status Abgabe/Verstorben/Abgegeben ein (nur Zucht/Liebhaber offen). - Gehege wird bei abgegebenen/verstorbenen Tieren ausgeblendet (Detail + Formular). Listen: - Infinite Scroll auf allen Listen (Rennmäuse, Würfe, Gehege, Verträge, Anfragen, Kontakte) via useInfiniteList/useInfiniteSentinel; stabile Sortierung mit id-Tiebreaker (keine doppelten Keys), Back-to-top-Button. - Kontakte: Rolle-Filter (Züchter/Abnehmer) als Quick-Chips + Sticky-Header. Zucht-Nachname: - Namens-Anhängsel der Zucht in den Einstellungen + je Züchter-Kontakt (Backend-Spalten + Migration); eigene Tiere zeigen „Name + Suffix". - „Eigene Zucht" ist die Standard-Herkunft neuer Tiere. Weiteres: - Gehege-Bilder: Upload/Galerie auf der Gehege-Detailseite (Backend EnclosurePhoto + Endpoints + Migration, geteilte Dateiablage). - Toast-Rückmeldungen für alle Speichern-Aktionen. - Checkboxen durch mobile-freundliche Toggle-Schalter ersetzt. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
56 lines
1.1 KiB
CSS
56 lines
1.1 KiB
CSS
/* Toast stack: centered above the mobile action bar (normal bottom inset on desktop). */
|
|
.toast-stack {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: calc(5rem + env(safe-area-inset-bottom));
|
|
transform: translateX(-50%);
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
width: max-content;
|
|
max-width: calc(100vw - 2rem);
|
|
pointer-events: none;
|
|
}
|
|
.toast {
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: var(--color-text);
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 0.7rem 1.1rem;
|
|
box-shadow: 0 6px 24px rgba(43, 33, 25, 0.28);
|
|
text-align: center;
|
|
animation: toastIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
@keyframes toastIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
.toast--success {
|
|
background: #5e8c5a;
|
|
}
|
|
.toast--error {
|
|
background: #a6433a;
|
|
}
|
|
.toast--info {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.toast-stack {
|
|
bottom: 1.5rem;
|
|
}
|
|
}
|