feat: print-friendly improvements and PDF download modal
Print CSS enhancements: - Show ALL icons, logos, and badges by default in print (16px section icons, 40px company/project logos) - Improved header layout with bigger photo (110x147px, 3:4 ratio) positioned on right - Name and years right-aligned with justified intro text below - Maintained flex layout for experience/project items to show logos side-by-side - Compact badge sizing (7pt font) for print PDF Download UX: - Replaced direct download links with modal popup - Shows work-in-progress message directing users to Print Friendly feature - Bilingual modal (English/Spanish) matching info modal styling - Modal closable via backdrop click, X button, or Escape key - Prevents accidental downloads of outdated PDFs UI improvements: - Enhanced icon toggle contrast and visibility - Consistent modal behavior across info and PDF modals
This commit is contained in:
+50
-7
@@ -169,14 +169,13 @@
|
||||
|
||||
<!-- Right: Action buttons -->
|
||||
<div class="action-buttons-right">
|
||||
<a
|
||||
<button
|
||||
class="action-btn pdf-btn"
|
||||
href="/export/pdf?lang={{.Lang}}"
|
||||
download
|
||||
onclick="openPdfModal()"
|
||||
aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}">
|
||||
<iconify-icon icon="mdi:download" width="18" height="18"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}
|
||||
</a>
|
||||
</button>
|
||||
<button
|
||||
class="action-btn print-btn"
|
||||
onclick="printFriendly()"
|
||||
@@ -323,10 +322,10 @@
|
||||
<span>{{if eq .Lang "es"}}Acciones{{else}}Actions{{end}}</span>
|
||||
</div>
|
||||
|
||||
<a class="menu-action-btn" href="/export/pdf?lang={{.Lang}}" download>
|
||||
<button class="menu-action-btn" onclick="openPdfModal()">
|
||||
<iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}</span>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<button class="menu-action-btn" onclick="printFriendly()">
|
||||
<iconify-icon icon="mdi:leaf" width="20" height="20"></iconify-icon>
|
||||
@@ -420,6 +419,30 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PDF Export Modal -->
|
||||
<div id="pdf-modal" class="info-modal no-print" onclick="closePdfModalOnBackdrop(event)">
|
||||
<div class="info-modal-content" onclick="event.stopPropagation()">
|
||||
<button class="info-modal-close" onclick="closePdfModal()" aria-label="Close">
|
||||
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
|
||||
</button>
|
||||
|
||||
<div class="info-modal-header">
|
||||
<div class="icon" style="font-size: 3rem; margin-bottom: 1rem;">🚧</div>
|
||||
<h2>{{if eq .Lang "es"}}Exportación PDF - En Desarrollo{{else}}PDF Export - Work in Progress{{end}}</h2>
|
||||
</div>
|
||||
|
||||
<div class="info-modal-body">
|
||||
<p class="info-modal-description">
|
||||
{{if eq .Lang "es"}}
|
||||
La función de exportación a PDF está siendo mejorada. Por favor, usa el botón <strong>Imprimir Amigable</strong> en su lugar (Ctrl+P o Cmd+P para guardar como PDF).
|
||||
{{else}}
|
||||
The PDF export feature is currently being improved. Please use the <strong>Print Friendly</strong> button instead (Ctrl+P or Cmd+P to save as PDF).
|
||||
{{end}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Hover-based menu control
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
@@ -849,10 +872,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Close modal with Escape key
|
||||
// PDF Modal Functions
|
||||
function openPdfModal() {
|
||||
const modal = document.getElementById('pdf-modal');
|
||||
modal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
|
||||
}
|
||||
|
||||
function closePdfModal() {
|
||||
const modal = document.getElementById('pdf-modal');
|
||||
modal.classList.remove('active');
|
||||
document.body.style.overflow = ''; // Restore scrolling
|
||||
}
|
||||
|
||||
function closePdfModalOnBackdrop(event) {
|
||||
if (event.target.id === 'pdf-modal') {
|
||||
closePdfModal();
|
||||
}
|
||||
}
|
||||
|
||||
// Close modals with Escape key
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
closeInfoModal();
|
||||
closePdfModal();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user