fix: Mobile view improvements - accordion styling and modal centering

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
2025-11-22 16:23:05 +00:00
parent 219b83bfc0
commit 2eafb78954
22 changed files with 2207 additions and 68 deletions
@@ -0,0 +1,73 @@
+/**
+ * Scroll At-Bottom Handler
+ * Adds 'at-bottom' class to buttons and footer when user scrolls to page bottom
+ */
+
+(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 that need 'at-bottom' state
+        const buttons = document.querySelectorAll(
+            '.download-btn, .print-friendly-btn, .shortcuts-btn, ' +
+            '.info-button, .back-to-top, .color-theme-switcher'
+        );
+
+        if (buttons.length === 0) return;
+
+        // Throttle scroll events for better performance
+        let ticking = false;
+
+        function checkIfAtBottom() {
+            // Calculate if we're at the bottom of the page
+            // Allow 50px tolerance for smoother experience
+            const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+            const windowHeight = window.innerHeight;
+            const documentHeight = document.documentElement.scrollHeight;
+            const distanceFromBottom = documentHeight - (scrollPosition + windowHeight);
+
+            const isAtBottom = distanceFromBottom <= 50;
+
+            if (isAtBottom) {
+                // Add 'at-bottom' class to all buttons and footer
+                buttons.forEach(btn => btn.classList.add('at-bottom'));
+                footer.classList.add('at-bottom');
+            } else {
+                // Remove 'at-bottom' class from all buttons and footer
+                buttons.forEach(btn => btn.classList.remove('at-bottom'));
+                footer.classList.remove('at-bottom');
+            }
+        }
+
+        function onScroll() {
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    checkIfAtBottom();
+                    ticking = false;
+                });
+                ticking = true;
+            }
+        }
+
+        // Check initial state
+        checkIfAtBottom();
+
+        // Listen to scroll events
+        window.addEventListener('scroll', onScroll, { passive: true });
+
+        // Also check on resize (mobile orientation changes, etc.)
+        window.addEventListener('resize', () => {
+            setTimeout(checkIfAtBottom, 100);
+        });
+    }
+})();