From 4bd4f8046de67049b18c415dff4792b0756e8703 Mon Sep 17 00:00:00 2001 From: Ysabelle Moser Date: Thu, 23 Apr 2026 16:25:23 +0200 Subject: [PATCH] =?UTF-8?q?Einf=C3=BCgen=20Icons=20+=20Anpassung=20Styling?= =?UTF-8?q?=20Radio-Buttons=20und=20Foto-Buttons=20bei=20Eventerstellung?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/event_create.css | 136 +++++++++++++++++++++++++++++++++++++++++-- event_create.html | 69 ++++++++++++++-------- js/event_create.js | 84 +++++++++++++++++++++++++- 3 files changed, 258 insertions(+), 31 deletions(-) diff --git a/css/event_create.css b/css/event_create.css index 613dfe0..62a414c 100644 --- a/css/event_create.css +++ b/css/event_create.css @@ -229,6 +229,24 @@ textarea:focus { transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } +.option-card--with-icon { + justify-items: center; + align-content: center; + gap: var(--space-2); + color: var(--brown); +} + +.option-card__icon { + color: var(--brown); + font-size: 1.35rem; + line-height: 1; + pointer-events: none; +} + +.option-card--with-icon span { + pointer-events: none; +} + .option-card:hover { background: var(--olive-light); @@ -236,6 +254,41 @@ textarea:focus { transform: translateY(-3px); } +.option-grid--tomato-choices .option-card:hover, +.option-grid--tomato-choices .option-card:has(input:focus-visible) { + border-color: var(--tomato); + background: var(--tomato); + color: var(--butter-light); +} + +.option-grid--tomato-choices .option-card:has(input:checked) { + border-color: var(--tomato); + background: var(--tomato); + color: var(--butter-light); +} + +.option-grid--icon-choices .option-card--with-icon:hover .option-card__icon, +.option-grid--icon-choices .option-card--with-icon:has(input:focus-visible) .option-card__icon, +.option-grid--icon-choices .option-card--with-icon:has(input:checked) .option-card__icon { + color: var(--butter-light); +} + +.option-grid--icon-choices .option-card--with-icon:has(input:disabled) { + opacity: 0.45; +} + +.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover { + border-color: var(--olive-light); + background: var(--butter-light); + color: var(--brown); + box-shadow: none; + transform: none; +} + +.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon { + color: var(--brown); +} + .option-card input { position: absolute; inset: 0; @@ -251,6 +304,20 @@ textarea:focus { .option-card--invalid { border-color: var(--error) !important; box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14); + } + +.guest-count-icon { + display: flex; + justify-content: center; + width: 100%; + color: var(--brown); + font-size: 3rem; + line-height: 1; +} + +.guest-count-icon::before { + display: block; + transform: translateX(1.1rem); } .counter { @@ -259,8 +326,17 @@ textarea:focus { gap: var(--space-16); } -.counter input { +.counter-value-group { + display: grid; + justify-items: stretch; + row-gap: var(--space-1); width: 6rem; +} + +.counter input { + width: 100%; + height: 3rem; + padding-block: 0.75rem; text-align: center; } @@ -327,6 +403,20 @@ textarea:focus { color: var(--color-text-secondary); } +.review-gallery { + display: flex; + flex-wrap: wrap; + gap: var(--space-1); +} + +.review-gallery__thumb { + width: 4.5rem; + height: 4.5rem; + border-radius: var(--radius-sm); + object-fit: cover; + box-shadow: var(--shadow-interaction); +} + .submission-success-actions { display: flex; justify-content: flex-start; @@ -417,22 +507,58 @@ textarea:focus { margin-top: var(--space-2); } -/* Gallery Upload */ .gallery-upload { display: flex; flex-wrap: wrap; align-items: center; - gap: 0.75rem; + gap: var(--space-16); } .gallery-preview { display: contents; } +.gallery-add-button { + width: 7rem; + height: 7rem; + display: grid; + place-items: center; + align-content: center; + gap: var(--space-1); + padding: var(--space-1); + border: 1.5px solid var(--olive-light); + border-radius: var(--radius-md); + background: var(--butter-light); + color: var(--olive); + font-family: var(--font-main); + cursor: pointer; + transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; +} + +.gallery-add-button__icon { + color: var(--brown); + font-size: 2rem; + line-height: 1; +} + +.gallery-add-button__text { + color: var(--black); + font-size: 0.95rem; + line-height: 1.15; + text-align: center; + overflow-wrap: anywhere; +} + +.gallery-add-button:hover { + background: var(--olive-light); + box-shadow: var(--shadow-interaction); + transform: translateY(-3px); +} + .gallery-thumb { position: relative; - width: 5.5rem; - height: 5.5rem; + width: 7rem; + height: 7rem; border-radius: var(--radius-sm, 0.5rem); overflow: hidden; flex-shrink: 0; diff --git a/event_create.html b/event_create.html index a76ee3f..ffc061a 100644 --- a/event_create.html +++ b/event_create.html @@ -80,24 +80,28 @@
-
-
@@ -375,6 +389,15 @@
Event-Abend
–
+ +
+
Fotos
+
+
+ Keine Fotos hinzugefügt +
+
+
diff --git a/js/event_create.js b/js/event_create.js index 557edc1..162ecfd 100644 --- a/js/event_create.js +++ b/js/event_create.js @@ -270,6 +270,29 @@ function updateReviewField(fieldName, value) { } } +/** + * Zeigt hochgeladene Fotos als kleine Vorschaubilder in der Review. + */ +function updateReviewGallery() { + const target = document.querySelector("[data-review-gallery]"); + if (!target) return; + + target.innerHTML = ""; + + if (galleryImages.length === 0) { + target.textContent = "Keine Fotos hinzugefügt"; + return; + } + + galleryImages.forEach((src, index) => { + const image = document.createElement("img"); + image.className = "review-gallery__thumb"; + image.src = src; + image.alt = `Foto ${index + 1}`; + target.appendChild(image); + }); +} + /** * Baut den Text für Allergien / Hinweise zusammen. * Dabei werden Checkboxen und zusätzliches Freitextfeld kombiniert. @@ -297,6 +320,8 @@ function updateReview() { Object.entries(reviewValues).forEach(([key, value]) => { updateReviewField(key, value); }); + + updateReviewGallery(); } /** @@ -539,6 +564,52 @@ function validateDietType() { return { isValid: true }; } +/** + * Verhindert widersprüchliche Ernährungsformen: + * Fleisch/Fisch dürfen zusammen, schliessen aber vegetarisch/vegan aus. + */ +function registerDietConflictHandlers() { + const dietOptions = Array.from(form.querySelectorAll('input[name="dietType"]')); + const meatFishOptions = dietOptions.filter(input => ["Fleisch", "Fisch"].includes(input.value)); + const plantOptions = dietOptions.filter(input => ["Vegetarisch", "Vegan"].includes(input.value)); + + const updateDietAvailability = changedInput => { + if (changedInput?.checked && changedInput.value === "Vegetarisch") { + dietOptions.forEach(input => { + if (input.value === "Vegan") input.checked = false; + }); + } + + if (changedInput?.checked && changedInput.value === "Vegan") { + dietOptions.forEach(input => { + if (input.value === "Vegetarisch") input.checked = false; + }); + } + + const hasMeatOrFish = meatFishOptions.some(input => input.checked); + const selectedPlantDiet = plantOptions.find(input => input.checked); + + meatFishOptions.forEach(input => { + input.disabled = Boolean(selectedPlantDiet); + }); + + plantOptions.forEach(input => { + input.disabled = hasMeatOrFish || Boolean(selectedPlantDiet && input !== selectedPlantDiet); + }); + }; + + dietOptions.forEach(input => { + input.addEventListener("change", () => { + dietOptions.forEach(option => { + option.closest(".option-card")?.classList.remove("option-card--invalid"); + }); + updateDietAvailability(input); + }); + }); + + updateDietAvailability(); +} + /** * Prüft alle Pflichtfelder ausser Radios und Checkboxen. * Rückgabe: @@ -648,11 +719,17 @@ function registerCounterHandlers() { /** * Erhöht oder verringert den Wert eines Zahlenfelds. - * Der Wert darf dabei nie kleiner als das definierte Minimum werden. + * 0 bleibt als bewusster Startwert erlaubt; gültig ist erst eine Auswahl ab min. */ function updateCounterValue(input, change) { const min = Number(input.min || 1); - const currentValue = Number(input.value || min); + const currentValue = Number(input.value || 0); + + if (currentValue < min && change < 0) { + input.value = currentValue; + return; + } + input.value = Math.max(min, currentValue + change); } @@ -765,7 +842,7 @@ function registerValidationFeedbackHandlers() { * Setzt den Fokus auf ein bestimmtes Feld oder die erste Option einer Radio-Gruppe. */ function focusFieldByName(fieldName) { - const field = form.elements[fieldName]; + const field = form.elements[fieldName] || document.getElementById(fieldName); if (!field) return; @@ -862,6 +939,7 @@ function initEventCreationFlow() { // Counter aktivieren registerCounterHandlers(); + registerDietConflictHandlers(); registerMenuBulletHandler(); registerValidationFeedbackHandlers(); registerReviewEditHandlers();