diff --git a/css/form.css b/css/form.css new file mode 100644 index 0000000..4a46ff9 --- /dev/null +++ b/css/form.css @@ -0,0 +1,175 @@ +/* Formular-Modal zum Anlegen/Bearbeiten eines Ausflugsziels (Phase 3): + Vollbild auf Mobile, zentriertes Panel ab 1024px (siehe Breakpoint in + css/responsive.css). Struktur wird von js/ui/form.js in + #place-form-modal eingehängt. Grundgerüst analog zu css/detail.css. */ + +.place-form-modal { + position: fixed; + inset: 0; + z-index: 2100; +} + +.place-form-modal[hidden] { + display: none; +} + +.place-form-modal__backdrop { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.55); +} + +.place-form-modal__panel { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background: var(--color-surface); + overflow-y: auto; +} + +.place-form-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; +} + +.place-form__title { + padding: var(--space-lg) var(--space-lg) 0; + font-size: 1.3rem; + font-weight: 700; +} + +.place-form { + padding: var(--space-md) var(--space-lg) var(--space-lg); + display: flex; + flex-direction: column; + gap: var(--space-lg); +} + +.place-form__section { + display: flex; + flex-direction: column; + gap: var(--space-md); + border: none; + border-top: 1px solid var(--color-border); + padding: var(--space-md) 0 0; + margin: 0; +} + +.place-form__section:first-of-type { + border-top: none; + padding-top: 0; +} + +.place-form__section-label { + padding: 0; + font-size: 0.85rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.02em; + color: var(--color-text-muted); +} + +.place-form__row { + display: flex; + flex-wrap: wrap; + gap: var(--space-md); +} + +.place-form__row .form-field { + flex: 1 1 160px; +} + +.form-field { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.form-field__label { + font-size: 0.85rem; + font-weight: 600; +} + +.form-field__required { + color: var(--color-danger); +} + +.form-field input, +.form-field select, +.form-field textarea { + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + padding: var(--space-sm); + font: inherit; + background: var(--color-surface); + color: var(--color-text); + width: 100%; +} + +.form-field textarea { + resize: vertical; + min-height: 80px; +} + +.form-field input[aria-invalid='true'], +.form-field select[aria-invalid='true'], +.form-field textarea[aria-invalid='true'] { + border-color: var(--color-danger); +} + +.form-field__error { + color: var(--color-danger); + font-size: 0.8rem; +} + +.form-field__error[hidden] { + display: none; +} + +.place-form__checkbox-group { + display: flex; + flex-wrap: wrap; + gap: var(--space-md); +} + +.form-checkbox { + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: 0.9rem; + cursor: pointer; +} + +.place-form__actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + padding-top: var(--space-md); + border-top: 1px solid var(--color-border); +} + +@media (min-width: 1024px) { + .place-form-modal__panel { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: min(720px, 90vw); + height: min(90vh, 960px); + border-radius: var(--radius-md); + box-shadow: var(--shadow-card); + } +} diff --git a/css/layout.css b/css/layout.css index 844c451..9b65d7d 100644 --- a/css/layout.css +++ b/css/layout.css @@ -39,6 +39,9 @@ top: var(--space-sm); left: var(--space-sm); z-index: 1000; + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); } .map-panel__map { diff --git a/index.html b/index.html index 9579a88..b9e6d27 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,7 @@ +
@@ -30,6 +31,9 @@ +Karte wird geladen…
@@ -45,6 +49,7 @@ + @@ -69,6 +74,7 @@ +