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

fix: Differentiate zoom and info button colors, fix button visibility in responsive mode

Browse Source 
Issues fixed:
1. Zoom button now uses purple color (rgba(155, 89, 182, 0.7)) instead of blue
2. Info button keeps blue color (rgba(52, 152, 219, 0.7))
3. Both buttons now show distinct colors in default state, not just on hover
4. Device detection now considers viewport width, not just user agent
5. Buttons no longer hide in responsive mode at desktop viewport sizes

Changes:
- Updated zoom-toggle-btn to use purple background color
- Updated info-button to use blue background color (explicit, not var)
- Modified device-detection.js to check viewport width (≤900px) in addition to UA
- Added resize listener to update device class dynamically
- Created test (67-button-colors-and-visibility-test.mjs) to verify fixes

Testing:
- Desktop (1278px): All buttons visible with distinct colors
- Mobile (375px): Zoom/shortcuts hidden, core buttons visible
- Device detection now viewport-aware (prevents hiding at desktop sizes)
This commit is contained in:
juanatsap
2025-11-25 06:41:56 +00:00
parent 0be8972429
commit da483ae9f1
4 changed files with 311 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_buttons.css
+4 -4
View File
@@ -11,8 +11,8 @@
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar);
color: white; /* Match other buttons when inactive */
background: rgba(155, 89, 182, 0.7); /* Purple with transparency - distinct from info button blue */
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
@@ -29,12 +29,12 @@
opacity: 1;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
background: #3498db; /* Blue hover */
background: #9b59b6; /* Purple hover - distinct from info button blue */
}
.zoom-toggle-btn.at-bottom {
opacity: 1;
background: #3498db; /* Blue - matches hover */
background: #9b59b6; /* Purple - matches hover, distinct from info button */
}
/* No special styling for active state - button looks same whether zoom is on or off */
static/css/04-interactive/_scroll-behavior.css
+1 -1
View File
@@ -78,7 +78,7 @@
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar);
background: rgba(52, 152, 219, 0.7); /* Blue with transparency - distinct from zoom purple */
color: white;
border: none;
border-radius: 50%;
static/js/device-detection.js
+27 -9
View File
@@ -2,19 +2,37 @@
* DEVICE DETECTION
* Detects real mobile devices vs desktop browser in mobile view
* Adds 'is-mobile-device' class to body for styling differences
* Now also considers viewport width to avoid hiding buttons in responsive mode at desktop sizes
*/
(function() {
// Check if user agent indicates a real mobile device
const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
function updateDeviceClass() {
// Check if user agent indicates a real mobile device
const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
// Also check for touch support (additional indicator)
const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
// Also check for touch support (additional indicator)
const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
// Consider it a real mobile device if both conditions are met
if (isMobileDevice && hasTouch) {
document.documentElement.classList.add('is-mobile-device');
} else {
document.documentElement.classList.add('is-desktop');
// Check viewport width - only consider it a mobile device if viewport is also mobile-sized
const isMobileViewport = window.innerWidth <= 900;
// Consider it a real mobile device if ALL three conditions are met:
// 1. Mobile user agent
// 2. Touch support
// 3. Mobile viewport width (≤900px)
// This prevents hiding buttons in responsive mode at desktop sizes
if (isMobileDevice && hasTouch && isMobileViewport) {
document.documentElement.classList.remove('is-desktop');
document.documentElement.classList.add('is-mobile-device');
} else {
document.documentElement.classList.remove('is-mobile-device');
document.documentElement.classList.add('is-desktop');
}
}
// Run on load
updateDeviceClass();
// Re-check on resize (for responsive mode testing)
window.addEventListener('resize', updateDeviceClass);
})();