refactor: organize hyperscript code and implement mobile button layout
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
This commit is contained in:
@@ -6,12 +6,8 @@
|
||||
aria-label="{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}"
|
||||
title="{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}"
|
||||
onclick="document.getElementById('pdf-modal').showModal()"
|
||||
_="on mouseenter
|
||||
add .pdf-hover-sync to me
|
||||
add .pdf-hover-sync to #action-bar-pdf-btn
|
||||
on mouseleave
|
||||
remove .pdf-hover-sync from me
|
||||
remove .pdf-hover-sync from #action-bar-pdf-btn">
|
||||
_="on mouseenter call syncPdfHover(true)
|
||||
on mouseleave call syncPdfHover(false)">
|
||||
<iconify-icon icon="catppuccin:pdf" width="28" height="28"></iconify-icon>
|
||||
</button>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user