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
71 lines
3.3 KiB
HTML
71 lines
3.3 KiB
HTML
{{define "view-controls"}}
|
|
<!-- Center: View controls with labels -->
|
|
<div class="view-controls-center">
|
|
<!-- CV Length toggle -->
|
|
<div class="selector-group" id="desktop-length-toggle">
|
|
<label class="selector-label">{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}:</label>
|
|
<label class="icon-toggle">
|
|
<input type="checkbox"
|
|
id="lengthToggle"
|
|
{{if eq .CVLengthClass "cv-long"}}checked{{end}}
|
|
hx-post="/toggle/length?lang={{.Lang}}"
|
|
hx-swap="none"
|
|
_="on change call toggleCVLength(my.checked)">
|
|
<span class="icon-toggle-slider">
|
|
<iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
|
<iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
|
|
</span>
|
|
</label>
|
|
<iconify-icon icon="mdi:loading"
|
|
class="htmx-indicator spinning small light"
|
|
width="14"
|
|
height="14"
|
|
aria-label="Saving"></iconify-icon>
|
|
</div>
|
|
|
|
<!-- Icon toggle -->
|
|
<div class="selector-group" id="desktop-icon-toggle">
|
|
<label class="selector-label">{{if eq .Lang "es"}}Iconos{{else}}Icons{{end}}:</label>
|
|
<label class="icon-toggle">
|
|
<input type="checkbox"
|
|
id="iconToggle"
|
|
{{if .ShowIcons}}checked{{end}}
|
|
hx-post="/toggle/icons?lang={{.Lang}}"
|
|
hx-swap="none"
|
|
_="on change call toggleIcons(my.checked)">
|
|
<span class="icon-toggle-slider">
|
|
<iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
|
<iconify-icon icon="mdi:image-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
|
|
</span>
|
|
</label>
|
|
<iconify-icon icon="mdi:loading"
|
|
class="htmx-indicator spinning small light"
|
|
width="14"
|
|
height="14"
|
|
aria-label="Saving"></iconify-icon>
|
|
</div>
|
|
|
|
<!-- Theme toggle -->
|
|
<div class="selector-group" id="desktop-theme-toggle">
|
|
<label class="selector-label">{{if eq .Lang "es"}}Vista{{else}}View{{end}}:</label>
|
|
<label class="icon-toggle">
|
|
<input type="checkbox"
|
|
id="themeToggle"
|
|
{{if .ThemeClean}}checked{{end}}
|
|
hx-post="/toggle/theme?lang={{.Lang}}"
|
|
hx-swap="none"
|
|
_="on change call toggleTheme(my.checked)">
|
|
<span class="icon-toggle-slider">
|
|
<iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
|
|
<iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>
|
|
</span>
|
|
</label>
|
|
<iconify-icon icon="mdi:loading"
|
|
class="htmx-indicator spinning small light"
|
|
width="14"
|
|
height="14"
|
|
aria-label="Saving"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
{{end}}
|