diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css index 3287f94..4b01bbf 100644 --- a/shaarli-pro/css/style.css +++ b/shaarli-pro/css/style.css @@ -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; +} diff --git a/shaarli-pro/js/script.js b/shaarli-pro/js/script.js index 948fc13..84fb932 100644 --- a/shaarli-pro/js/script.js +++ b/shaarli-pro/js/script.js @@ -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('
No description available.
'); + } + } + } + }); }); diff --git a/shaarli-pro/linklist.html b/shaarli-pro/linklist.html index 6b641ad..74022e8 100644 --- a/shaarli-pro/linklist.html +++ b/shaarli-pro/linklist.html @@ -10,16 +10,19 @@ {loop="$plugin_start_zone"} {$value} {/loop} + + + {if="!empty($search_tags)"}{if="!empty($search_term)"}No results for: {$search_term}{else}Start adding bookmarks to see them here.{/if}