juanatsap
6e2b042c8d
Transform PDF modal from placeholder to functional UI with three
interactive thumbnail cards using skeleton/placeholder styling.
Features:
- Three thumbnail options: Short CV (1 page), Long CV (2 pages), Custom (coming soon)
- Skeleton shimmer animations (1.8s, 60fps, GPU-accelerated)
- Click-to-select with visual feedback (green border, shadow, checkmark)
- Radio button behavior (only one selection at a time)
- Download button with enable/disable state management
- Keyboard navigation support (Tab, Enter, Space, ESC)
- Full ARIA attributes for screen reader accessibility
- Responsive layout (3 cols desktop, 2 cols tablet, 1 col mobile)
- Multilingual support (EN/ES) using Go template conditionals
- Download stub (shows alert, ready for backend integration)
Implementation:
- templates/partials/modals/pdf-modal.html: Complete rewrite (244 lines)
- static/css/main.css: Add PDF modal section (+290 lines)
- tests/mjs/14-pdf-modal.test.mjs: Comprehensive E2E test suite (570 lines)
- prompts/005-pdf-download-thumbnails-IMPLEMENTATION.md: Documentation
Tests: ✅ 12/12 PASSED
- Modal structure validation
- Three thumbnail cards display
- Selection interaction (click, keyboard)
- Download button state management
- ESC key closes modal
- Accessibility compliance (ARIA, roles, tabindex)
- Responsive layout (375px, 768px, 1920px)
- Multilingual support validation
- No console errors
Screenshots:
- tests/screenshots/pdf-modal-initial.png
- tests/screenshots/pdf-modal-short-selected.png
- tests/screenshots/pdf-modal-long-selected.png
Technical Details:
- Uses Hyperscript for state management (consistent with project)
- Native <dialog> element for accessibility
- Reuses skeleton.css patterns for shimmer animation
- Follows existing modal patterns (shortcuts-modal.html)
- Performance: <5KB gzipped overhead
- Browser support: 95%+ (all modern browsers)
Next Steps:
- Backend PDF generation (/download-pdf endpoint)
- Custom wizard implementation (Phase 3)
- PDF preview feature (Phase 4)
Refs: prompts/005-pdf-download-thumbnails.md
245 lines
11 KiB
HTML
245 lines
11 KiB
HTML
{{define "pdf-modal"}}
|
|
<!-- PDF Download Modal - Interactive Thumbnails -->
|
|
<dialog id="pdf-modal" class="info-modal pdf-download-modal no-print"
|
|
_="on click
|
|
if event.target is me
|
|
call me.close()
|
|
end">
|
|
<div class="info-modal-content">
|
|
<!-- Close Button -->
|
|
<button class="info-modal-close"
|
|
onclick="document.getElementById('pdf-modal').close()"
|
|
aria-label="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
|
|
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
|
|
</button>
|
|
|
|
<!-- Header -->
|
|
<div class="info-modal-header">
|
|
<h2>{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}</h2>
|
|
<p class="pdf-modal-subtitle">
|
|
{{if eq .Lang "es"}}Elige tu formato preferido{{else}}Choose your preferred format{{end}}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Body: Three Thumbnail Cards -->
|
|
<div class="pdf-options-grid">
|
|
|
|
<!-- Short CV Card -->
|
|
<div class="pdf-option-card"
|
|
data-cv-format="short"
|
|
role="radio"
|
|
aria-checked="false"
|
|
aria-label="{{if eq .Lang "es"}}CV Corto - Una página, información esencial{{else}}Short CV - One page, essential information{{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 'short'
|
|
set announcement.textContent to '{{if eq .Lang "es"}}Seleccionado: CV Corto - Una página{{else}}Selected: Short CV - One page{{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-short">
|
|
<!-- Header representation -->
|
|
<div class="skeleton-block" style="height: 48px;"></div>
|
|
|
|
<!-- Content sections (compact) -->
|
|
<div class="skeleton-block" style="height: 60px;"></div>
|
|
<div class="skeleton-block" style="height: 60px;"></div>
|
|
<div class="skeleton-block" style="height: 60px;"></div>
|
|
|
|
<!-- Page count badge -->
|
|
<div class="thumbnail-badge">
|
|
{{if eq .Lang "es"}}1 Página{{else}}1 Page{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pdf-option-info">
|
|
<h3>{{if eq .Lang "es"}}CV Corto{{else}}Short CV{{end}}</h3>
|
|
<p>{{if eq .Lang "es"}}Una página, información esencial{{else}}One page, essential info{{end}}</p>
|
|
</div>
|
|
|
|
<div class="pdf-option-badge">
|
|
<iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Long CV Card -->
|
|
<div class="pdf-option-card"
|
|
data-cv-format="long"
|
|
role="radio"
|
|
aria-checked="false"
|
|
aria-label="{{if eq .Lang "es"}}CV Completo - Versión completa, todos los detalles{{else}}Long CV - Full version, all details{{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"}}2 Páginas{{else}}2 Pages{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pdf-option-info">
|
|
<h3>{{if eq .Lang "es"}}CV Completo{{else}}Long CV{{end}}</h3>
|
|
<p>{{if eq .Lang "es"}}Versión completa, todos los detalles{{else}}Full version, all details{{end}}</p>
|
|
</div>
|
|
|
|
<div class="pdf-option-badge">
|
|
<iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom CV Card (Placeholder) -->
|
|
<div class="pdf-option-card"
|
|
data-cv-format="custom"
|
|
role="radio"
|
|
aria-checked="false"
|
|
aria-label="{{if eq .Lang "es"}}Personalizado - Personaliza secciones{{else}}Custom - Customize sections{{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 'custom'
|
|
set announcement.textContent to '{{if eq .Lang "es"}}Seleccionado: Personalizado{{else}}Selected: Custom format{{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-custom">
|
|
<!-- Centered icon instead of skeleton blocks -->
|
|
<div class="custom-placeholder">
|
|
<iconify-icon icon="mdi:help-circle-outline" width="80" height="80"></iconify-icon>
|
|
<p>{{if eq .Lang "es"}}Personalizar{{else}}Customize{{end}}</p>
|
|
</div>
|
|
|
|
<!-- Coming soon badge -->
|
|
<div class="thumbnail-badge">
|
|
{{if eq .Lang "es"}}Próximamente{{else}}Coming Soon{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pdf-option-info">
|
|
<h3>{{if eq .Lang "es"}}Personalizado{{else}}Custom{{end}}</h3>
|
|
<p>{{if eq .Lang "es"}}Personaliza secciones{{else}}Customize sections{{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 -->
|
|
<div class="pdf-modal-footer">
|
|
<button class="pdf-download-btn"
|
|
disabled
|
|
_="on click
|
|
if :selectedFormat is not null
|
|
log 'Download requested for format:', :selectedFormat
|
|
-- TODO: Trigger actual PDF download when backend ready
|
|
-- Example: window.location.href = '/download-pdf?format=' + :selectedFormat
|
|
call alert('{{if eq .Lang "es"}}¡Descarga de PDF próximamente! Formato seleccionado: {{else}}PDF download coming soon! Selected format: {{end}}' + :selectedFormat)
|
|
end
|
|
end">
|
|
<iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
|
|
{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Screen Reader Announcement Area -->
|
|
<div id="pdf-selection-announcement" class="sr-only" aria-live="polite" aria-atomic="true"></div>
|
|
</div>
|
|
</dialog>
|
|
{{end}}
|