diff --git a/public/css/events.css b/public/css/events.css index d6d2eeb..693f2d2 100644 --- a/public/css/events.css +++ b/public/css/events.css @@ -1,3 +1,23 @@ +/* ================================================ + events.css – Tägliche Events Quickmenü-Popup + Die Popup-Basisgrösse kommt von .qm-popup in + quickmenu.css – hier wird sie per ID überschrieben. +================================================ */ + +/* Popup-Grösse für Events (ID schlägt Klasse) */ +#qm-popup-events { + width: 900px; + height: 600px; +} + +/* Body-Padding anpassen (war auf 1800px ausgelegt) */ +#qm-popup-events .qm-popup-body { + padding: 20px 30px; + align-items: flex-start; + justify-content: flex-start; +} + +/* ── Event Grid ─────────────────────────────────── */ .events-grid { display: flex; gap: 10px; @@ -78,8 +98,14 @@ } @keyframes eventDetailIn { - from { opacity: 0; transform: translateY(6px); } - to { opacity: 1; transform: translateY(0); } + from { + opacity: 0; + transform: translateY(6px); + } + to { + opacity: 1; + transform: translateY(0); + } } #event-detail-popup .edp-close { diff --git a/public/js/quickmenu/events.js b/public/js/quickmenu/events.js index 4bd011a..b1545fa 100644 --- a/public/js/quickmenu/events.js +++ b/public/js/quickmenu/events.js @@ -2,16 +2,6 @@ export async function loadEvents() { const body = document.getElementById("qm-body-events"); if (!body) return; - /* ================================ - CSS einmalig laden - ================================ */ - if (!document.querySelector('link[href="/css/events.css"]')) { - const link = document.createElement("link"); - link.rel = "stylesheet"; - link.href = "/css/events.css"; - document.head.appendChild(link); - } - /* ================================ Event-Daten (hier später befüllen) ================================ */ @@ -37,7 +27,7 @@ export async function loadEvents() { ${ev.label} ${ev.label} - ` + `, ) .join("")} @@ -57,10 +47,10 @@ export async function loadEvents() { Event-Karten klickbar machen ================================ */ - const overlay = body.querySelector("#event-detail-overlay"); - const edpImg = body.querySelector("#edp-img"); + const overlay = body.querySelector("#event-detail-overlay"); + const edpImg = body.querySelector("#edp-img"); const edpTitle = body.querySelector("#edp-title"); - const edpBody = body.querySelector("#edp-body"); + const edpBody = body.querySelector("#edp-body"); body.querySelectorAll(".event-card").forEach((card) => { card.addEventListener("click", () => { @@ -68,10 +58,10 @@ export async function loadEvents() { const ev = events.find((e) => e.id === id); if (!ev) return; - edpImg.src = ev.img; - edpImg.alt = ev.label; + edpImg.src = ev.img; + edpImg.alt = ev.label; edpTitle.textContent = ev.label; - edpBody.textContent = "Inhalt folgt..."; // hier später befüllen + edpBody.textContent = "Inhalt folgt..."; // hier später befüllen overlay.classList.add("active"); }); diff --git a/views/launcher.ejs b/views/launcher.ejs index fe2f2fe..55d2e66 100644 --- a/views/launcher.ejs +++ b/views/launcher.ejs @@ -91,6 +91,7 @@ +