From 8cbec8d6014defbced3584b30e52c36aa180c8ad Mon Sep 17 00:00:00 2001 From: th Date: Sun, 19 Apr 2026 12:34:50 +0200 Subject: [PATCH] =?UTF-8?q?v2.0.13=20=E2=80=94=20edge-to-edge=20fullscreen?= =?UTF-8?q?=20overlays,=20rounded-cards=20badge=20variant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Overlays: drop the 24/40/54px inset frame on tasks, calendar, gallery, search, detail, edit modal, bookmarks, email, gitea and oumta-dashboard so they fill the viewport like the support overlay does. Removed the shared border-radius + overflow:hidden rule on their inner containers (only settings + dialog still use it) so the card's top colour bar isn't clipped. - Done badge: the corner-triangle variant gets chopped by rounded card borders. applyDesign now toggles body.rounded-cards whenever --ui-radius-card > 0, and the CSS swaps the triangle for a 18px circle pill with the check centred. Triangle stays for square cards. - Support plugin: "Close ticket" button is a regular labelled button now (was a 30×30 icon ghost that clipped the text). Empty hero state ("select a ticket") matches the board's empty style — centred in the column with a pixel-font blink-cursor label. Co-Authored-By: Claude Opus 4.7 (1M context) --- config.php | 2 +- electron/package.json | 2 +- public/css/style.css | 30 ++++++++++++------- public/index.php | 17 +++++++---- public/plugins/bookmarks/bookmarks.css | 5 +--- public/plugins/email/email.html | 2 +- public/plugins/gitea/gitea.html | 2 +- .../oumta-dashboard/oumta-dashboard.html | 2 +- public/plugins/support/support.css | 28 +++++++++++++++-- public/plugins/support/support.html | 2 +- public/plugins/support/support.js | 4 +-- 11 files changed, 66 insertions(+), 30 deletions(-) diff --git a/config.php b/config.php index 3ff8a15..3dbe3b6 100644 --- a/config.php +++ b/config.php @@ -1,7 +1,7 @@ div, -#detail > div, +/* Modal containers (the inner box of each overlay). Only for floating / + * framed modals — the fullscreen overlays (modal, detail, search, tasks, + * calendar, gallery, and the support / plugin overlays) fill the whole + * viewport now and don't want the rounded-corner + overflow:hidden + * combo, which would clip the top color bar and soften the edge-to-edge + * look. */ #settings-overlay > div, -#search > div, -#tasks > div, -#calendar > div, -#gallery > div, -#dialog > div, -#detail > div, -#modal > div { +#dialog > div { border-radius: var(--ui-radius-modal); box-shadow: var(--ui-shadow-modal); overflow: hidden; @@ -402,6 +399,19 @@ body.settings-peeking #settings-overlay > div { pointer-events: auto; } .due-pill { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 8px; font-size: 9px; line-height: 16px; color: var(--t-bg); font-family: var(--t-font-pixel); } .card-done-badge { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 24px 24px; border-color: transparent transparent #4ade80 transparent; z-index: 1; } .card-done-badge i { position: absolute; bottom: -22px; right: 1px; font-size: 10px; color: #000; } +/* Rounded-cards variant: the corner triangle gets clipped by the + * rounded border, so toggle to a circle pill that sits comfortably + * inside any radius. JS adds `rounded-cards` on body whenever + * --ui-radius-card is > 0. */ +body.rounded-cards .card-done-badge { + width: 18px; height: 18px; + bottom: 6px; right: 6px; + border: none; + border-radius: 50%; + background: #4ade80; + display: flex; align-items: center; justify-content: center; +} +body.rounded-cards .card-done-badge i { position: static; bottom: auto; right: auto; font-size: 11px; color: #000; font-weight: bold; } .board-card:has(.card-bar-pulse) .card-bar-pulse ~ * .text-t-danger { animation: pulse-glow 2s ease-in-out infinite; } .card-spinner { animation: spin 0.8s linear infinite; display: inline-block; } diff --git a/public/index.php b/public/index.php index 66cbc23..93bac82 100644 --- a/public/index.php +++ b/public/index.php @@ -1516,6 +1516,11 @@ if (str_starts_with($route, '/api/')) { if (d.animSpeed === 'off') document.body.classList.add('anim-off'); if (d.animSpeed === 'fast') document.body.classList.add('anim-fast'); if (d.animSpeed === 'slow') document.body.classList.add('anim-slow'); + // Rounded-card badge variant: the default "done" corner triangle + // gets clipped by a rounded border, so when the user opts into + // rounded cards we swap it for a circle pill in the BR corner + // (see .rounded-cards .card-done-badge in style.css). + document.body.classList.toggle('rounded-cards', (Number(d.radiusCard) || 0) > 0); }; window.loadDesign = function() { let saved = {}; @@ -2288,7 +2293,7 @@ if (str_starts_with($route, '/api/')) {