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:
+140
-106
@@ -1,114 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html{if="$language !== 'auto'"} lang="{$language}"{/if}>
|
||||
<head>
|
||||
{$pageName="linklist"}
|
||||
{include="includes"}
|
||||
</head>
|
||||
<body>
|
||||
{include="page.header"}
|
||||
<div id="linklist">
|
||||
{loop="$plugin_start_zone"}
|
||||
{$value}
|
||||
{/loop}
|
||||
<!-- {* ----- barre outils ----- *} -->
|
||||
<div class="content-toolbar">
|
||||
<div class="toolbar-left">{include="linklist.paging"}</div>
|
||||
<div class="toolbar-right">
|
||||
<div class="view-toggle">
|
||||
<button class="view-toggle-btn active" id="view-grid-btn" title="Grid"><i class="mdi mdi-view-grid"></i></button>
|
||||
<button class="view-toggle-btn" id="view-list-btn" title="List"><i class="mdi mdi-view-list"></i></button>
|
||||
<button class="view-toggle-btn" id="view-compact-btn" title="Compact"><i class="mdi mdi-view-headline"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
|
||||
|
||||
<!-- {* ----- résultats de recherche par tags ----- *} -->
|
||||
{if="!empty($search_tags)"}
|
||||
<div class="search-results-header">
|
||||
<span class="search-count">{$result_count} results tagged</span>
|
||||
{$exploded_tags=tags_str2array($search_tags, $tags_separator)}
|
||||
{loop="$exploded_tags"}
|
||||
<span class="search-tag-chip">{$value} <a href="{$base_path}/remove-tag/{function="urlencode($value)"}" class="search-tag-close" title="Remove tag"><i class="mdi mdi-close"></i></a></span>
|
||||
{/loop}
|
||||
</div>
|
||||
{/if}
|
||||
<head>
|
||||
{$pageName="linklist"}
|
||||
{include="includes"}
|
||||
</head>
|
||||
|
||||
<!-- {* ----- aucun lien ----- *} -->
|
||||
{if="count($links)==0"}
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon"><i class="mdi mdi-bookmark-off-outline"></i></div>
|
||||
<h2 class="empty-state-title">No bookmarks found</h2>
|
||||
<p class="empty-state-text">{if="!empty($search_term)"}No results for: <strong>{$search_term}</strong>{else}Start adding bookmarks to see them here.{/if}</p>
|
||||
</div>
|
||||
{else}
|
||||
<!-- {* ----- au moins un lien ----- *} -->
|
||||
<div class="links-list view-grid" id="links-list">
|
||||
{loop="$links"}
|
||||
<div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
|
||||
{if="$is_logged_in"}
|
||||
<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>
|
||||
{/if}
|
||||
{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%;height:100%;object-fit:cover;" onerror="this.parentElement.style.display='none'"></div>{/if}
|
||||
<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
|
||||
<div class="link-content">
|
||||
<div class="link-header">
|
||||
<a href="{$value.real_url}" class="link-title"{if="strpos($value.url, $value.shorturl) !== false"} title="Note"{/if}>
|
||||
{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin" style="color:var(--primary);"></i>{/if}{$value.title_html}
|
||||
</a>
|
||||
<span class="link-url">{$value.url}</span>
|
||||
<div class="link-meta">
|
||||
<span class="link-date">{$value.created|format_date}</span>
|
||||
<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<body>
|
||||
{include="page.header"}
|
||||
<div id="linklist">
|
||||
{loop="$plugin_start_zone"}
|
||||
{$value}
|
||||
{/loop}
|
||||
<!-- {* ----- toolbar ----- *} -->
|
||||
<div class="content-toolbar">
|
||||
<div class="toolbar-left">{include="linklist.paging"}</div>
|
||||
<div class="toolbar-right">
|
||||
<div class="view-toggle" role="group" aria-label="Changer de vue">
|
||||
<button class="view-toggle-btn active" id="view-grid-btn" aria-label="Vue grille"
|
||||
aria-pressed="true"><i class="mdi mdi-view-grid" aria-hidden="true"></i></button>
|
||||
<button class="view-toggle-btn" id="view-list-btn" aria-label="Vue liste"
|
||||
aria-pressed="false"><i class="mdi mdi-view-list" aria-hidden="true"></i></button>
|
||||
<button class="view-toggle-btn" id="view-compact-btn" aria-label="Vue compacte"
|
||||
aria-pressed="false"><i class="mdi mdi-view-headline"
|
||||
aria-hidden="true"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
|
||||
<div class="link-footer">
|
||||
<div class="link-tag-list">
|
||||
{loop="$value.taglist"}<span class="link-tag"><a href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}
|
||||
</div>
|
||||
<div class="link-actions">
|
||||
{if="$is_logged_in"}
|
||||
<a href="{$base_path}/admin/shaare/{$value.id}" title="Edit"><i class="mdi mdi-pencil"></i></a>
|
||||
<a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}" title="Pin/Unpin"><i class="mdi mdi-pin"></i></a>
|
||||
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
|
||||
{/if}
|
||||
<!-- bouton plein écran (dans les 3 vues) -->
|
||||
<a href="#" class="view-desc-btn" data-id="{$value.id}" title="View Description"><i class="mdi mdi-fullscreen"></i></a>
|
||||
{loop="$value.link_plugin"}
|
||||
<span class="link-plugin">{$value}</span>
|
||||
{/loop}
|
||||
<a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/loop}
|
||||
</div>
|
||||
{include="linklist.paging"}
|
||||
{/if}
|
||||
{loop="$plugin_end_zone"}
|
||||
{$value}
|
||||
{/loop}
|
||||
</div>
|
||||
<!-- {* ----- tag search results ----- *} -->
|
||||
{if="!empty($search_tags)"}
|
||||
<div class="search-results-header">
|
||||
<span class="search-count">{$result_count} résultat(s) tagué(s)</span>
|
||||
{$exploded_tags=tags_str2array($search_tags, $tags_separator)}
|
||||
{loop="$exploded_tags"}
|
||||
<span class="search-tag-chip">{$value} <a href="{$base_path}/remove-tag/{function="
|
||||
urlencode($value)"}" class="search-tag-close" title="Retirer le tag"
|
||||
aria-label="Retirer le tag {$value}"><i class="mdi mdi-close"
|
||||
aria-hidden="true"></i></a></span>
|
||||
{/loop}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- {* ----- modale unique ----- *} -->
|
||||
<div id="desc-modal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" id="desc-modal-close">×</button>
|
||||
<div class="modal-body" id="desc-modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- {* ----- no links ----- *} -->
|
||||
{if="count($links)==0"}
|
||||
<div class="empty-state" role="status" aria-live="polite">
|
||||
<div class="empty-state-icon" aria-hidden="true"><i class="mdi mdi-bookmark-off-outline"></i></div>
|
||||
<h2 class="empty-state-title">Aucun bookmark trouvé</h2>
|
||||
<p class="empty-state-text">{if="!empty($search_term)"}Aucun résultat pour : <strong>{$search_term}</strong>{else}Commencez à ajouter des bookmarks pour les voir apparaître ici.{/if}</p>
|
||||
</div>
|
||||
{else}
|
||||
<!-- {* ----- at least one link ----- *} -->
|
||||
<div class="links-list view-grid" id="links-list">
|
||||
{loop="$links"}
|
||||
<div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
|
||||
{if="$is_logged_in"}
|
||||
<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox"
|
||||
data-id="{$value.id}" aria-label="Sélectionner ce bookmark"></div>
|
||||
{/if}
|
||||
{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img
|
||||
src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt=""
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
onerror="this.parentElement.style.display='none'"></div>{/if}
|
||||
<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Privé"
|
||||
aria-label="Bookmark privé"></i>{else}<i class="mdi mdi-lock-open-variant"
|
||||
title="Public" aria-label="Bookmark public"></i>{/if}</div>
|
||||
<div class="link-content">
|
||||
<div class="link-header">
|
||||
<a href="{$value.real_url}" class="link-title"
|
||||
{if="strpos($value.url, $value.shorturl) !== false"} title="Note" {/if}>
|
||||
{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin"
|
||||
style="color:var(--primary);"
|
||||
aria-hidden="true"></i>{/if}{$value.title_html}
|
||||
</a>
|
||||
<span class="link-url">{$value.url}</span>
|
||||
<div class="link-meta">
|
||||
<span class="link-date">{$value.created|format_date}</span>
|
||||
<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink"
|
||||
title="Lien permanent" aria-label="Lien permanent"><i
|
||||
class="mdi mdi-link-variant" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- {* ----- QR Code Modal ----- *} -->
|
||||
<div id="qrcode-modal" class="qrcode-modal-overlay">
|
||||
<div class="qrcode-modal-content">
|
||||
<button class="qrcode-modal-close" id="qrcode-modal-close">×</button>
|
||||
<div id="qrcode-modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
{if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
|
||||
<div class="link-footer">
|
||||
<div class="link-tag-list">
|
||||
{loop="$value.taglist"}<span class="link-tag"><a
|
||||
href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}
|
||||
</div>
|
||||
<div class="link-actions">
|
||||
{if="$is_logged_in"}
|
||||
<a href="{$base_path}/admin/shaare/{$value.id}" title="Modifier"
|
||||
aria-label="Modifier ce bookmark"><i class="mdi mdi-pencil"
|
||||
aria-hidden="true"></i></a>
|
||||
<a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}"
|
||||
title="Épingler/Désépingler" aria-label="Épingler ou désépingler"><i
|
||||
class="mdi mdi-pin" aria-hidden="true"></i></a>
|
||||
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}"
|
||||
title="Supprimer" aria-label="Supprimer ce bookmark"
|
||||
onclick="return confirm('Supprimer ce bookmark ?');"><i
|
||||
class="mdi mdi-delete" aria-hidden="true"></i></a>
|
||||
{/if}
|
||||
<!-- fullscreen button (in all 3 views) -->
|
||||
<a href="#" class="view-desc-btn" data-id="{$value.id}"
|
||||
title="Voir la description" aria-label="Voir la description complète"><i
|
||||
class="mdi mdi-fullscreen" aria-hidden="true"></i></a>
|
||||
{loop="$value.link_plugin"}
|
||||
<span class="link-plugin">{$value}</span>
|
||||
{/loop}
|
||||
<a href="{$value.real_url}" target="_blank" rel="noopener"
|
||||
title="Ouvrir le lien" aria-label="Ouvrir le lien dans un nouvel onglet"><i
|
||||
class="mdi mdi-open-in-new" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/loop}
|
||||
</div>
|
||||
{include="linklist.paging"}
|
||||
{/if}
|
||||
{loop="$plugin_end_zone"}
|
||||
{$value}
|
||||
{/loop}
|
||||
</div>
|
||||
|
||||
{include="page.footer"}
|
||||
</body>
|
||||
<!-- {* ----- description modal ----- *} -->
|
||||
<div id="desc-modal" class="modal-overlay" role="dialog" aria-modal="true"
|
||||
aria-label="Description du bookmark" aria-hidden="true">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" id="desc-modal-close" aria-label="Fermer">×</button>
|
||||
<div class="modal-body" id="desc-modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
<!-- {* ----- QR Code Modal ----- *} -->
|
||||
<div id="qrcode-modal" class="qrcode-modal-overlay" role="dialog" aria-modal="true" aria-label="Code QR"
|
||||
aria-hidden="true">
|
||||
<div class="qrcode-modal-content">
|
||||
<button class="qrcode-modal-close" id="qrcode-modal-close" aria-label="Fermer">×</button>
|
||||
<div id="qrcode-modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{include="page.footer"}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user