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

feat: add fullscreen description modal with overlay, animations, and keyboard navigation support.

Browse Source
This commit is contained in:
Bruno Charest 2026-01-18 15:08:08 -05:00
parent a51b3b8eae
commit 84ac064462
5 changed files with 397 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
shaarli-pro/css/style.css
View File

@ -3256,3 +3256,113 @@ select:focus {
.paging.single-page .paging-stats {
margin: 0;
}
/* ===== Fullscreen Description Modal ===== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
z-index: 1050;
display: none;
align-items: center;
justify-content: center;
padding: 2rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-overlay.show {
display: flex;
opacity: 1;
}
.modal-content {
background: var(--bg-card);
width: 100%;
max-width: 900px;
max-height: 90vh;
border-radius: 1rem;
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
position: relative;
transform: translateY(20px);
transition: transform 0.3s ease;
border: 1px solid var(--border);
}
.modal-overlay.show .modal-content {
transform: translateY(0);
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-body);
border: 1px solid var(--border);
color: var(--text-main);
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
}
.modal-close:hover {
background: var(--danger);
color: white;
border-color: var(--danger);
transform: rotate(90deg);
}
.modal-body {
padding: 3rem 2rem 2rem;
overflow-y: auto;
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-main);
}
.modal-body h1, .modal-body h2, .modal-body h3,
.modal-body h4, .modal-body h5, .modal-body h6 {
margin-top: 1.5em;
margin-bottom: 0.75em;
color: var(--text-main);
}
.modal-body p {
margin-bottom: 1.5em;
}
.modal-body img {
max-width: 100%;
border-radius: 0.5rem;
margin: 1rem 0;
}
.modal-body pre, .modal-body code {
background: var(--bg-body);
font-family: monospace;
padding: 0.2rem 0.4rem;
border-radius: 0.3rem;
}
.modal-body pre {
padding: 1rem;
overflow-x: auto;
}
/* Button style adjustment if needed */
.view-desc-btn {
cursor: pointer;
}

53
shaarli-pro/js/script.js
View File

@ -951,4 +951,57 @@ document.addEventListener('DOMContentLoaded', () => {
updateThumbnail(thumbnailsIdList[0]);
}
}
// ===== Fullscreen Description Modal =====
const descModal = document.getElementById('desc-modal');
const descModalBody = document.getElementById('desc-modal-body');
const descModalClose = document.getElementById('desc-modal-close');
function openDescModal(content) {
if (descModal && descModalBody) {
descModalBody.innerHTML = content;
descModal.classList.add('show');
document.body.style.overflow = 'hidden'; // Prevent background scrolling
}
}
function closeDescModal() {
if (descModal) {
descModal.classList.remove('show');
document.body.style.overflow = '';
}
}
descModalClose?.addEventListener('click', closeDescModal);
descModal?.addEventListener('click', (e) => {
if (e.target === descModal) {
closeDescModal();
}
});
// Press ESC to close description modal
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && descModal?.classList.contains('show')) {
closeDescModal();
}
});
// Delegate click event for dynamic buttons
document.addEventListener('click', (e) => {
const btn = e.target.closest('.view-desc-btn');
if (btn) {
e.preventDefault();
const id = btn.dataset.id;
const card = document.getElementById(id);
if (card) {
// Try to find description element (even if hidden in compact view)
const descEl = card.querySelector('.link-description');
if (descEl) {
openDescModal(descEl.innerHTML);
} else {
openDescModal('<p class="text-muted">No description available.</p>');
}
}
}
});
});

44
shaarli-pro/linklist.html
View File

@ -10,16 +10,19 @@
{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 View"><i class="mdi mdi-view-grid"></i></button>
<button class="view-toggle-btn" id="view-list-btn" title="List View"><i class="mdi mdi-view-list"></i></button>
<button class="view-toggle-btn" id="view-compact-btn" title="Compact View"><i class="mdi mdi-view-headline"></i></button>
<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>
<!-- {* ----- résultats de recherche par tags ----- *} -->
{if="!empty($search_tags)"}
<div class="search-results-header">
<span class="search-count">{$result_count} results tagged</span>
@ -29,6 +32,8 @@
{/loop}
</div>
{/if}
<!-- {* ----- aucun lien ----- *} -->
{if="count($links)==0"}
<div class="empty-state">
<div class="empty-state-icon"><i class="mdi mdi-bookmark-off-outline"></i></div>
@ -36,12 +41,14 @@
<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;"></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;"></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>
{if="$is_logged_in"}
<div class="link-hover-actions">
<a href="{$base_path}/admin/shaare/{$value.id}" class="link-hover-btn" title="Edit"><i class="mdi mdi-pencil"></i></a>
@ -49,24 +56,32 @@
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" class="link-hover-btn" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
</div>
{/if}
<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>
<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">{function="strftime('%c', $value.timestamp)"}</span>
<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
</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-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}&amp;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>
<a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
</div>
</div>
@ -75,11 +90,24 @@
{/loop}
</div>
{include="linklist.paging"}
{/if}
{/if}
{* ferme le ELSE du “count($links)==0” *}
{loop="$plugin_end_zone"}
{$value}
{/loop}
</div> {* ferme #linklist *}
<!-- {* ----- modale unique ----- *} -->
<div id="desc-modal" class="modal-overlay">
<div class="modal-content">
<button class="modal-close" id="desc-modal-close">&times;</button>
<div class="modal-body" id="desc-modal-body"></div>
</div>
</div>
{include="page.footer"}
</body>
</html>
</html>

85
shaarli-pro/linklist_noError.html Normal file
View File

@ -0,0 +1,85 @@
<!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}
<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 View"><i class="mdi mdi-view-grid"></i></button>
<button class="view-toggle-btn" id="view-list-btn" title="List View"><i class="mdi mdi-view-list"></i></button>
<button class="view-toggle-btn" id="view-compact-btn" title="Compact View"><i class="mdi mdi-view-headline"></i></button>
</div>
</div>
</div>
{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}
{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}
<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;"></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>
{if="$is_logged_in"}
<div class="link-hover-actions">
<a href="{$base_path}/admin/shaare/{$value.id}" class="link-hover-btn" title="Edit"><i class="mdi mdi-pencil"></i></a>
<a href="{$value.real_url}" target="_blank" rel="noopener" class="link-hover-btn" title="Open"><i class="mdi mdi-open-in-new"></i></a>
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" class="link-hover-btn" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
</div>
{/if}
<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">{function="strftime('%c', $value.timestamp)"}</span>
<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
</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}&amp;token={$token}" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
{/if}
<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>
{include="page.footer"}
</body>
</html>

113
shaarli-pro/linklist_withError.html Normal file
View File

@ -0,0 +1,113 @@
<!DOCTYPE html>
<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
<head>
{$pageName='linklist'}
{include="includes"}
</head>
<body>
{include="page.header"}
<div id="linklist">
{* ----- 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>
{* ----- 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}
{* ----- 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>
{* ----- au moins un lien ----- *}
{else}
<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;"></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>
{if="$is_logged_in"}
<div class="link-hover-actions">
<a href="{$base_path}/admin/shaare/{$value.id}" class="link-hover-btn" title="Edit"><i class="mdi mdi-pencil"></i></a>
<a href="{$value.real_url}" target="_blank" rel="noopener" class="link-hover-btn" title="Open"><i class="mdi mdi-open-in-new"></i></a>
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" class="link-hover-btn" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
</div>
{/if}
<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">{function="strftime('%c',$value.timestamp)"}</span>
<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
</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}&amp;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>
<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} {* ferme le ELSE du “count($links)==0” *}
{loop="$plugin_end_zone"}{$value}{/loop}
</div> {* ferme #linklist *}
{* ----- modale unique ----- *}
<div id="desc-modal" class="modal-overlay">
<div class="modal-content">
<button class="modal-close" id="desc-modal-close">&times;</button>
<div class="modal-body" id="desc-modal-body"></div>
</div>
</div>
{include="page.footer"}
</body>
</html>