ppfeiffer/MeshDD-Bot
1
0
Fork 0
Code Issues 7 Pull requests Actions Packages Projects Releases Wiki Activity

style(map): Kartenlegende neu gestaltet (theme-aware, kompakt)

Browse source 
CSS-Variablen für Light/Dark-Mode, Uppercase-Sektionsköpfe,
kein <strong>+<hr> mehr, weicherer Schatten.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ppfeiffer 2026-02-19 17:35:04 +01:00
parent edfe73b8ca
commit 6adc3cedcf
4 changed files with 51 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
CHANGELOG.md
View file

@ -1,5 +1,12 @@
# Changelog # Changelog
## [0.8.8] - 2026-02-19
### Changed
- **Kartenlegende neu gestaltet**: Theme-aware (CSS-Variablen für Light/Dark-Mode),
kompaktes Design mit kleinen Uppercase-Abschnittsköpfen statt `<strong>` + `<hr>`,
weicherer Schatten, angepasste Altersdots für beide Themes.
## [0.8.7] - 2026-02-19 ## [0.8.7] - 2026-02-19
### Fixed ### Fixed

2
config.yaml
View file

@ -1,4 +1,4 @@
version: "0.8.7" version: "0.8.8"
bot: bot:
name: "MeshDD-Bot" name: "MeshDD-Bot"

31
static/css/style.css
View file

@ -263,20 +263,31 @@
.node-tooltip-wrap { padding: 0; } .node-tooltip-wrap { padding: 0; }
.legend { .legend {
background: rgba(255, 255, 255, .95); background: var(--tblr-bg-surface, var(--bs-body-bg, #fff));
padding: 10px 14px; border: 1px solid var(--tblr-border-color, var(--bs-border-color, rgba(0,0,0,.12)));
border-radius: 6px; border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,.3); box-shadow: 0 2px 10px rgba(0,0,0,.12);
font-size: 13px; padding: 7px 10px;
line-height: 1.8; font-size: 11.5px;
line-height: 1.4;
min-width: 100px;
color: var(--bs-body-color);
} }
.legend strong { display: block; margin-bottom: 4px; color: #333; } .legend-section {
.legend-item { display: flex; align-items: center; gap: 8px; } font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--bs-secondary-color);
margin: 5px 0 3px;
}
.legend-section:first-child { margin-top: 0; }
.legend-item { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.legend-dot { .legend-dot {
width: 12px; width: 10px;
height: 12px; height: 10px;
border-radius: 50%; border-radius: 50%;
border: 1px solid rgba(0,0,0,.2); border: 1px solid rgba(128,128,128,.2);
flex-shrink: 0; flex-shrink: 0;
} }

38
static/js/map.js
View file

@ -143,24 +143,30 @@ function connectWebSocket() {
const legend = L.control({ position: 'topleft' }); const legend = L.control({ position: 'topleft' });
legend.onAdd = function () { legend.onAdd = function () {
const div = L.DomUtil.create('div', 'legend'); const div = L.DomUtil.create('div', 'legend');
div.innerHTML = '<strong>Hops</strong>'; const hopEntries = [
const entries = [ [0, 'Direkt'],
[0, 'Direkt'], [1, '1 Hop'],
[1, '1 Hop'], [2, '2 Hops'],
[2, '2 Hops'], [3, '3 Hops'],
[3, '3 Hops'], [4, '4 Hops'],
[4, '4 Hops'], [5, '5+ Hops'],
[5, '5+ Hops'],
[null, 'Unbekannt'], [null, 'Unbekannt'],
]; ];
entries.forEach(([hop, label]) => { const ageEntries = [
const color = hop != null ? (hopColors[hop] || hopColorDefault) : hopColorDefault; ['rgba(80,80,80,.95)', '< 24h'],
div.innerHTML += `<div class="legend-item"><span class="legend-dot" style="background:${color}"></span>${label}</div>`; ['rgba(80,80,80,.45)', '24–48h'],
}); ['rgba(80,80,80,.18)', '48–72h'],
div.innerHTML += `<hr style="margin:5px 0;border-color:#aaa"><strong>Alter</strong> ];
<div class="legend-item"><span class="legend-dot" style="background:rgba(128,128,128,.9)"></span>&lt; 24h</div> div.innerHTML =
<div class="legend-item"><span class="legend-dot" style="background:rgba(128,128,128,.45)"></span>24–48h</div> '<div class="legend-section">Hops</div>' +
<div class="legend-item"><span class="legend-dot" style="background:rgba(128,128,128,.2)"></span>48–72h</div>`; hopEntries.map(([hop, label]) => {
const color = hop != null ? (hopColors[hop] || hopColorDefault) : hopColorDefault;
return `<div class="legend-item"><span class="legend-dot" style="background:${color}"></span>${label}</div>`;
}).join('') +
'<div class="legend-section">Alter</div>' +
ageEntries.map(([color, label]) =>
`<div class="legend-item"><span class="legend-dot" style="background:${color}"></span>${label}</div>`
).join('');
return div; return div;
}; };