juanatsap
585f620bd6
This commit includes two major improvements:
1. Hyperscript Code Organization:
- Extracted all hyperscript blocks >3 lines into reusable functions
- Created 6 new functions in functions._hs:
* toggleCVLength(isLong) - CV length toggle sync
* toggleIcons(showIcons) - Icons toggle sync
* toggleTheme(isClean) - Theme toggle sync
* syncPdfHover(show) - PDF button synchronized hover
* syncPrintHover(show) - Print button synchronized hover
* highlightZoomControl(show) - Zoom control highlight effect
- Reduced inline hyperscript from 11+ lines to 1-2 lines per element
- Updated 8 template files to use function calls:
* hamburger-menu.html
* view-controls.html
* action-buttons.html
* download-button.html
* print-friendly-button.html
* zoom-toggle-button.html
2. Mobile Button Layout (max-width: 900px):
- Repositioned three fixed buttons (PDF, Print, Info) horizontally at bottom center
- Print button perfectly centered in viewport
- Download button on left, Info button on right
- Hidden zoom and shortcuts buttons on mobile (available in hamburger menu)
- Removed conflicting old mobile styles that were hiding print button
- Smooth hover transitions maintained with proper transform calculations
Technical details:
- Used CSS transform with calc() for precise horizontal positioning
- Maintained hover effects with combined translateX/translateY transforms
- Ensured accessibility with proper ARIA labels and spacing
- All functions check element existence before manipulation
- LocalStorage sync maintained across desktop/mobile toggles
14 lines
524 B
HTML
14 lines
524 B
HTML
{{define "print-friendly-button"}}
|
|
<!-- Print-Friendly Button (Fixed Left) -->
|
|
<button
|
|
id="print-friendly-button"
|
|
class="fixed-btn print-friendly-btn no-print"
|
|
aria-label="{{if eq .Lang "es"}}Imprimir CV{{else}}Print CV{{end}}"
|
|
title="{{if eq .Lang "es"}}Imprimir CV{{else}}Print CV{{end}}"
|
|
onclick="window.print()"
|
|
_="on mouseenter call syncPrintHover(true)
|
|
on mouseleave call syncPrintHover(false)">
|
|
<iconify-icon icon="mdi:leaf" width="28" height="28"></iconify-icon>
|
|
</button>
|
|
{{end}}
|