feat: refactorer l'interface Daily/Weekly/Monthly avec design moderne masonry layout, topbar avec onglets pills interactifs (daily/weekly/monthly), toolbar de navigation avec boutons prev/next et date courante, grille responsive 4 colonnes avec cartes hover animées, variables CSS personnalisables, support complet thème clair/sombre, et amélioration responsive avec breakpoints optimisés pour mobile/tablette

This commit is contained in:
2026-02-19 09:14:53 -05:00
parent ec8f08e003
commit 46ecb16241
2 changed files with 308 additions and 30 deletions
+29 -30
View File
@@ -7,47 +7,46 @@
<body class="dark-toolbar">
{include="page.header"}
<div class="subheader is-dark" style="margin-bottom: 1.5rem;">
<div class="container text-center">
<div class="btn-group" role="group">
<a class="btn {if="array_key_exists('day', $_GET) || (!array_key_exists('week', $_GET) && !array_key_exists('month', $_GET))"}btn-primary{else}btn-secondary{/if}" href="{$base_path}/daily?day" title="{'Daily'|t}">{'Daily'|t}</a>
<a class="btn {if="array_key_exists('week', $_GET)"}btn-primary{else}btn-secondary{/if}" href="{$base_path}/daily?week" title="{'Weekly'|t}">{'Weekly'|t}</a>
<a class="btn {if="array_key_exists('month', $_GET)"}btn-primary{else}btn-secondary{/if}" href="{$base_path}/daily?month" title="{'Monthly'|t}">{'Monthly'|t}</a>
<div class="daily">
<div class="daily-topbar">
<div class="daily-topbar-left">
<i class="mdi mdi-compass-outline" aria-hidden="true"></i>
<span>{'Time navigation'|t}</span>
</div>
<div class="daily-topbar-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>
</div>
</div>
</div>
<div class="daily">
<div id="plugin_zone_start_picwall" class="plugin_zone">
{loop="$plugin_start_zone"}
{$value}
{/loop}
</div>
<div class="daily-header">
<h1>{$localizedType} Shaarli</h1>
<p class="daily-header-subtitle">{function="t('All links of one :type in a single page.', '', 1, 'shaarli', [':type' => t($type)])"}</p>
<div class="container">
<div class="row">
<div class="col-xs-6">
<a {if="$previousday"}href="{$base_path}/daily?{$type}={$previousday}"{else}href="#"{/if} class="btn btn-secondary" {if="!$previousday"}disabled{/if}>
<i class="mdi mdi-arrow-left"></i> {function="t('Previous :type', '', 1, 'shaarli', [':type' => t($type)], true)"}
</a>
</div>
<div class="col-xs-6 text-right">
<a {if="$nextday"}href="{$base_path}/daily?{$type}={$nextday}"{else}href="#"{/if} class="btn btn-secondary" {if="!$nextday"}disabled{/if}>
{function="t('Next :type', '', 1, 'shaarli', [':type' => t($type)], true)"} <i class="mdi mdi-arrow-right"></i>
</a>
</div>
</div>
<hr class="darker">
<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>
<h2 class="daily-title">{$dayDesc}</h2>
<div id="plugin_zone_about_daily" class="plugin_zone">
{loop="$daily_about_plugin"}
{$value}