txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: organize hyperscript code and implement mobile button layout

Browse Source 
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:
juanatsap
2025-11-16 14:03:22 +00:00
parent 671f06cd21
commit 585f620bd6
8 changed files with 167 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/partials/navigation/action-buttons.html
+4 -14
View File
@@ -6,12 +6,8 @@
class="action-btn pdf-btn"
onclick="document.getElementById('pdf-modal').showModal()"
aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}"
_="on mouseenter
add .pdf-hover-sync to me
add .pdf-hover-sync to #download-button
on mouseleave
remove .pdf-hover-sync from me
remove .pdf-hover-sync from #download-button">
_="on mouseenter call syncPdfHover(true)
on mouseleave call syncPdfHover(false)">
<iconify-icon icon="catppuccin:pdf" width="18" height="18"></iconify-icon>
{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}
</button>
@@ -19,14 +15,8 @@
class="action-btn print-btn action-bar-print-btn"
aria-label="{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}"
_="on click call printFriendly()
on mouseenter
add .print-hover-sync to me
add .print-hover-sync to #print-friendly-button
add .print-hover-sync to .menu-print-btn
on mouseleave
remove .print-hover-sync from me
remove .print-hover-sync from #print-friendly-button
remove .print-hover-sync from .menu-print-btn">
on mouseenter call syncPrintHover(true)
on mouseleave call syncPrintHover(false)">
<iconify-icon icon="mdi:leaf" width="18" height="18"></iconify-icon>
{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}
</button>
templates/partials/navigation/hamburger-menu.html
+5 -40
View File
@@ -99,18 +99,7 @@
{{if eq .CVLengthClass "cv-long"}}checked{{end}}
hx-post="/toggle/length?lang={{.Lang}}"
hx-swap="none"
_="on change
if my.checked
remove .cv-short from .cv-paper
add .cv-long to .cv-paper
set localStorage['cv-length'] to 'long'
set #lengthToggle's checked to true
else
remove .cv-long from .cv-paper
add .cv-short to .cv-paper
set localStorage['cv-length'] to 'short'
set #lengthToggle's checked to false
end">
_="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>
@@ -137,16 +126,7 @@
{{if .ShowIcons}}checked{{end}}
hx-post="/toggle/icons?lang={{.Lang}}"
hx-swap="none"
_="on change
if my.checked
add .show-icons to .cv-paper
set localStorage['cv-icons'] to 'true'
set #iconToggle's checked to true
else
remove .show-icons from .cv-paper
set localStorage['cv-icons'] to 'false'
set #iconToggle's checked to false
end">
_="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>
@@ -173,16 +153,7 @@
{{if .ThemeClean}}checked{{end}}
hx-post="/toggle/theme?lang={{.Lang}}"
hx-swap="none"
_="on change
if my.checked
add .theme-clean to the body
set localStorage['cv-theme'] to 'clean'
set #themeToggle's checked to true
else
remove .theme-clean from the body
set localStorage['cv-theme'] to 'default'
set #themeToggle's checked to false
end">
_="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>
@@ -211,14 +182,8 @@
<button class="menu-action-btn menu-print-btn"
_="on click call printFriendly()
on mouseenter
add .print-hover-sync to me
add .print-hover-sync to #print-friendly-button
add .print-hover-sync to .action-bar-print-btn
on mouseleave
remove .print-hover-sync from me
remove .print-hover-sync from #print-friendly-button
remove .print-hover-sync from .action-bar-print-btn">
on mouseenter call syncPrintHover(true)
on mouseleave call syncPrintHover(false)">
<iconify-icon icon="mdi:leaf" width="20" height="20"></iconify-icon>
<span>{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}</span>
</button>
templates/partials/navigation/view-controls.html
+3 -32
View File
@@ -10,18 +10,7 @@
{{if eq .CVLengthClass "cv-long"}}checked{{end}}
hx-post="/toggle/length?lang={{.Lang}}"
hx-swap="none"
_="on change
if my.checked
remove .cv-short from .cv-paper
add .cv-long to .cv-paper
set localStorage['cv-length'] to 'long'
set #lengthToggleMenu's checked to true
else
remove .cv-long from .cv-paper
add .cv-short to .cv-paper
set localStorage['cv-length'] to 'short'
set #lengthToggleMenu's checked to false
end">
_="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>
@@ -43,16 +32,7 @@
{{if .ShowIcons}}checked{{end}}
hx-post="/toggle/icons?lang={{.Lang}}"
hx-swap="none"
_="on change
if my.checked
add .show-icons to .cv-paper
set localStorage['cv-icons'] to 'true'
set #iconToggleMenu's checked to true
else
remove .show-icons from .cv-paper
set localStorage['cv-icons'] to 'false'
set #iconToggleMenu's checked to false
end">
_="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>
@@ -74,16 +54,7 @@
{{if .ThemeClean}}checked{{end}}
hx-post="/toggle/theme?lang={{.Lang}}"
hx-swap="none"
_="on change
if my.checked
add .theme-clean to the body
set localStorage['cv-theme'] to 'clean'
set #themeToggleMenu's checked to true
else
remove .theme-clean from the body
set localStorage['cv-theme'] to 'default'
set #themeToggleMenu's checked to false
end">
_="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>