From f44b7bf465befe618aebce4299c258f86c332e38 Mon Sep 17 00:00:00 2001 From: Florian Heinz Date: Wed, 15 Apr 2026 13:23:31 +0200 Subject: [PATCH] refactor: simplify quick win settings and mobile dialog --- app/static/css/style.css | 69 ++++++++++++++++++++++---- app/static/js/app.js | 63 ++++++++++++++++++++--- app/templates/settings/quick_wins.html | 31 +++++++++++- 3 files changed, 146 insertions(+), 17 deletions(-) diff --git a/app/static/css/style.css b/app/static/css/style.css index f1708df..60e73d6 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -1071,6 +1071,12 @@ p { gap: 12px; } +.quick-win-list__toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 14px; +} + .quick-win-manage-card { display: grid; gap: 12px; @@ -1092,6 +1098,18 @@ p { .quick-win-manage-form { display: grid; gap: 12px; + padding-top: 4px; +} + +.quick-win-manage-card__summary { + display: grid; + gap: 10px; +} + +.quick-win-manage-card__title strong { + display: block; + font-size: 1.12rem; + line-height: 1.25; } .quick-win-manage-card__drag { @@ -1146,6 +1164,9 @@ p { display: flex; flex-wrap: wrap; gap: 12px; + width: 100%; + min-width: 0; + overflow-x: hidden; } .quick-win-tag { @@ -1168,15 +1189,15 @@ p { justify-content: center; min-height: 0; max-width: 100%; - padding: 10px 16px; + padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(132, 152, 190, 0.22); background: var(--surface-soft); color: var(--text); font-weight: 700; - font-size: 0.97rem; + font-size: 0.9rem; text-align: center; - line-height: 1.2; + line-height: 1.1; white-space: nowrap; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; cursor: pointer; @@ -1217,34 +1238,60 @@ p { } @media (max-width: 640px) { + .complete-dialog__surface { + width: min(100vw - 16px, 410px); + max-width: calc(100vw - 16px); + padding: 18px 16px; + gap: 14px; + overflow-x: hidden; + } + .quick-win-dialog-header { grid-template-columns: 1fr; + gap: 10px; } .quick-win-dialog-header__badge { - width: 48px; - height: 48px; + width: 42px; + height: 42px; + border-radius: 14px; + } + + .quick-win-dialog-header__badge svg { + width: 19px; + height: 19px; } .quick-win-tag-grid { - gap: 10px; + gap: 8px; } .quick-win-tag { max-width: 100%; + flex: 0 1 auto; } .quick-win-tag span { width: auto; max-width: 100%; - white-space: normal; - text-align: left; - justify-content: flex-start; + padding: 6px 11px; + font-size: 0.84rem; + white-space: nowrap; + text-align: center; + justify-content: center; } .quick-win-tag--custom span { width: auto; } + + .quick-win-list__toolbar { + justify-content: stretch; + } + + .quick-win-list__toolbar .button { + width: 100%; + } } .push-box__state { @@ -1352,6 +1399,10 @@ p { .complete-dialog__surface--task { width: min(520px, calc(100vw - 24px)); + max-width: calc(100vw - 24px); + overflow-x: hidden; + overscroll-behavior-x: contain; + touch-action: pan-y; } .choice-grid { diff --git a/app/static/js/app.js b/app/static/js/app.js index bf80ada..e66cb76 100644 --- a/app/static/js/app.js +++ b/app/static/js/app.js @@ -18,7 +18,10 @@ const currentUserName = document.body.dataset.currentUserName; const quickWinSortList = document.querySelector("[data-quick-win-sort-list]"); const quickWinSortToken = document.getElementById("quickWinSortToken"); + const quickWinSortSave = document.getElementById("quickWinSortSave"); + const quickWinToggleButtons = document.querySelectorAll("[data-quick-win-toggle]"); let draggedQuickWin = null; + let quickWinSortDirty = false; function buildCompletionOptions(button) { const options = []; @@ -138,7 +141,16 @@ }); } + function setQuickWinSortDirty(isDirty) { + quickWinSortDirty = isDirty; + if (quickWinSortSave) { + quickWinSortSave.disabled = !isDirty; + } + } + if (quickWinSortList) { + setQuickWinSortDirty(false); + quickWinSortList.querySelectorAll("[data-quick-win-sort-item]").forEach((item) => { item.addEventListener("dragstart", () => { draggedQuickWin = item; @@ -168,16 +180,55 @@ } else { item.before(draggedQuickWin); } - - try { - await persistQuickWinSort(); - } catch (error) { - console.error("Quick-Win-Sortierung konnte nicht gespeichert werden", error); - } + setQuickWinSortDirty(true); }); }); } + if (quickWinSortSave) { + quickWinSortSave.addEventListener("click", async () => { + if (!quickWinSortDirty) { + return; + } + try { + await persistQuickWinSort(); + setQuickWinSortDirty(false); + } catch (error) { + console.error("Quick-Win-Sortierung konnte nicht gespeichert werden", error); + } + }); + } + + quickWinToggleButtons.forEach((button) => { + button.addEventListener("click", () => { + const targetId = button.dataset.target; + if (!targetId) { + return; + } + + const target = document.getElementById(targetId); + if (!target) { + return; + } + + const willOpen = target.hidden; + + document.querySelectorAll("[data-quick-win-edit]").forEach((editForm) => { + editForm.hidden = true; + }); + quickWinToggleButtons.forEach((toggle) => { + toggle.setAttribute("aria-expanded", "false"); + toggle.textContent = "Bearbeiten"; + }); + + if (willOpen) { + target.hidden = false; + button.setAttribute("aria-expanded", "true"); + button.textContent = "Schließen"; + } + }); + }); + const pushButton = document.getElementById("pushToggle"); const pushHint = document.getElementById("pushHint"); const vapidKey = document.body.dataset.pushKey; diff --git a/app/templates/settings/quick_wins.html b/app/templates/settings/quick_wins.html index 2e89cdd..a5dfdab 100644 --- a/app/templates/settings/quick_wins.html +++ b/app/templates/settings/quick_wins.html @@ -38,15 +38,42 @@

Aktive Quick-Wins bearbeiten

Per Drag & Drop kannst du die Reihenfolge festlegen, die später auch bei den Quick-Win-Chips erscheint.

+
+ +
{% for quick_win in quick_wins %}
-
- +
{{ nav_icon('list') }} Ziehen zum Sortieren
+
+ {{ quick_win.title }} +
+
+ +
+
+ +