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:
+29
-30
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user