From 46ecb1624137545005510f07ab40245475f4ebf3 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Thu, 19 Feb 2026 09:14:53 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20refactorer=20l'interface=20Daily/Weekly?= =?UTF-8?q?/Monthly=20avec=20design=20moderne=20masonry=20layout,=20topbar?= =?UTF-8?q?=20avec=20onglets=20pills=20interactifs=20(daily/weekly/monthly?= =?UTF-8?q?),=20toolbar=20de=20navigation=20avec=20boutons=20prev/next=20e?= =?UTF-8?q?t=20date=20courante,=20grille=20responsive=204=20colonnes=20ave?= =?UTF-8?q?c=20cartes=20hover=20anim=C3=A9es,=20variables=20CSS=20personna?= =?UTF-8?q?lisables,=20support=20complet=20th=C3=A8me=20clair/sombre,=20et?= =?UTF-8?q?=20am=C3=A9lioration=20responsive=20avec=20breakpoints=20optimi?= =?UTF-8?q?s=C3=A9s=20pour=20mobile/tablette?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shaarli-pro/css/style.css | 279 ++++++++++++++++++++++++++++++++++++++ shaarli-pro/daily.html | 59 ++++---- 2 files changed, 308 insertions(+), 30 deletions(-) diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css index ec862aa..0ad2dac 100644 --- a/shaarli-pro/css/style.css +++ b/shaarli-pro/css/style.css @@ -2571,6 +2571,285 @@ select:focus { } } +/* ===== Daily / Weekly / Monthly ===== */ +.daily { + padding: 1.5rem 0 2.5rem; +} + +.daily-topbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1.5rem; + padding: 0.75rem 1rem; + border-radius: 16px; + background: var(--bg-card); + border: 1px solid var(--border); + box-shadow: var(--shadow-sm); +} + +.daily-topbar-left { + display: inline-flex; + align-items: center; + gap: 0.6rem; + font-weight: 600; + color: var(--text-main); +} + +.daily-topbar-tabs { + display: inline-flex; + gap: 0.5rem; + background: var(--bg-body); + padding: 0.35rem; + border-radius: 999px; + border: 1px solid var(--border-light); +} + +.daily-tab { + padding: 0.45rem 0.95rem; + border-radius: 999px; + font-weight: 600; + font-size: 0.85rem; + color: var(--text-secondary); + transition: all 0.2s ease; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.daily-tab.is-active { + background: var(--primary); + color: #ffffff; + box-shadow: 0 8px 18px rgba(59, 130, 246, 0.35); +} + +.daily-tab.is-inactive:hover { + color: var(--text-main); + background: var(--bg-card-hover); +} + +.daily-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1.75rem; + padding: 0.9rem 1.1rem; + border-radius: 16px; + background: linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.02)); + border: 1px solid var(--border); +} + +.daily-toolbar-label { + display: inline-flex; + align-items: center; + gap: 0.6rem; + font-weight: 600; + color: var(--text-main); +} + +.daily-toolbar-nav { + display: flex; + align-items: center; + gap: 0.75rem; + flex: 1; + justify-content: center; + flex-wrap: wrap; +} + +.daily-nav-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.95rem; + border-radius: 10px; + border: 1px solid var(--border); + background: var(--bg-card); + color: var(--text-main); + font-weight: 600; + font-size: 0.85rem; + transition: all 0.2s ease; +} + +.daily-nav-btn:hover { + background: var(--bg-card-hover); + transform: translateY(-1px); +} + +.daily-nav-btn[disabled] { + opacity: 0.5; + cursor: not-allowed; + transform: none; +} + +.daily-current-date { + font-weight: 700; + color: var(--text-main); + padding: 0.35rem 0.9rem; + border-radius: 999px; + background: var(--bg-card); + border: 1px dashed var(--border); + font-size: 0.9rem; +} + +.daily-calendar-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.95rem; + border-radius: 999px; + background: var(--primary-light); + color: var(--primary); + font-weight: 600; + font-size: 0.85rem; +} + +.daily-calendar-btn:hover { + background: rgba(59, 130, 246, 0.2); + color: var(--primary-hover); +} + +.daily-grid { + column-count: 4; + column-gap: 18px; + width: 100%; +} + +.daily-item { + display: inline-block; + width: 100%; + margin-bottom: 18px; + break-inside: avoid; +} + +.daily-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 18px; + overflow: hidden; + box-shadow: var(--shadow-md); + transition: transform 0.25s ease, box-shadow 0.25s ease; +} + +.daily-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.daily-item-header { + display: block; + padding: 1rem 1.1rem 0.75rem; + font-weight: 600; + color: var(--text-main); + font-size: 1rem; + line-height: 1.35; +} + +.daily-item-image { + width: 100%; + height: 160px; + background-size: cover; + background-position: center; +} + +.daily-item-body { + padding: 0.85rem 1.1rem 0.5rem; + color: var(--text-secondary); + font-size: 0.9rem; + line-height: 1.55; +} + +.daily-item-footer { + padding: 0.75rem 1.1rem 1rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + flex-wrap: wrap; + border-top: 1px solid var(--border-light); + font-size: 0.8rem; + color: var(--text-muted); +} + +.daily-item-footer-subtitle { + color: var(--text-secondary); + font-weight: 600; +} + +.daily-item-tags { + color: var(--text-muted); + font-size: 0.78rem; + font-weight: 500; +} + +[data-theme="dark"] .daily-topbar, +[data-theme="dark"] .daily-toolbar { + background: #111827; + border-color: #1f2937; +} + +[data-theme="dark"] .daily-topbar-tabs { + background: #0f172a; + border-color: #1f2937; +} + +[data-theme="dark"] .daily-tab.is-active { + box-shadow: 0 10px 20px rgba(96, 165, 250, 0.35); +} + +[data-theme="dark"] .daily-calendar-btn { + background: rgba(96, 165, 250, 0.15); + color: #cfe1ff; +} + +[data-theme="dark"] .daily-card { + background: #101a2c; + border-color: #1e2a44; + box-shadow: 0 18px 26px rgba(4, 12, 26, 0.45); +} + +[data-theme="dark"] .daily-item-footer { + border-top-color: #1e2a44; +} + +@media (max-width: 1200px) { + .daily-grid { + column-count: 3; + } +} + +@media (max-width: 900px) { + .daily-grid { + column-count: 2; + } + + .daily-toolbar { + flex-direction: column; + align-items: flex-start; + } + + .daily-toolbar-nav { + width: 100%; + justify-content: flex-start; + } +} + +@media (max-width: 600px) { + .daily-grid { + column-count: 1; + } + + .daily-topbar { + flex-direction: column; + align-items: flex-start; + } + + .daily-topbar-tabs { + width: 100%; + justify-content: space-between; + } +} + /* ===== Bulk Bookmark Creation ===== */ .page-add .col-md-6.col-md-offset-3 { width: 100%; diff --git a/shaarli-pro/daily.html b/shaarli-pro/daily.html index 70cec12..645b88e 100644 --- a/shaarli-pro/daily.html +++ b/shaarli-pro/daily.html @@ -7,47 +7,46 @@ {include="page.header"} -
-
-
- {'Daily'|t} - {'Weekly'|t} - {'Monthly'|t} +
+
+
+ + {'Time navigation'|t} +
+
+ {'Daily'|t} + {'Weekly'|t} + {'Monthly'|t}
-
- - -
{loop="$plugin_start_zone"} {$value} {/loop}
-
-

{$localizedType} Shaarli

-

{function="t('All links of one :type in a single page.', '', 1, 'shaarli', [':type' => t($type)])"}

-
-
-
- - {function="t('Previous :type', '', 1, 'shaarli', [':type' => t($type)], true)"} - -
-
- - {function="t('Next :type', '', 1, 'shaarli', [':type' => t($type)], true)"} - -
-
- -
+
+
+ + {'Time navigation'|t}
+
+ + + {function="t('Previous :type', '', 1, 'shaarli', [':type' => t($type)], true)"} + + {$dayDesc} + + {function="t('Next :type', '', 1, 'shaarli', [':type' => t($type)], true)"} + + +
+ + + {'Calendar'|t} +
-

{$dayDesc}

-
{loop="$daily_about_plugin"} {$value}