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
static/css/main.css
+50 -22
View File
@@ -2863,14 +2863,57 @@ html {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.info-button {
bottom: 1.5rem;
left: 1.5rem;
/* Mobile adjustments - Horizontal button layout at bottom center */
@media (max-width: 900px) {
/* Hide zoom and shortcuts buttons on mobile - only show PDF, Print, Info */
.zoom-toggle-btn,
.shortcuts-btn {
display: none !important;
}
/* Position buttons horizontally at bottom center */
.download-btn {
bottom: 1.5rem !important;
left: 50% !important;
transform: translateX(calc(-50% - 70px)) !important; /* Left button: center - 70px */
width: 45px;
height: 45px;
}
.download-btn:hover,
.download-btn.pdf-hover-sync {
transform: translateX(calc(-50% - 70px)) translateY(-3px) !important;
}
.print-friendly-btn {
bottom: 1.5rem !important;
left: 50% !important;
transform: translateX(-50%) !important; /* Center button */
width: 45px;
height: 45px;
}
.print-friendly-btn:hover,
.print-friendly-btn.print-hover-sync {
transform: translateX(-50%) translateY(-3px) !important;
}
.info-button {
bottom: 1.5rem !important;
left: 50% !important;
transform: translateX(calc(-50% + 70px)) !important; /* Right button: center + 70px */
width: 45px;
height: 45px;
}
.info-button:hover,
.info-button.at-bottom {
transform: translateX(calc(-50% + 70px)) translateY(-3px) !important;
}
.info-button.at-bottom {
transform: translateX(calc(-50% + 70px)) !important; /* No Y offset for at-bottom state */
}
}
/* ========================================
@@ -3913,23 +3956,8 @@ html {
outline-offset: 2px;
}
/* Mobile Responsive - Hide most buttons, keep only download and info */
@media (max-width: 768px) {
.zoom-control,
.zoom-toggle-btn,
.shortcuts-btn,
.print-friendly-btn,
.back-to-top {
display: none !important; /* Hide these buttons on mobile */
}
/* Reposition download button to be above info button (right side) */
.download-btn {
bottom: 6rem; /* Above info button */
left: auto;
right: 2rem; /* Right side like info button */
}
}
/* Mobile Responsive - Horizontal button layout defined below (around line 2867) */
/* Old mobile styles removed - now using horizontal layout with all three buttons */
/* Very Small Screens - Ultra Compact */
@media (max-width: 480px) {
static/hyperscript/functions._hs
+99
View File
@@ -126,6 +126,105 @@ def handleScroll()
set :lastScroll to currentScroll
end
-- ==============================================================================
-- TOGGLE FUNCTIONS (for view controls)
-- ==============================================================================
-- CV Length Toggle
def toggleCVLength(isLong)
set paper to the first .cv-paper
set otherToggle to (#lengthToggle or #lengthToggleMenu)
if isLong
remove .cv-short from paper
add .cv-long to paper
set localStorage['cv-length'] to 'long'
if otherToggle exists set otherToggle's checked to true
else
remove .cv-long from paper
add .cv-short to paper
set localStorage['cv-length'] to 'short'
if otherToggle exists set otherToggle's checked to false
end
end
-- Icons Toggle
def toggleIcons(showIcons)
set paper to the first .cv-paper
set otherToggle to (#iconToggle or #iconToggleMenu)
if showIcons
add .show-icons to paper
set localStorage['cv-icons'] to 'true'
if otherToggle exists set otherToggle's checked to true
else
remove .show-icons from paper
set localStorage['cv-icons'] to 'false'
if otherToggle exists set otherToggle's checked to false
end
end
-- Theme Toggle
def toggleTheme(isClean)
set container to the first .cv-container
set otherToggle to (#themeToggle or #themeToggleMenu)
if isClean
add .theme-clean to container
set localStorage['cv-theme'] to 'clean'
if otherToggle exists set otherToggle's checked to true
else
remove .theme-clean from container
set localStorage['cv-theme'] to 'default'
if otherToggle exists set otherToggle's checked to false
end
end
-- Synchronized Hover for PDF Buttons
def syncPdfHover(show)
set fixedBtn to #download-button
set actionBarBtn to #action-bar-pdf-btn
set menuBtn to the first .menu-pdf-btn
if show
if fixedBtn exists add .pdf-hover-sync to fixedBtn
if actionBarBtn exists add .pdf-hover-sync to actionBarBtn
if menuBtn exists add .pdf-hover-sync to menuBtn
else
if fixedBtn exists remove .pdf-hover-sync from fixedBtn
if actionBarBtn exists remove .pdf-hover-sync from actionBarBtn
if menuBtn exists remove .pdf-hover-sync from menuBtn
end
end
-- Synchronized Hover for Print Buttons
def syncPrintHover(show)
set fixedBtn to #print-friendly-button
set actionBarBtn to the first .action-bar-print-btn
set menuBtn to the first .menu-print-btn
if show
if fixedBtn exists add .print-hover-sync to fixedBtn
if actionBarBtn exists add .print-hover-sync to actionBarBtn
if menuBtn exists add .print-hover-sync to menuBtn
else
if fixedBtn exists remove .print-hover-sync from fixedBtn
if actionBarBtn exists remove .print-hover-sync from actionBarBtn
if menuBtn exists remove .print-hover-sync from menuBtn
end
end
-- Zoom Control Highlight
def highlightZoomControl(show)
set zoomControl to #zoom-control
if show
if zoomControl exists add .zoom-highlight to zoomControl
else
if zoomControl exists remove .zoom-highlight from zoomControl
end
end
-- ==============================================================================
-- KEYBOARD SHORTCUTS
-- ==============================================================================
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>
templates/partials/widgets/download-button.html
+2 -6
View File
@@ -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}}
templates/partials/widgets/print-friendly-button.html
+2 -8
View File
@@ -6,14 +6,8 @@
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
add .print-hover-sync to me
add .print-hover-sync to .action-bar-print-btn
add .print-hover-sync to .menu-print-btn
on mouseleave
remove .print-hover-sync from me
remove .print-hover-sync from .action-bar-print-btn
remove .print-hover-sync from .menu-print-btn">
_="on mouseenter call syncPrintHover(true)
on mouseleave call syncPrintHover(false)">
<iconify-icon icon="mdi:leaf" width="28" height="28"></iconify-icon>
</button>
{{end}}
templates/partials/widgets/zoom-toggle-button.html
+2 -4
View File
@@ -5,10 +5,8 @@
class="fixed-btn zoom-toggle-btn no-print"
aria-label="{{if eq .Lang "es"}}Alternar control de zoom{{else}}Toggle zoom control{{end}}"
title="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}"
_="on mouseenter
add .zoom-highlight to #zoom-control
on mouseleave
remove .zoom-highlight from #zoom-control">
_="on mouseenter call highlightZoomControl(true)
on mouseleave call highlightZoomControl(false)">
<iconify-icon icon="mdi:magnify" width="28" height="28"></iconify-icon>
</button>
{{end}}