feat: améliorer l'accessibilité et les performances avec support pour prefers-reduced-motion, prefers-contrast, focus-visible, ajout de preconnect pour les domaines externes, versioning des assets CSS/JS, et correction des chemins de ressources avec ltrim
This commit is contained in:
+106
-95
@@ -1,4 +1,5 @@
|
||||
<!--
|
||||
Bookmarklet detection logic
|
||||
{$isCalledFromBookmarklet=isset($_GET['source']) && $_GET['source'] == 'bookmarklet'}
|
||||
-->
|
||||
{if="$isCalledFromBookmarklet"}
|
||||
@@ -6,57 +7,62 @@
|
||||
{else}
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<aside class="sidebar" id="sidebar" aria-label="Navigation principale">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo" aria-hidden="true">
|
||||
<i class="mdi mdi-bookmark-multiple"></i>
|
||||
</div>
|
||||
<a href="{$titleLink}" class="sidebar-brand">{$shaarlititle}</a>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<nav class="sidebar-nav" aria-label="Menu latéral">
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-title">Navigation</div>
|
||||
<a href="{$base_path}/" class="sidebar-link{if="$pageName=='linklist' && empty($search_tags)"} active{/if}">
|
||||
<i class="mdi mdi-bookmark-multiple-outline"></i>
|
||||
<span>All Bookmarks</span>
|
||||
<a href="{$base_path}/" class="sidebar-link{if="$pageName=='linklist' && empty($search_tags)"} active{/if}"
|
||||
aria-label="Tous les bookmarks">
|
||||
<i class="mdi mdi-bookmark-multiple-outline" aria-hidden="true"></i>
|
||||
<span>Tous les bookmarks</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=shaarli-pin" class="sidebar-link{if="isset($search_tags) && $search_tags == 'shaarli-pin'"} active{/if}">
|
||||
<i class="mdi mdi-pin-outline"></i>
|
||||
<a href="{$base_path}/?searchtags=shaarli-pin" class="sidebar-link{if="isset($search_tags)&&$search_tags=='shaarli-pin'"} active{/if}" aria-label="Épinglés">
|
||||
<i class="mdi mdi-pin-outline" aria-hidden="true"></i>
|
||||
<span>Épinglés</span>
|
||||
</a>
|
||||
<a href="{$base_path}/tags/cloud" class="sidebar-link{if="$pageName=='tagcloud'"} active{/if}">
|
||||
<i class="mdi mdi-tag-multiple-outline"></i>
|
||||
<span>Tag Cloud</span>
|
||||
<a href="{$base_path}/tags/cloud" class="sidebar-link{if="$pageName=='tagcloud'"} active{/if}"
|
||||
aria-label="Nuage de tags">
|
||||
<i class="mdi mdi-tag-multiple-outline" aria-hidden="true"></i>
|
||||
<span>Nuage de tags</span>
|
||||
</a>
|
||||
<a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&')"}" class="sidebar-link{if="$pageName=='picwall'"} active{/if}">
|
||||
<i class="mdi mdi-image-multiple-outline"></i>
|
||||
<span>Picture Wall</span>
|
||||
<a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&' )"}" class="sidebar-link{if="$pageName=='picwall'"} active{/if}" aria-label="Mur d'images">
|
||||
<i class="mdi mdi-image-multiple-outline" aria-hidden="true"></i>
|
||||
<span>Mur d'images</span>
|
||||
</a>
|
||||
<a href="{$base_path}/daily" class="sidebar-link{if="$pageName=='daily'"} active{/if}">
|
||||
<i class="mdi mdi-calendar-today"></i>
|
||||
<span>Daily</span>
|
||||
<a href="{$base_path}/daily" class="sidebar-link{if="$pageName=='daily'"} active{/if}"
|
||||
aria-label="Vue quotidienne">
|
||||
<i class="mdi mdi-calendar-today" aria-hidden="true"></i>
|
||||
<span>Quotidien</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=todo" class="sidebar-link{if="isset($search_tags) && $search_tags == 'todo'"} active{/if}">
|
||||
<i class="mdi mdi-check-circle-outline"></i>
|
||||
<span>Mes Tâches</span>
|
||||
<a href="{$base_path}/?searchtags=todo" class="sidebar-link{if="isset($search_tags)&&$search_tags=='todo'"} active{/if}" aria-label="Mes tâches">
|
||||
<i class="mdi mdi-check-circle-outline" aria-hidden="true"></i>
|
||||
<span>Mes tâches</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=note" class="sidebar-link{if="isset($search_tags) && $search_tags == 'note'"} active{/if}">
|
||||
<i class="mdi mdi-note-text-outline"></i>
|
||||
<a href="{$base_path}/?searchtags=note" class="sidebar-link{if="isset($search_tags)&&$search_tags=='note'"} active{/if}" aria-label="Notes">
|
||||
<i class="mdi mdi-note-text-outline" aria-hidden="true"></i>
|
||||
<span>Notes</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{if="$is_logged_in"}
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-title">Admin</div>
|
||||
<a href="{$base_path}/admin/tools" class="sidebar-link{if="$pageName == 'tools'"} active{/if}">
|
||||
<i class="mdi mdi-tools"></i>
|
||||
<span>Tools</span>
|
||||
<div class="sidebar-section-title">Administration</div>
|
||||
<a href="{$base_path}/admin/tools" class="sidebar-link{if="$pageName=='tools'"} active{/if}"
|
||||
aria-label="Outils">
|
||||
<i class="mdi mdi-tools" aria-hidden="true"></i>
|
||||
<span>Outils</span>
|
||||
</a>
|
||||
<a href="{$base_path}/admin/configure" class="sidebar-link{if="$pageName == 'configure'"} active{/if}">
|
||||
<i class="mdi mdi-cog-outline"></i>
|
||||
<span>Settings</span>
|
||||
<a href="{$base_path}/admin/configure" class="sidebar-link{if="$pageName=='configure'"} active{/if}"
|
||||
aria-label="Paramètres">
|
||||
<i class="mdi mdi-cog-outline" aria-hidden="true"></i>
|
||||
<span>Paramètres</span>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -64,19 +70,19 @@
|
||||
|
||||
<div class="sidebar-footer">
|
||||
{if="$is_logged_in"}
|
||||
<a href="{$base_path}/admin/add-shaare" class="sidebar-add-btn">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
<span>New Bookmark</span>
|
||||
<a href="{$base_path}/admin/add-shaare" class="sidebar-add-btn" aria-label="Nouveau bookmark">
|
||||
<i class="mdi mdi-plus" aria-hidden="true"></i>
|
||||
<span>Nouveau bookmark</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="theme-toggle-wrapper">
|
||||
<span class="theme-toggle-label">
|
||||
<i class="mdi mdi-weather-sunny" id="theme-icon-light"></i>
|
||||
<span>Light Mode</span>
|
||||
<i class="mdi mdi-weather-sunny" id="theme-icon-light" aria-hidden="true"></i>
|
||||
<span>Mode clair</span>
|
||||
</span>
|
||||
<label class="theme-switch">
|
||||
<input type="checkbox" id="theme-toggle-checkbox">
|
||||
<label class="theme-switch" aria-label="Basculer le mode sombre">
|
||||
<input type="checkbox" id="theme-toggle-checkbox" aria-label="Activer/désactiver le mode sombre">
|
||||
<span class="theme-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -84,7 +90,7 @@
|
||||
</aside>
|
||||
|
||||
<!-- Sidebar Overlay for Mobile -->
|
||||
<div class="sidebar-overlay" id="sidebar-overlay"></div>
|
||||
<div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
|
||||
|
||||
<!-- Main Content Wrapper -->
|
||||
<div class="main-content">
|
||||
@@ -92,42 +98,45 @@
|
||||
<header class="header-main">
|
||||
<div class="header-inner">
|
||||
<div class="header-left">
|
||||
<button class="mobile-menu-btn" id="mobile-menu-btn" title="Toggle Menu">
|
||||
<i class="mdi mdi-menu"></i>
|
||||
<button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Ouvrir le menu" aria-expanded="false"
|
||||
aria-controls="sidebar">
|
||||
<i class="mdi mdi-menu" aria-hidden="true"></i>
|
||||
</button>
|
||||
<a href="{$titleLink}" class="header-brand">{$shaarlititle}</a>
|
||||
</div>
|
||||
|
||||
<!-- Main Navigation -->
|
||||
<nav class="header-nav">
|
||||
<a href="{$base_path}/" class="header-nav-link{if=" $pageName=='linklist'"} active{/if}">
|
||||
<i class="mdi mdi-home-outline"></i>
|
||||
<span>HOME</span>
|
||||
<nav class="header-nav" aria-label="Navigation principale">
|
||||
<a href="{$base_path}/" class="header-nav-link{if="$pageName=='linklist'"} active{/if}"
|
||||
aria-label="Accueil">
|
||||
<i class="mdi mdi-home-outline" aria-hidden="true"></i>
|
||||
<span>ACCUEIL</span>
|
||||
</a>
|
||||
<a href="{$base_path}/tags/cloud" class="header-nav-link{if=" $pageName=='tagcloud'"} active{/if}">
|
||||
<i class="mdi mdi-tag-multiple"></i>
|
||||
<span>TAG CLOUD</span>
|
||||
<a href="{$base_path}/tags/cloud" class="header-nav-link{if="$pageName=='tagcloud'"} active{/if}"
|
||||
aria-label="Nuage de tags">
|
||||
<i class="mdi mdi-tag-multiple" aria-hidden="true"></i>
|
||||
<span>TAGS</span>
|
||||
</a>
|
||||
<a href="{$base_path}/picture-wall?{function=" ltrim($searchcrits, '&' )"}" class="header-nav-link{if="
|
||||
$pageName=='picwall'"} active{/if}">
|
||||
<i class="mdi mdi-image-multiple"></i>
|
||||
<span>PICTURE WALL</span>
|
||||
<a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&' )"}" class="header-nav-link{if="$pageName=='picwall'"} active{/if}" aria-label="Mur d'images">
|
||||
<i class="mdi mdi-image-multiple" aria-hidden="true"></i>
|
||||
<span>IMAGES</span>
|
||||
</a>
|
||||
<a href="{$base_path}/daily" class="header-nav-link{if=" $pageName=='daily'"} active{/if}">
|
||||
<i class="mdi mdi-calendar"></i>
|
||||
<span>DAILY</span>
|
||||
<a href="{$base_path}/daily" class="header-nav-link{if="$pageName=='daily'"} active{/if}"
|
||||
aria-label="Vue quotidienne">
|
||||
<i class="mdi mdi-calendar" aria-hidden="true"></i>
|
||||
<span>QUOTIDIEN</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=todo" class="header-nav-link{if="isset($search_tags) && $search_tags == 'todo'"} active{/if}">
|
||||
<i class="mdi mdi-check-circle-outline"></i>
|
||||
<a href="{$base_path}/?searchtags=todo" class="header-nav-link{if="isset($search_tags)&&$search_tags=='todo'"} active{/if}" aria-label="Mes tâches">
|
||||
<i class="mdi mdi-check-circle-outline" aria-hidden="true"></i>
|
||||
<span>TÂCHES</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=note" class="header-nav-link{if="isset($search_tags) && $search_tags == 'note'"} active{/if}">
|
||||
<i class="mdi mdi-note-text-outline"></i>
|
||||
<a href="{$base_path}/?searchtags=note" class="header-nav-link{if="isset($search_tags)&&$search_tags=='note'"} active{/if}" aria-label="Notes">
|
||||
<i class="mdi mdi-note-text-outline" aria-hidden="true"></i>
|
||||
<span>NOTES</span>
|
||||
</a>
|
||||
<button class="header-nav-link" id="search-toggle-btn" title="Search (Press S)">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
<span>SEARCH</span>
|
||||
<button class="header-nav-link" id="search-toggle-btn" aria-label="Rechercher (raccourci S)">
|
||||
<i class="mdi mdi-magnify" aria-hidden="true"></i>
|
||||
<span>RECHERCHE</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
@@ -135,53 +144,55 @@
|
||||
<div class="header-actions">
|
||||
<!-- Filter Button -->
|
||||
<div class="filter-dropdown" id="filter-dropdown">
|
||||
<button class="header-action-btn" id="filter-toggle-btn" title="Filters">
|
||||
<i class="mdi mdi-filter-variant"></i>
|
||||
<button class="header-action-btn" id="filter-toggle-btn" aria-label="Filtres" aria-expanded="false"
|
||||
aria-controls="filter-panel">
|
||||
<i class="mdi mdi-filter-variant" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<!-- Filter Panel -->
|
||||
<div class="filter-panel" id="filter-panel">
|
||||
<div class="filter-panel" id="filter-panel" role="dialog" aria-label="Panneau de filtres"
|
||||
aria-hidden="true">
|
||||
<div class="filter-header">
|
||||
<span class="filter-title">Filters</span>
|
||||
<button class="filter-close" id="filter-close-btn">
|
||||
<i class="mdi mdi-close"></i>
|
||||
<span class="filter-title">Filtres</span>
|
||||
<button class="filter-close" id="filter-close-btn" aria-label="Fermer les filtres">
|
||||
<i class="mdi mdi-close" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-body">
|
||||
<div class="filter-section">
|
||||
<div class="filter-section-title">Links Per Page</div>
|
||||
<a href="{$base_path}/links-per-page?nb=20" class="filter-option">20 links</a>
|
||||
<a href="{$base_path}/links-per-page?nb=50" class="filter-option">50 links</a>
|
||||
<a href="{$base_path}/links-per-page?nb=100" class="filter-option">100 links</a>
|
||||
<div class="filter-section-title">Liens par page</div>
|
||||
<a href="{$base_path}/links-per-page?nb=20" class="filter-option">20 liens</a>
|
||||
<a href="{$base_path}/links-per-page?nb=50" class="filter-option">50 liens</a>
|
||||
<a href="{$base_path}/links-per-page?nb=100" class="filter-option">100 liens</a>
|
||||
</div>
|
||||
<div class="filter-section">
|
||||
<div class="filter-section-title">Custom value</div>
|
||||
<div class="filter-section-title">Valeur personnalisée</div>
|
||||
<form method="GET" action="{$base_path}/">
|
||||
<input type="number" name="nb" class="filter-input" placeholder="20" min="1"
|
||||
max="500">
|
||||
max="500" aria-label="Nombre de liens par page">
|
||||
</form>
|
||||
</div>
|
||||
{if="$is_logged_in"}
|
||||
<div class="filter-section">
|
||||
<div class="filter-section-title">Filters</div>
|
||||
<div class="filter-section-title">Filtres de visibilité</div>
|
||||
<div class="filter-toggle-row">
|
||||
<span class="filter-toggle-label">Only private links</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="filter-private">
|
||||
<span class="filter-toggle-label">Liens privés uniquement</span>
|
||||
<label class="toggle-switch" aria-label="Filtrer les liens privés">
|
||||
<input type="checkbox" id="filter-private" aria-label="Liens privés uniquement">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="filter-toggle-row">
|
||||
<span class="filter-toggle-label">Only public links</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="filter-public">
|
||||
<span class="filter-toggle-label">Liens publics uniquement</span>
|
||||
<label class="toggle-switch" aria-label="Filtrer les liens publics">
|
||||
<input type="checkbox" id="filter-public" aria-label="Liens publics uniquement">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="filter-toggle-row">
|
||||
<span class="filter-toggle-label">Untagged links</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="filter-untagged">
|
||||
<span class="filter-toggle-label">Liens sans tag</span>
|
||||
<label class="toggle-switch" aria-label="Filtrer les liens sans tag">
|
||||
<input type="checkbox" id="filter-untagged" aria-label="Liens sans tag">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -193,14 +204,15 @@
|
||||
|
||||
{if="$is_logged_in"}
|
||||
<!-- Multi-select Toggle -->
|
||||
<button class="header-action-btn" id="select-mode-btn" title="Multi-select">
|
||||
<i class="mdi mdi-checkbox-multiple-marked-outline"></i>
|
||||
<button class="header-action-btn" id="select-mode-btn" aria-label="Sélection multiple"
|
||||
aria-pressed="false">
|
||||
<i class="mdi mdi-checkbox-multiple-marked-outline" aria-hidden="true"></i>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- RSS Feed -->
|
||||
<a href="{$base_path}/feed/rss" class="header-action-btn" title="RSS Feed">
|
||||
<i class="mdi mdi-rss"></i>
|
||||
<a href="{$base_path}/feed/rss" class="header-action-btn" aria-label="Flux RSS">
|
||||
<i class="mdi mdi-rss" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
<!-- Plugins Support -->
|
||||
@@ -211,15 +223,15 @@
|
||||
{/if}
|
||||
|
||||
{if="$is_logged_in"}
|
||||
<a href="{$base_path}/admin/tools" class="header-action-btn" title="Tools">
|
||||
<i class="mdi mdi-cog-outline"></i>
|
||||
<a href="{$base_path}/admin/tools" class="header-action-btn" aria-label="Outils">
|
||||
<i class="mdi mdi-cog-outline" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a href="{$base_path}/admin/logout" class="header-action-btn" title="Logout">
|
||||
<i class="mdi mdi-logout-variant"></i>
|
||||
<a href="{$base_path}/admin/logout" class="header-action-btn" aria-label="Déconnexion">
|
||||
<i class="mdi mdi-logout-variant" aria-hidden="true"></i>
|
||||
</a>
|
||||
{else}
|
||||
<a href="{$base_path}/login" class="header-action-btn" title="Login">
|
||||
<i class="mdi mdi-login-variant"></i>
|
||||
<a href="{$base_path}/login" class="header-action-btn" aria-label="Connexion">
|
||||
<i class="mdi mdi-login-variant" aria-hidden="true"></i>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -232,8 +244,7 @@
|
||||
<form method="GET" action="{$base_path}/" id="search-form">
|
||||
<div class="search-modal-header">
|
||||
<input type="text" name="searchterm" class="search-modal-input" id="search-modal-input"
|
||||
placeholder="Type to search..." autocomplete="off" value="{if="
|
||||
isset($search_term)"}{$search_term}{/if}">
|
||||
placeholder="Type to search..." autocomplete="off" value="{if="isset($search_term)"}{$search_term}{/if}">
|
||||
<div class="search-modal-actions">
|
||||
<button type="button" class="search-pill-btn search-pill-tags" id="search-tags-btn">
|
||||
<i class="mdi mdi-tag-outline"></i>
|
||||
@@ -280,4 +291,4 @@
|
||||
<div class="alert alert-success">{$value}</div>
|
||||
{/loop}
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user