txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: PDF modal layout and loading state issues

Browse Source 
- Reorder cards: Short → Default ⭐ → Extended (was Short → Extended → Default)
- Add cleanup to prevent stuck blur effect on modal reopen
- Use MutationObserver to reset loading state when modal opens
- Add close event listener to clear loading-active class

Fixes:
1. Default CV now displays in center position as intended
2. Modal no longer shows grey/faded content due to stuck loading-active class
This commit is contained in:
juanatsap
2025-11-20 13:31:56 +00:00
parent 585db9aeb1
commit 2c7a467149
1 changed files with 96 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/partials/modals/pdf-modal.html
+96 -67
View File
@@ -104,73 +104,6 @@
</div>
</div>
<!-- Extended CV Card -->
<div class="pdf-option-card"
data-cv-format="long"
role="radio"
aria-checked="false"
aria-label="{{if eq .Lang "es"}}CV Extendido - 9 páginas, versión completa{{else}}Extended CV - 9 pages, full version{{end}}"
tabindex="0"
_="on click
-- Remove selected from all cards
set cards to .pdf-option-card in #pdf-modal
for card in cards
remove .selected from card
set card's @aria-checked to 'false'
end
-- Add selected to this card
add .selected to me
set my @aria-checked to 'true'
-- Enable download button
set downloadBtn to .pdf-download-btn in #pdf-modal
remove @disabled from downloadBtn
-- Store selected format
set :selectedFormat to my @data-cv-format
-- Announce to screen readers
set announcement to #pdf-selection-announcement
if :selectedFormat is 'long'
set announcement.textContent to '{{if eq .Lang "es"}}Seleccionado: CV Completo - Versión completa{{else}}Selected: Long CV - Full version{{end}}'
end
end
on keydown
if event.key is 'Enter' or event.key is ' '
halt the event
trigger click on me
end
end">
<div class="pdf-thumbnail thumbnail-long">
<!-- Header representation -->
<div class="skeleton-block" style="height: 48px;"></div>
<!-- More content sections (detailed) -->
<div class="skeleton-block" style="height: 40px;"></div>
<div class="skeleton-block" style="height: 40px;"></div>
<div class="skeleton-block" style="height: 40px;"></div>
<div class="skeleton-block" style="height: 40px;"></div>
<div class="skeleton-block" style="height: 40px;"></div>
<!-- Page count badge -->
<div class="thumbnail-badge">
{{if eq .Lang "es"}}9 Páginas{{else}}9 Pages{{end}}
</div>
</div>
<div class="pdf-option-info">
<h3>{{if eq .Lang "es"}}CV Extendido (9 páginas){{else}}Extended CV (9 pages){{end}}</h3>
<p>{{if eq .Lang "es"}}Todos los detalles{{else}}All details{{end}}</p>
</div>
<div class="pdf-option-badge">
<iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
</div>
</div>
<!-- Default CV Card (Recommended) -->
<div class="pdf-option-card pdf-option-recommended"
data-cv-format="default"
@@ -243,6 +176,73 @@
<iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
</div>
</div>
<!-- Extended CV Card -->
<div class="pdf-option-card"
data-cv-format="long"
role="radio"
aria-checked="false"
aria-label="{{if eq .Lang "es"}}CV Extendido - 9 páginas, versión completa{{else}}Extended CV - 9 pages, full version{{end}}"
tabindex="0"
_="on click
-- Remove selected from all cards
set cards to .pdf-option-card in #pdf-modal
for card in cards
remove .selected from card
set card's @aria-checked to 'false'
end
-- Add selected to this card
add .selected to me
set my @aria-checked to 'true'
-- Enable download button
set downloadBtn to .pdf-download-btn in #pdf-modal
remove @disabled from downloadBtn
-- Store selected format
set :selectedFormat to my @data-cv-format
-- Announce to screen readers
set announcement to #pdf-selection-announcement
if :selectedFormat is 'long'
set announcement.textContent to '{{if eq .Lang "es"}}Seleccionado: CV Completo - Versión completa{{else}}Selected: Long CV - Full version{{end}}'
end
end
on keydown
if event.key is 'Enter' or event.key is ' '
halt the event
trigger click on me
end
end">
<div class="pdf-thumbnail thumbnail-long">
<!-- Header representation -->
<div class="skeleton-block" style="height: 48px;"></div>
<!-- More content sections (detailed) -->
<div class="skeleton-block" style="height: 40px;"></div>
<div class="skeleton-block" style="height: 40px;"></div>
<div class="skeleton-block" style="height: 40px;"></div>
<div class="skeleton-block" style="height: 40px;"></div>
<div class="skeleton-block" style="height: 40px;"></div>
<!-- Page count badge -->
<div class="thumbnail-badge">
{{if eq .Lang "es"}}9 Páginas{{else}}9 Pages{{end}}
</div>
</div>
<div class="pdf-option-info">
<h3>{{if eq .Lang "es"}}CV Extendido (9 páginas){{else}}Extended CV (9 pages){{end}}</h3>
<p>{{if eq .Lang "es"}}Todos los detalles{{else}}All details{{end}}</p>
</div>
<div class="pdf-option-badge">
<iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
</div>
</div>
</div>
<!-- Footer: Download Button -->
@@ -257,6 +257,35 @@
</div>
<script>
// Reset loading state when modal opens to prevent stuck blur effect
(function() {
const modal = document.getElementById('pdf-modal');
const modalContent = document.getElementById('pdf-modal-content');
const overlay = document.getElementById('pdf-loading-overlay');
// Clean up loading state when modal closes
modal.addEventListener('close', function() {
overlay.classList.remove('active');
modalContent.classList.remove('loading-active');
});
// Also clean up when modal opens (in case of stuck state)
// Use MutationObserver to detect when modal becomes visible
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'open') {
if (modal.hasAttribute('open')) {
// Modal just opened - ensure clean state
overlay.classList.remove('active');
modalContent.classList.remove('loading-active');
}
}
});
});
observer.observe(modal, { attributes: true });
})();
function downloadPDF() {
const selectedCard = document.querySelector('#pdf-modal .pdf-option-card.selected');
if (!selectedCard) {