Complete Beast format implementation with enhanced features and fixes #19

Merged
olemd merged 38 commits from beast-format-refactor into main 2025-08-24 20:50:38 +02:00
3 changed files with 20 additions and 6 deletions
Showing only changes of commit 6437d8e8a3 - Show all commits

Improve text visibility in aircraft popups

Enhanced popup text contrast and readability:
- Added text-shadow to all values for better contrast against dark background
- Properly handle zero/null values (e.g., Track: 0° now shows instead of N/A)
- Style N/A values with slightly dimmed gray (#aaaaaa) but still clearly visible
- Add 'no-data' class to distinguish missing data from actual zero values
- Ensure all text has strong white color with !important declarations

This fixes visibility issues where some values appeared too faint or were
incorrectly treated as missing when they were actually zero.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Ole-Morten Duesund 2025-08-24 15:03:33 +02:00

View file

@ -449,6 +449,20 @@ body {
color: #ffffff !important;
}
/* Ensure all values are visible with strong contrast */
.aircraft-popup .value,
.aircraft-popup .detail-row,
.aircraft-popup .detail-item .value {
color: #ffffff !important;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* Style for N/A or empty values - still visible but slightly dimmed */
.detail-item .value.no-data {
color: #aaaaaa !important;
font-style: italic;
}
@media (max-width: 768px) {
.header {
padding: 0.75rem 1rem;

View file

@ -312,27 +312,27 @@ export class AircraftManager {
<div class="detail-grid">
<div class="detail-item">
<div class="label">Altitude:</div>
<div class="value">${altitude ? `${altitude} ft | ${altitudeM} m` : 'N/A'}</div>
<div class="value${!altitude ? ' no-data' : ''}">${altitude ? `${altitude} ft | ${altitudeM} m` : 'N/A'}</div>
</div>
<div class="detail-item">
<div class="label">Squawk:</div>
<div class="value">${aircraft.Squawk || 'N/A'}</div>
<div class="value${!aircraft.Squawk ? ' no-data' : ''}">${aircraft.Squawk || 'N/A'}</div>
</div>
<div class="detail-item">
<div class="label">Speed:</div>
<div class="value">${aircraft.GroundSpeed ? `${aircraft.GroundSpeed} kt | ${speedKmh} km/h` : 'N/A'}</div>
<div class="value${!aircraft.GroundSpeed ? ' no-data' : ''}">${aircraft.GroundSpeed !== undefined && aircraft.GroundSpeed !== null ? `${aircraft.GroundSpeed} kt | ${speedKmh} km/h` : 'N/A'}</div>
</div>
<div class="detail-item">
<div class="label">Track:</div>
<div class="value">${aircraft.Track ? `${aircraft.Track}°` : 'N/A'}</div>
<div class="value${aircraft.Track === undefined || aircraft.Track === null ? ' no-data' : ''}">${aircraft.Track !== undefined && aircraft.Track !== null ? `${aircraft.Track}°` : 'N/A'}</div>
</div>
<div class="detail-item">
<div class="label">V/Rate:</div>
<div class="value">${aircraft.VerticalRate ? `${aircraft.VerticalRate} ft/min` : 'N/A'}</div>
<div class="value${!aircraft.VerticalRate ? ' no-data' : ''}">${aircraft.VerticalRate ? `${aircraft.VerticalRate} ft/min` : 'N/A'}</div>
</div>
<div class="detail-item">
<div class="label">Distance:</div>
<div class="value">${distanceKm} km</div>
<div class="value${distance ? '' : ' no-data'}">${distanceKm !== 'N/A' ? `${distanceKm} km` : 'N/A'}</div>
</div>
</div>

BIN
ux.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB