diff --git a/static/css/main.css b/static/css/main.css
index a5a516e..2953a59 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -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) {
diff --git a/static/hyperscript/functions._hs b/static/hyperscript/functions._hs
index 946e5f8..b2a8583 100644
--- a/static/hyperscript/functions._hs
+++ b/static/hyperscript/functions._hs
@@ -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
-- ==============================================================================
diff --git a/templates/partials/navigation/action-buttons.html b/templates/partials/navigation/action-buttons.html
index 51c3030..66fb3db 100644
--- a/templates/partials/navigation/action-buttons.html
+++ b/templates/partials/navigation/action-buttons.html
@@ -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)">
{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}
@@ -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)">
{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}
diff --git a/templates/partials/navigation/hamburger-menu.html b/templates/partials/navigation/hamburger-menu.html
index 67ee691..877397b 100644
--- a/templates/partials/navigation/hamburger-menu.html
+++ b/templates/partials/navigation/hamburger-menu.html
@@ -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)">
@@ -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)">
@@ -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)">
@@ -211,14 +182,8 @@
diff --git a/templates/partials/navigation/view-controls.html b/templates/partials/navigation/view-controls.html
index 67648f0..bc0cbfe 100644
--- a/templates/partials/navigation/view-controls.html
+++ b/templates/partials/navigation/view-controls.html
@@ -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)">
@@ -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)">
@@ -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)">
diff --git a/templates/partials/widgets/download-button.html b/templates/partials/widgets/download-button.html
index 76ad0de..c4c3363 100644
--- a/templates/partials/widgets/download-button.html
+++ b/templates/partials/widgets/download-button.html
@@ -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)">
{{end}}
diff --git a/templates/partials/widgets/print-friendly-button.html b/templates/partials/widgets/print-friendly-button.html
index a5feded..9f165fb 100644
--- a/templates/partials/widgets/print-friendly-button.html
+++ b/templates/partials/widgets/print-friendly-button.html
@@ -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)">
{{end}}
diff --git a/templates/partials/widgets/zoom-toggle-button.html b/templates/partials/widgets/zoom-toggle-button.html
index d3188ad..37a6bc9 100644
--- a/templates/partials/widgets/zoom-toggle-button.html
+++ b/templates/partials/widgets/zoom-toggle-button.html
@@ -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)">
{{end}}