diff --git a/css/components.css b/css/components.css index 055b088..b6f713e 100644 --- a/css/components.css +++ b/css/components.css @@ -2,6 +2,10 @@ Karten-Marker/Popups. */ .app-status { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); background: #fdecea; color: var(--color-danger); padding: var(--space-sm) var(--space-lg); @@ -9,6 +13,26 @@ border-bottom: 1px solid var(--color-danger); } +.app-status[hidden] { + display: none; +} + +.app-status__text { + flex: 1; + margin: 0; +} + +.app-status__close { + flex-shrink: 0; + border: none; + background: transparent; + color: var(--color-danger); + font-size: 1rem; + line-height: 1; + cursor: pointer; + padding: 0 var(--space-xs); +} + .btn { border: none; border-radius: var(--radius-sm); diff --git a/css/manualLocation.css b/css/manualLocation.css new file mode 100644 index 0000000..cd92df6 --- /dev/null +++ b/css/manualLocation.css @@ -0,0 +1,85 @@ +/* Modal zur manuellen Eingabe des Nutzerstandorts (Bugfix, Gitea Issue #1): + Anders als die übrigen Modals (css/detail.css, css/form.css, + css/promptGenerator.css - jeweils vollflächig auf Mobile, zentriertes + Panel ab 1024px) ist dieses Modal auf allen Breakpoints ein kompaktes, + zentriertes Panel, da es nur zwei Eingabefelder enthält und ein + Vollbild-Modal dafür unangemessen viel Leerraum erzeugen würde. Backdrop, + Schließen-Button und Grundstruktur folgen trotzdem demselben Muster wie + die übrigen Modals. Das Eingabeformular selbst nutzt bewusst dieselben + Klassen wie das Ausflugsziel-Formular (.form-field, ...) aus css/form.css + statt sie zu duplizieren. Struktur wird von js/ui/manualLocation.js in + #manual-location-modal eingehängt. */ + +.manual-location-modal { + position: fixed; + inset: 0; + z-index: 2300; +} + +.manual-location-modal[hidden] { + display: none; +} + +.manual-location-modal__backdrop { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.55); +} + +.manual-location-modal__panel { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: min(360px, 90vw); + max-height: 90vh; + overflow-y: auto; + background: var(--color-surface); + border-radius: var(--radius-md); + box-shadow: var(--shadow-card); + padding: var(--space-lg); + padding-top: calc(var(--space-lg) + 36px); +} + +.manual-location-modal__close { + position: absolute; + top: var(--space-sm); + right: var(--space-sm); + z-index: 1; + width: 36px; + height: 36px; + border: none; + border-radius: 50%; + background: rgba(0, 0, 0, 0.55); + color: #fff; + font-size: 1rem; + line-height: 1; + cursor: pointer; +} + +.manual-location-form__title { + font-size: 1.2rem; + font-weight: 700; + margin-bottom: var(--space-sm); +} + +.manual-location-form__intro { + color: var(--color-text-muted); + font-size: 0.85rem; + line-height: 1.4; + margin-bottom: var(--space-md); +} + +.manual-location-form { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.manual-location-form__actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + padding-top: var(--space-sm); + border-top: 1px solid var(--color-border); +} diff --git a/index.html b/index.html index d545d2a..4c6ecd4 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@ +
@@ -25,7 +26,17 @@Familienfreundliche Ausflugsziele auf der Karte
- +