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

fix: implement complete hover synchronization for PDF/Print buttons

Browse Source 
CRITICAL BUG FIX: Hover states now sync between action bar and hamburger menu

Changes:
1. Added mouseenter/mouseleave handlers to menu PDF button
   - templates/partials/navigation/hamburger-menu.html:178-181
   - Added .menu-pdf-btn class for targeting
   - Added hyperscript hover sync events

2. Updated syncPdfHover() function
   - static/js/cv-functions.js:71-82
   - Now selects both .pdf-btn and .menu-pdf-btn
   - Both buttons get .pdf-hover-sync class on hover

3. Updated syncPrintHover() function
   - static/js/cv-functions.js:88-99
   - Now selects both .print-btn and .menu-print-btn
   - Both buttons get .print-hover-sync class on hover

4. Added CSS for menu PDF button hover sync
   - static/css/main.css:2690-2700
   - .menu-pdf-btn.pdf-hover-sync styling (white bg, red icon)
   - Matches action bar PDF button hover state

5. Created comprehensive hover sync test
   - tests/mjs/8-hover-sync.test.mjs
   - Tests all 4 hover scenarios (bar→menu, menu→bar for both buttons)
   - Validates event handlers and CSS class application
   - Manual verification instructions included

Behavior now correct:
✅ Hovering action bar PDF button highlights menu PDF button
✅ Hovering action bar Print button highlights menu Print button
✅ Hovering menu PDF button highlights action bar PDF button
✅ Hovering menu Print button highlights action bar Print button

Fixes documented bug from PROJECT-MEMORY.md Section 3.
This commit is contained in:
juanatsap
2025-11-17 14:35:32 +00:00
parent fba52727bc
commit f87a1a5c28
4 changed files with 326 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/cv-functions.js
+4 -2
View File
@@ -69,7 +69,8 @@ function toggleTheme(isClean) {
* @param {boolean} show - true to add hover class, false to remove
*/
function syncPdfHover(show) {
const pdfButtons = document.querySelectorAll('.pdf-btn');
// Select both action bar PDF button and menu PDF button
const pdfButtons = document.querySelectorAll('.pdf-btn, .menu-pdf-btn');
pdfButtons.forEach(button => {
if (show) {
@@ -85,7 +86,8 @@ function syncPdfHover(show) {
* @param {boolean} show - true to add hover class, false to remove
*/
function syncPrintHover(show) {
const printButtons = document.querySelectorAll('.print-btn');
// Select both action bar Print button and menu Print button
const printButtons = document.querySelectorAll('.print-btn, .menu-print-btn');
printButtons.forEach(button => {
if (show) {