Skip to content

Commit e7fd729

Browse files
matthewgallclaude
andcommitted
fix: enhance statistics button visual state management
- Update hover events to respect active/inactive states - Improve touch handlers for mobile devices - Force inline styles in updateStatsButtonState() to override conflicts - Ensure consistent visual feedback matching heatmap button behavior 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent ddb63ab commit e7fd729

1 file changed

Lines changed: 26 additions & 7 deletions

File tree

public/js/price-analytics.js

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -865,12 +865,20 @@ class PriceAnalytics {
865865
`;
866866

867867
button.addEventListener('mouseenter', () => {
868-
button.style.background = 'rgba(255, 255, 255, 1)';
868+
if (this.overlayVisible) {
869+
button.style.background = 'rgba(52, 152, 219, 1)';
870+
} else {
871+
button.style.background = 'rgba(255, 255, 255, 1)';
872+
}
869873
button.style.transform = 'scale(1.05)';
870874
});
871875

872876
button.addEventListener('mouseleave', () => {
873-
button.style.background = 'rgba(255, 255, 255, 0.9)';
877+
if (this.overlayVisible) {
878+
button.style.background = 'rgba(52, 152, 219, 0.9)';
879+
} else {
880+
button.style.background = 'rgba(255, 255, 255, 0.9)';
881+
}
874882
button.style.transform = 'scale(1)';
875883
});
876884

@@ -894,8 +902,13 @@ class PriceAnalytics {
894902

895903
button.addEventListener('touchend', (e) => {
896904
e.preventDefault();
897-
const isActive = this.overlayVisible;
898-
button.style.background = isActive ? 'rgba(52, 152, 219, 0.9)' : 'rgba(255, 255, 255, 0.9)';
905+
if (this.overlayVisible) {
906+
button.style.background = 'rgba(52, 152, 219, 0.9)';
907+
button.style.color = 'white';
908+
} else {
909+
button.style.background = 'rgba(255, 255, 255, 0.9)';
910+
button.style.color = 'black';
911+
}
899912
button.style.transform = 'scale(1)';
900913
});
901914

@@ -1277,15 +1290,21 @@ class PriceAnalytics {
12771290

12781291
console.log('📊 Updating stats button - overlayVisible:', isActive);
12791292

1280-
// Use CSS classes to override any hover/focus styles
1293+
// Use both CSS classes and inline styles to ensure visibility
12811294
if (isActive) {
12821295
button.classList.remove('inactive');
12831296
button.classList.add('active');
1284-
console.log('📊 Added active class to stats button');
1297+
// Force inline styles to override any conflicts
1298+
button.style.background = 'rgba(52, 152, 219, 0.9)';
1299+
button.style.color = 'white';
1300+
console.log('📊 Added active class and styles to stats button');
12851301
} else {
12861302
button.classList.remove('active');
12871303
button.classList.add('inactive');
1288-
console.log('📊 Added inactive class to stats button');
1304+
// Force inline styles to override any conflicts
1305+
button.style.background = 'rgba(255, 255, 255, 0.9)';
1306+
button.style.color = 'black';
1307+
console.log('📊 Added inactive class and styles to stats button');
12891308
}
12901309

12911310
console.log('📊 Stats button classes:', button.className);

0 commit comments

Comments
 (0)