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
## [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
### Fixed

2
config.yaml
View file

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

31
static/css/style.css
View file

@ -263,20 +263,31 @@
.node-tooltip-wrap { padding: 0; }
.legend {
background: rgba(255, 255, 255, .95);
padding: 10px 14px;
background: var(--tblr-bg-surface, var(--bs-body-bg, #fff));
border: 1px solid var(--tblr-border-color, var(--bs-border-color, rgba(0,0,0,.12)));
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
font-size: 13px;
line-height: 1.8;
box-shadow: 0 2px 10px rgba(0,0,0,.12);
padding: 7px 10px;
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-item { display: flex; align-items: center; gap: 8px; }
.legend-section {
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 {
width: 12px;
height: 12px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.2);
border: 1px solid rgba(128,128,128,.2);
flex-shrink: 0;
}

38
static/js/map.js
View file

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