2eafb78954
Fixed two critical mobile view issues: 1. Extended CV Sidebar Accordion: - Updated sidebar.html to use native <details> element (was div with onclick) - Styled accordion header to match CV title badges dark theme (#303030) - Applied consistent styling: dark gray background, light text, uppercase, no spacing - Result: Sidebars now collapse/expand properly with native HTML functionality 2. PDF Download Modal Centering: - Added JavaScript-based centering for mobile viewports (≤768px) - Uses inline styles with !important flag to override browser defaults - Updated download button to call openPdfModal() function - Result: Modal is perfectly centered on mobile (0px offset) Technical notes: - Modal centering required setProperty() with 'important' flag - Accordion matches cv-title-badges-header style exactly - All tests passing: accordion toggle, modal centering Files modified: - templates/partials/cv/sidebar.html - static/css/05-responsive/_breakpoints.css - static/js/main.js - templates/partials/widgets/download-button.html Tests added: - tests/mjs/43-mobile-accordion-and-modal-test.mjs - tests/mjs/46-visual-accordion-style-test.mjs
47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
/**
|
|
* Footer and Button Bar Interaction
|
|
* Makes button bar semi-transparent when hovering over footer area
|
|
* so footer content remains visible
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Wait for DOM to be ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
|
|
function init() {
|
|
const footer = document.querySelector('footer.no-print');
|
|
if (!footer) return;
|
|
|
|
// Get all fixed buttons
|
|
const buttons = document.querySelectorAll(
|
|
'.download-btn, .print-friendly-btn, .shortcuts-btn, ' +
|
|
'.info-button, .back-to-top, .color-theme-switcher'
|
|
);
|
|
|
|
// Add hover listeners to footer
|
|
footer.addEventListener('mouseenter', () => {
|
|
// Add class to footer itself for text enlargement
|
|
footer.classList.add('footer-hovered');
|
|
// Add class to buttons for transparency
|
|
buttons.forEach(btn => {
|
|
btn.classList.add('footer-hovered');
|
|
});
|
|
});
|
|
|
|
footer.addEventListener('mouseleave', () => {
|
|
// Remove class from footer
|
|
footer.classList.remove('footer-hovered');
|
|
// Remove class from buttons
|
|
buttons.forEach(btn => {
|
|
btn.classList.remove('footer-hovered');
|
|
});
|
|
});
|
|
}
|
|
})();
|