diff --git a/README.md b/README.md index 423a6a6..d7e6139 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Mobile Progressive Web App für die Baustellen-Doku — Foto-Upload, Sprach- und - ✅ Auftragsdetail mit Kunde, Adresse, Telefon (Click-to-Call) - ✅ **Neuer Auftrag** (FAB): Kunde per Suche/Zuletzt-verwendet wählen, dann **Ihr Zeichen** (Pflicht), **Auftragsbeschreibung** (optional), **Geplanter Liefertermin** (Datum + Uhrzeit) und Checkbox **Auftrag direkt freigeben**. Kunden-Defaults (Zahlungsbedingung/Zahlart, Ansprechpartner) werden übernommen. Bei „direkt freigeben" wird der Auftrag **ohne Position** validiert — die Leistungen kommen aus dem Stundenzettel. (Bis Bericht 1.3.1 hängte das Backend hier eine Std-Lohn-Zeile mit Menge 1 an; die verfälschte den Auftragswert, stand als offene Restmenge in der Lieferauflistung und im Kunden-PDF.) -**Aussehen:** Knöpfe tragen farbige Symbole statt Emojis (`icon()` in app.js, Material Icons; Farben je Symbol in app.css `.ikon-`) — Emojis erscheinen je nach Handy als Kästchen. Große Knöpfe: weißes Symbol im farbigen runden Feld, linksbündig (Symbole in einer Spalte, Text darunter bündig); kleine Knöpfe: farbiges Symbol. Untere Leiste: farbiges Symbol über dem Wort. Überschriften fett in normaler Schreibweise, ohne Versalien und ohne Emoji (ROADMAP Punkt 12). +**Aussehen:** Knöpfe tragen farbige Symbole statt Emojis (`icon()` in app.js, Material Icons; Farben je Symbol in app.css `.ikon-`) — Emojis erscheinen je nach Handy als Kästchen. Große Knöpfe: weißes Symbol im farbigen runden Feld, linksbündig (Symbole in einer Spalte, Text darunter bündig); kleine Knöpfe: farbiges Symbol. Untere Leiste: farbiges Symbol über dem Wort, klebt fest am unteren Rand (wie die Kopfzeile oben). Überschriften fett in normaler Schreibweise, ohne Versalien und ohne Emoji (ROADMAP Punkt 12). **Foto- und Video-Upload** - ✅ Live-Kamera-Modal (getUserMedia): bleibt für Serien-Aufnahmen offen — Auslöser + Filmstreifen mit Upload-Status je Foto (💾 gesichert → ⏳ lädt hoch → ✓ fertig), Front-/Rückkamera-Umschaltung (nur bei zwei Kameras), Fehlschuss löschbar diff --git a/ROADMAP.md b/ROADMAP.md index 67f9db7..38d6ad2 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -80,9 +80,12 @@ Anlass: der 🔄-Wechselknopf erschien als blaues Kästchen („den hässlichen - [x] ✅ Titel der Vollbild-Ansichten und Abschnitts-Überschriften ohne Emoji (reiner Text). - Bewusst gelassen: Zustandsanzeige 🟢/🟡/🔴 (Farbe ist dort die Aussage), Stempel im Skizzen-Editor (werden so ins Bild gezeichnet), Bilder in leeren Listen, Emojis in Meldungen. -- [ ] Offen, nicht angefasst: Die untere Leiste steht seit v1.0.0 am **Seitenende** statt fest unten (`#app` nur - `min-height: 100dvh`, `#main` wächst mit) — bei langen Listen erst nach Scrollen erreichbar. Wenn gewünscht: - Leiste fest unten, dabei FAB und „Geteiltes ablegen"-Leiste (Punkt 8) mit hochrücken. +- [x] ✅ 20.10.2026 (Eddy: „ja mach die Leiste unten mal fest"): Die untere Leiste stand seit v1.0.0 am **Seitenende** + (`#app` nur `min-height`, die Seite wächst mit) — in einem Auftrag unter allen Fotos und Dokumenten, Eddy kannte sie + gar nicht. Jetzt `position: sticky; bottom: 0` wie die Kopfzeile oben, feste Höhe `--nav-h: 56px`; „Geteiltes + ablegen" klebt genau darüber (`bottom: var(--nav-h)`), der FAB (fixed 68 px) darüber. Im Emulator gemessen: Leiste + 729–786 bei 785 px Fensterhöhe, oben wie gescrollt; Banner 688–730, FAB 618–674 — nichts überlappt. Banner mit + Teilen-Symbol statt 📤 und „2 Fotos und 1 Video" statt „3 Bilder". ## 11. Videos aufnehmen (gewünscht 2026-10-19) diff --git a/app.css b/app.css index ba369d5..38f3470 100644 --- a/app.css +++ b/app.css @@ -63,20 +63,31 @@ body { -webkit-overflow-scrolling: touch; } +/* Untere Leiste klebt am unteren Rand wie die Kopfzeile oben (Eddy 20.10.2026: „mach die Leiste + unten mal fest"). Bis dahin stand sie seit v1.0.0 am Seitenende — in einem Auftrag unter allen + Fotos und Dokumenten, praktisch nie im Bild. Feste Hoehe (--nav-h), damit die Leiste + „Geteiltes ablegen" genau darueber kleben kann; der FAB (fixed, 68px) liegt schon darueber. */ +:root { --nav-h: 56px; } #bottom-nav { display: flex; background: #25252b; border-top: 1px solid #333; padding-bottom: env(safe-area-inset-bottom); + position: sticky; + bottom: 0; + z-index: 30; } #bottom-nav button { flex: 1; background: transparent; border: none; color: #888; - padding: 8px 2px; + height: var(--nav-h); + box-sizing: border-box; + padding: 6px 2px; font-size: 11px; cursor: pointer; + justify-content: center; /* Symbol ueber dem Wort, wie in Handy-Apps ueblich (vorher bunte Emojis) */ display: flex; flex-direction: column; @@ -1698,7 +1709,7 @@ body { * (fixed, bottom 68px) liegt darüber und wird nicht mehr verdeckt. */ .shared-banner { position: sticky; - bottom: 0; + bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); /* direkt ueber der festen Leiste */ z-index: 20; width: 100%; margin: 0; @@ -1713,6 +1724,9 @@ body { cursor: pointer; } .shared-banner:active { filter: brightness(0.95); } +/* Symbol in Schriftfarbe (dunkel auf hellblau) — die Teilen-Farbe waere hier unsichtbar */ +.shared-banner { display: flex; align-items: center; justify-content: center; gap: 8px; } +.shared-banner .ikon { color: inherit; } /* Solange die Leiste da ist, sitzt der FAB eine Leistenhöhe höher — sonst ragt er hinein */ body.hat-geteiltes .fab { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); } diff --git a/app.js b/app.js index 3dd6d50..970eb4f 100644 --- a/app.js +++ b/app.js @@ -1982,11 +1982,12 @@ router.on('/settings', async () => { * bleiben in IndexedDB liegen; ohne diesen Hinweis wuerde sie niemand je wiederfinden. */ async function checkPendingShare() { if (document.getElementById('shared-banner')) return; - let n = 0, notiz = false; + let n = 0, notiz = false, dateien = []; try { const p = await idb.get('shared_payload'); if (p) { - n = (p.files || []).length; + dateien = p.files || []; + n = dateien.length; notiz = !!((p.title || '').trim() || (p.text || '').trim() || (p.url || '').trim()); } else { const alt = await idb.get('shared_files'); // altes Format @@ -2004,7 +2005,9 @@ async function checkPendingShare() { const b = document.createElement('button'); b.id = 'shared-banner'; b.className = 'shared-banner'; - b.textContent = '📤 Geteiltes ablegen' + (n ? ' (' + n + ' Bild' + (n > 1 ? 'er' : '') + ')' : ' (Notiz)'); + // Videos koennen seit 19.10.2026 mitkommen — daher „2 Fotos und 1 Video" statt „3 Bilder" + const was = n ? medienText(dateien.length ? dateien.map(f => ({ mime: f.type || '' })) : new Array(n).fill({})) : 'Notiz'; + b.innerHTML = icon('teilen', 20) + 'Geteiltes ablegen (' + escapeHtml(was) + ')'; b.addEventListener('click', () => { location.href = 'share.html'; }); // Als Leiste in die App-Spalte direkt über die Navigation (Eddy: „unten am Rand, nicht auf den // Aufträgen") — vorher schwebte der Knopf fest über der Liste und verdeckte Einträge und den FAB