Projets/Shaarli_bm_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactorer l'interface Daily/Weekly/Monthly avec système de navigation unifié, calendrier interactif React-style avec sélection de plage, sidebar de raccourcis temporels, grille de jours avec états hover/in-range/start/end, variables CSS personnalisables, support complet thème clair/sombre, et amélioration responsive avec breakpoints optimisés pour mobile/tablette

Browse Source
This commit is contained in:
bruno
2026-02-19 10:38:40 -05:00
parent 46ecb16241
commit 3e545780e1
3 changed files with 662 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shaarli-pro/daily.html
+59 -26
View File
@@ -8,12 +8,67 @@
{include="page.header"}
<div class="daily">
<div class="daily-topbar">
<div class="daily-topbar-left">
<i class="mdi mdi-compass-outline" aria-hidden="true"></i>
<div class="daily-nav-unified">
<div class="daily-nav-left">
<i class="mdi mdi-clock-outline" aria-hidden="true"></i>
<span>{'Time navigation'|t}</span>
</div>
<div class="daily-topbar-tabs" role="group" aria-label="{'Daily / Weekly / Monthly'|t}">
<div class="daily-nav-center">
<a {if="$previousday"}href="{$base_path}/daily?{$type}={$previousday}"{else}href="#"{/if} class="daily-nav-btn" {if="!$previousday"}disabled{/if}>
<i class="mdi mdi-arrow-left"></i>
{function="t('Previous :type', '', 1, 'shaarli', [':type' => t($type)], true)"}
</a>
<button type="button" class="daily-date-pill" id="daily-date-display">{$dayDesc}</button>
<a {if="$nextday"}href="{$base_path}/daily?{$type}={$nextday}"{else}href="#"{/if} class="daily-nav-btn" {if="!$nextday"}disabled{/if}>
{function="t('Next :type', '', 1, 'shaarli', [':type' => t($type)], true)"}
<i class="mdi mdi-arrow-right"></i>
</a>
<div class="daily-calendar-wrap">
<button type="button" class="daily-calendar-btn" id="daily-calendar-toggle" aria-haspopup="dialog" aria-expanded="false">
<i class="mdi mdi-calendar" aria-hidden="true"></i>
<span>{'Calendar'|t}</span>
</button>
<div class="daily-calendar-panel" id="daily-calendar-panel" aria-hidden="true">
<div class="daily-calendar-shell">
<div class="daily-calendar-sidebar">
<span class="daily-calendar-title">Raccourcis</span>
<button type="button" class="daily-calendar-shortcut" data-range="0">Aujourd'hui</button>
<button type="button" class="daily-calendar-shortcut" data-range="1">Hier</button>
<button type="button" class="daily-calendar-shortcut" data-range="7">7 derniers jours</button>
<button type="button" class="daily-calendar-shortcut" data-range="30">30 derniers jours</button>
<div class="daily-calendar-summary">
<div>
<span>Du</span>
<strong id="daily-calendar-start">-</strong>
</div>
<div>
<span>Au</span>
<strong id="daily-calendar-end">-</strong>
</div>
</div>
</div>
<div class="daily-calendar-main">
<div class="daily-calendar-header">
<button type="button" class="daily-calendar-nav" id="daily-calendar-prev" aria-label="Mois précédent">
<i class="mdi mdi-chevron-left"></i>
</button>
<div class="daily-calendar-month" id="daily-calendar-month"></div>
<button type="button" class="daily-calendar-nav" id="daily-calendar-next" aria-label="Mois suivant">
<i class="mdi mdi-chevron-right"></i>
</button>
</div>
<div class="daily-calendar-weekdays" id="daily-calendar-weekdays"></div>
<div class="daily-calendar-grid" id="daily-calendar-grid"></div>
<div class="daily-calendar-footer">
<button type="button" class="daily-calendar-cancel" id="daily-calendar-cancel">Annuler</button>
<button type="button" class="daily-calendar-apply" id="daily-calendar-apply">Appliquer</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="daily-nav-tabs" role="group" aria-label="{'Daily / Weekly / Monthly'|t}">
<a class="daily-tab {if="array_key_exists('day', $_GET) || (!array_key_exists('week', $_GET) && !array_key_exists('month', $_GET))"}is-active{else}is-inactive{/if}" href="{$base_path}/daily?day" title="{'Daily'|t}">{'Daily'|t}</a>
<a class="daily-tab {if="array_key_exists('week', $_GET)"}is-active{else}is-inactive{/if}" href="{$base_path}/daily?week" title="{'Weekly'|t}">{'Weekly'|t}</a>
<a class="daily-tab {if="array_key_exists('month', $_GET)"}is-active{else}is-inactive{/if}" href="{$base_path}/daily?month" title="{'Monthly'|t}">{'Monthly'|t}</a>
@@ -25,28 +80,6 @@
{/loop}
</div>
<div class="daily-toolbar">
<div class="daily-toolbar-label">
<i class="mdi mdi-clock-outline" aria-hidden="true"></i>
<span>{'Time navigation'|t}</span>
</div>
<div class="daily-toolbar-nav">
<a {if="$previousday"}href="{$base_path}/daily?{$type}={$previousday}"{else}href="#"{/if} class="daily-nav-btn" {if="!$previousday"}disabled{/if}>
<i class="mdi mdi-arrow-left"></i>
{function="t('Previous :type', '', 1, 'shaarli', [':type' => t($type)], true)"}
</a>
<span class="daily-current-date">{$dayDesc}</span>
<a {if="$nextday"}href="{$base_path}/daily?{$type}={$nextday}"{else}href="#"{/if} class="daily-nav-btn" {if="!$nextday"}disabled{/if}>
{function="t('Next :type', '', 1, 'shaarli', [':type' => t($type)], true)"}
<i class="mdi mdi-arrow-right"></i>
</a>
</div>
<a class="daily-calendar-btn" href="{$base_path}/daily" title="{'Calendar'|t}">
<i class="mdi mdi-calendar" aria-hidden="true"></i>
<span>{'Calendar'|t}</span>
</a>
</div>
<div id="plugin_zone_about_daily" class="plugin_zone">
{loop="$daily_about_plugin"}
{$value}