juanatsap
f7cda5dba3
CSS Restructuring: - Reorganize monolithic main.css into modular architecture - Create foundation/ (reset, variables, typography, themes) - Create layout/ (container, page, grid, paper) - Create components/ (8 component files) - Create interactive/ (toggles, remaining for future split) - Create effects/ (skeleton loading) - Create contexts/ (print styles) Theme Support Fixes: - Replace all hardcoded text colors with CSS variables - Fix .section-title: rgb(51,51,51) → var(--text-primary) - Fix .cv-name, .intro-text: hardcoded → theme-aware - Fix .experience-period, .duration-text: #555/#aaa → variables - Fix course/project/experience text colors - Support proper light/dark theme text contrast Icon & Layout Fixes: - Standardize all icon sizes to 80×80px - Change all icon backgrounds to transparent - Fix award section layout (missing flexbox) - Update HTML templates (experience.html, awards.html) to width='80' - Fix default icon sizing conflicts View Switcher Fix: - Fix toggleTheme() to target .cv-container instead of body - Ensures clean/default theme toggle works correctly Files: 40+ CSS files modularized, 3 templates updated, 7 tests added
274 lines
12 KiB
HTML
274 lines
12 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">
|
|
<iconify-icon icon="catppuccin:pdf" width="40" height="40" style="margin-bottom: 0.5rem;"></iconify-icon>
|
|
<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>
|
|
|
|
<!-- Current View Card -->
|
|
<div class="pdf-option-card"
|
|
data-cv-format="current"
|
|
role="radio"
|
|
aria-checked="false"
|
|
aria-label="{{if eq .Lang "es"}}Vista Actual - Como se ve en pantalla{{else}}Current View - As shown on screen{{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 'current'
|
|
set announcement.textContent to '{{if eq .Lang "es"}}Seleccionado: Vista Actual{{else}}Selected: Current View{{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 representing current screen view -->
|
|
<div class="custom-placeholder">
|
|
<iconify-icon icon="mdi:monitor" width="80" height="80"></iconify-icon>
|
|
<p>{{if eq .Lang "es"}}En Pantalla{{else}}On Screen{{end}}</p>
|
|
</div>
|
|
|
|
<!-- Current view badge -->
|
|
<div class="thumbnail-badge">
|
|
{{if eq .Lang "es"}}Vista Actual{{else}}Current{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pdf-option-info">
|
|
<h3>{{if eq .Lang "es"}}Vista Actual{{else}}Current View{{end}}</h3>
|
|
<p>{{if eq .Lang "es"}}Como se ve en pantalla{{else}}As shown on screen{{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
|
|
|
|
-- Get current page language
|
|
set lang to '{{.Lang}}'
|
|
|
|
-- Build URL based on selected format
|
|
if :selectedFormat is 'short'
|
|
set url to '/export/pdf?lang=' + lang + '&length=short&icons=show&version=extended'
|
|
else if :selectedFormat is 'long'
|
|
set url to '/export/pdf?lang=' + lang + '&length=long&icons=show&version=extended'
|
|
else if :selectedFormat is 'current'
|
|
-- Get current settings from localStorage
|
|
set currentLength to localStorage.getItem('cv-length') or 'short'
|
|
set currentIcons to localStorage.getItem('cv-icons') or 'show'
|
|
set currentTheme to localStorage.getItem('cv-theme') or 'default'
|
|
|
|
-- Map theme to version parameter
|
|
if currentTheme is 'clean'
|
|
set version to 'clean'
|
|
else
|
|
set version to 'extended'
|
|
end
|
|
|
|
set url to '/export/pdf?lang=' + lang + '&length=' + currentLength + '&icons=' + currentIcons + '&version=' + version
|
|
end
|
|
|
|
-- Trigger download
|
|
set window.location.href to url
|
|
|
|
-- Close modal after a short delay
|
|
wait 500ms
|
|
call #pdf-modal.close()
|
|
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}}
|