Fix Signal Strength CSS Class Inconsistency #12

New issue

Closed

opened 2025-08-24 18:17:44 +02:00 by olemd · 1 comment

olemd commented

2025-08-24 18:17:44 +02:00

Owner

Description

There's an inconsistency between CSS class names defined in style.css and the class names used in JavaScript code for signal strength indicators.

Current Issue

CSS defines: .rssi-strong, .rssi-good, .rssi-weak, .rssi-poor
JavaScript likely uses: .signal-strong, .signal-good, .signal-weak, .signal-poor
This results in signal strength colors not being applied correctly

Impact

Signal strength indicators don't show proper colors
Users can't visually distinguish signal quality levels
Affects both aircraft markers and coverage visualization

Expected Fix

Either:

Update CSS classes to match JavaScript naming (signal-*)
Update JavaScript to use CSS naming (rssi-*)
Add both sets of classes for backward compatibility

Investigation Needed

Audit all signal strength classification code
Verify which naming convention is used where
Ensure consistency across map markers, tooltips, and coverage views

Files to Check

assets/static/css/style.css - CSS class definitions
assets/static/js/modules/map-manager.js - Signal strength classification
assets/static/js/app.js - Aircraft marker styling
Any other files using signal strength classes

Labels

bug, css, frontend

## Description There's an inconsistency between CSS class names defined in style.css and the class names used in JavaScript code for signal strength indicators. ## Current Issue - CSS defines: .rssi-strong, .rssi-good, .rssi-weak, .rssi-poor - JavaScript likely uses: .signal-strong, .signal-good, .signal-weak, .signal-poor - This results in signal strength colors not being applied correctly ## Impact - Signal strength indicators don't show proper colors - Users can't visually distinguish signal quality levels - Affects both aircraft markers and coverage visualization ## Expected Fix Either: 1. Update CSS classes to match JavaScript naming (signal-*) 2. Update JavaScript to use CSS naming (rssi-*) 3. Add both sets of classes for backward compatibility ## Investigation Needed - Audit all signal strength classification code - Verify which naming convention is used where - Ensure consistency across map markers, tooltips, and coverage views ## Files to Check - assets/static/css/style.css - CSS class definitions - assets/static/js/modules/map-manager.js - Signal strength classification - assets/static/js/app.js - Aircraft marker styling - Any other files using signal strength classes ## Labels bug, css, frontend

olemd referenced this issue

2025-08-24 18:21:03 +02:00

Aircraft markers show as plain circles despite known type #14

olemd referenced this issue from a commit

2025-09-01 19:44:15 +02:00

fix: Correct signal strength CSS class names to match JavaScript - resolves #12

olemd closed this issue

2025-09-01 19:44:15 +02:00

olemd commented

2025-09-01 19:44:26 +02:00

Author

Owner

Fixed by aligning CSS class names with JavaScript implementation.

Problem: CSS defined classes as .rssi-strong, .rssi-good, etc. while JavaScript used .signal-strong, .signal-good, etc.

Solution: Updated CSS classes to match JavaScript naming (signal-*) in commit 1bf030d.

Result: Signal strength indicators now display proper colors:

🟢 Strong signals: bright green
🟡 Good signals: yellow
🟠 Weak signals: orange
🔴 Poor signals: red

The fix ensures signal strength visual indicators work correctly in both aircraft tables and coverage views.

Fixed by aligning CSS class names with JavaScript implementation. **Problem**: CSS defined classes as `.rssi-strong`, `.rssi-good`, etc. while JavaScript used `.signal-strong`, `.signal-good`, etc. **Solution**: Updated CSS classes to match JavaScript naming (`signal-*`) in commit 1bf030d. **Result**: Signal strength indicators now display proper colors: - 🟢 Strong signals: bright green - 🟡 Good signals: yellow - 🟠 Weak signals: orange - 🔴 Poor signals: red The fix ensures signal strength visual indicators work correctly in both aircraft tables and coverage views.