Layer-Symbol: falscher Pfad in der App, zu klein in beiden (2026.8.30.12)
Drei Anlaeufe, die ersten beiden mein Fehler. Gemeldet war "Icon falsch im Knopf platziert". Ich habe die Zeichenflaeche gemessen, sie fuellt 20,9x15,6 des 24er-Rasters gegen 20x20 bis 24x22 bei den Nachbarn, und daraus auf "zu schwer und aussermittig" geschlossen - also verkleinert. Zwei Fehler darin: gemessen habe ich das Panel und geaendert habe ich beide, ohne das Symbol der App je selbst zu messen; und "fuellt weniger Flaeche als die Nachbarn" spricht fuer "wirkt kleiner", nicht dagegen. Nach der Ruecknahme im Panel zeigte die Messung der App den echten Fehler dort: ihr mapLayer-Pfad begann mit grossem M statt kleinem m. Beim ersten Befehl ist das gleichbedeutend, aendert aber alles danach - nach M gelten folgende Zahlenpaare als absolute Linien, nach m als relative. Der zweite Punkt sprang damit auf (-8.97,-5.66), weit aus dem Raster: das Symbol war verzerrt, nicht bloss falsch dimensioniert. Pfad wortgleich vom Panel uebernommen, alle vier Steuerungssymbole vergleichen sich jetzt zeichengleich. Damit stand die urspruengliche Meldung fuer sich und war schlicht richtig: die flache Form wirkt bei gleicher Kastengroesse kleiner. Beide zeichnen sie jetzt mit 26px statt 22px - dieselbe Loesung wie beim Oelwechsel-Icon der Servicebloecke, das aus demselben Grund 26px neben 20px bekommt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -29,8 +29,13 @@ const SAT_ZUSATZ = "© Esri"
|
||||
// Inspektion) — hier lokal, weil sie nur für die Kartensteuerung/den
|
||||
// Fahrzeugmarker gebraucht werden, nicht als allgemeine UI-Symbole.
|
||||
const CI = {
|
||||
/* Beginnt mit kleinem m. Hier stand ein grosses M - beim ersten Befehl
|
||||
ist das gleichbedeutend, aendert aber alles danach: nach M gelten die
|
||||
folgenden Zahlenpaare als absolute Linien, nach m als relative. Mit M
|
||||
sprang der zweite Punkt auf (-8.97,-5.66), also weit aus dem 24er-Raster
|
||||
heraus - das Symbol war dadurch verzerrt, nicht bloss zu gross. */
|
||||
mapLayer:
|
||||
'M11.7 19.4-8.97-5.66.54-.85 8.96 5.67c.17.1.37.1.54 0l8.96-5.67.54.85-8.97 5.66a1.5 1.5 0 0 1-1.6 0m.53-3.84c.17.1.37.1.54 0l8.3-5.25-8.3-5.23a.5.5 0 0 0-.54 0l-8.3 5.23zm-.53.84-9.64-6.09 9.64-6.08a1.5 1.5 0 0 1 1.6 0l9.64 6.08-9.64 6.1c-.49.3-1.11.3-1.6 0Z',
|
||||
'm11.7 19.4-8.97-5.66.54-.85 8.96 5.67c.17.1.37.1.54 0l8.96-5.67.54.85-8.97 5.66a1.5 1.5 0 0 1-1.6 0m.53-3.84c.17.1.37.1.54 0l8.3-5.25-8.3-5.23a.5.5 0 0 0-.54 0l-8.3 5.23zm-.53.84-9.64-6.09 9.64-6.08a1.5 1.5 0 0 1 1.6 0l9.64 6.08-9.64 6.1c-.49.3-1.11.3-1.6 0Z',
|
||||
carSearch:
|
||||
'M1 7.8a6.16 6.16 0 0 0 6.1 6.1h.4A5.7 5.7 0 0 0 13 7.91V7.9a6.1 6.1 0 0 0-5.91-6A5.93 5.93 0 0 0 1 7.8m-1 0C0 3.92 3.23.8 7.11.9a7.1 7.1 0 0 1 6.89 7c.06 2.33-1 4.44-2.73 5.71L14.8 19H20v1.5c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-7.8l-1.9-1.9-.04-.06a55 55 0 0 0-2.84-4.71c-1.42-.1-2.49-.17-3.2-.2l.04-1c.77.04 1.93.1 3.48.22l.24.02.14.2a55 55 0 0 1 2.99 4.93L24 12.3v8.2c0 .83-.67 1.5-1.5 1.5h-2a1.5 1.5 0 0 1-1.5-1.5V20h-3.55l1.67 2.54-.84.54L14.26 20 5 19.96v.54c0 .83-.67 1.5-1.5 1.5h-2A1.5 1.5 0 0 1 0 20.5v-7.08h1v7.08c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-1.54l9.6.02-3.17-4.83c-.87.45-1.85.72-2.92.75H7.1c-3.88 0-7-3.13-7.1-7.09zm5.47-2.75c1.86-.12 3.37-.2 4.52-.24l.03 1c-1.08.03-2.5.1-4.24.22L4.51 8c-.27.43-.6 1-1 1.7l-.87-.48c.4-.72.74-1.3 1.03-1.76q.6-.96 1.41-2.19l.14-.2z',
|
||||
gps: 'M12.5 3.51V6.5h-1V3.51a8.46 8.46 0 0 0-7.99 7.99H6.5v1H3.51a8.46 8.46 0 0 0 7.99 7.99V17.5h1v2.99a8.46 8.46 0 0 0 7.99-7.99H17.5v-1h2.99a8.46 8.46 0 0 0-7.99-7.99m0-1a9.46 9.46 0 0 1 8.99 8.99h2.01v1h-2.01a9.46 9.46 0 0 1-8.99 8.99v2.01h-1v-2.01a9.46 9.46 0 0 1-8.99-8.99H.5v-1h2.01a9.46 9.46 0 0 1 8.99-8.99V.5h1z',
|
||||
@@ -64,11 +69,6 @@ function ciIcon(d: string, px: number): string {
|
||||
return `<svg viewBox="0 0 24 24" width="${px}" height="${px}" fill="none" aria-hidden="true"><path fill="currentColor" d="${d}"/></svg>`
|
||||
}
|
||||
|
||||
/* Wie ciIcon, aber mit der Korrektur fuer das Layer-Symbol (siehe dort). */
|
||||
function ciIconZentriert(d: string, px: number): string {
|
||||
return `<svg viewBox="0 0 24 24" width="${px}" height="${px}" fill="none" aria-hidden="true"><g transform="translate(1.44 1.44) scale(0.88) translate(-0.55 0.2)"><path fill="currentColor" d="${d}"/></g></svg>`
|
||||
}
|
||||
|
||||
function fahrzeugMarkerHtml(px = 38): string {
|
||||
// Groessenwechsel wie fahrzeugMarkerSVG() im Panel: ab 34px die grosse
|
||||
// Zeichnung (48er-Raster), darunter die kleine (24er). Die Vorschaukarte der
|
||||
@@ -439,13 +439,13 @@ export function Standort() {
|
||||
onClick={() => setzeSatellit((s) => !s)}
|
||||
aria-pressed={satellit}
|
||||
aria-label={satellit ? "Satellitenansicht, zur Straßenkarte wechseln" : "Straßenkarte, zur Satellitenansicht wechseln"}
|
||||
/* Das Layer-Symbol ist als einziges der vier Kartenknoepfe nicht mittig in
|
||||
seinem eigenen 24er-Raster (Rand links 2,1 / rechts 1,1, gemessen ueber
|
||||
getBBox) und fuellt als gefuellte Form deutlich mehr Flaeche als die drei
|
||||
Kontur-Nachbarn. Die Verschiebung setzt seinen Mittelpunkt genau auf
|
||||
(12,12), der Faktor 0,88 nimmt ihm das Uebergewicht - dieselbe Behandlung
|
||||
wie beim Statistik-Tabsymbol. */
|
||||
dangerouslySetInnerHTML={{ __html: ciIconZentriert(CI.mapLayer, 22) }}
|
||||
/* Das Layer-Symbol ist flach: seine Zeichnung fuellt im 24er-Raster nur
|
||||
20,9 x 15,6, waehrend die drei Nachbarn 20x20 bis 24x22 einnehmen (alle
|
||||
per getBBox gemessen). Bei gleicher Kastengroesse wirkt es dadurch
|
||||
deutlich kleiner. 26px statt 22px gleichen das aus - dieselbe Loesung
|
||||
wie beim Oelwechsel-Icon der Servicebloecke, das aus demselben Grund
|
||||
26px statt 20px bekommt. */
|
||||
dangerouslySetInnerHTML={{ __html: ciIcon(CI.mapLayer, 26) }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user