Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: add white stroke to 'north arrow' to accomodate for dark background maps

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-08-19 16:53:11 +02:00
parent 40caf67084
commit b07ebf0cac
2 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
assets/svg/north_arrow.svg
View file

@ -24,8 +24,8 @@
inkscape:deskcolor="#d1d1d1"
showguides="true"
inkscape:zoom="31.809268"
inkscape:cx="10.374335"
inkscape:cy="10.327179"
inkscape:cx="7.4506587"
inkscape:cy="14.445475"
inkscape:window-width="1920"
inkscape:window-height="1005"
inkscape:window-x="0"
@ -35,13 +35,13 @@
<g
id="g6"
transform="matrix(1.3906291,1.4182437,-1.4182437,1.3906291,10.496254,-26.783855)"
style="fill:#000000;fill-opacity:1">
style="fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-opacity:0.82973289;stroke-width:0.40276519;stroke-dasharray:none">
<path
fill="#dd2e44"
d="M 18.378552,14.993974 9.879,9.886 l 5.123325,8.551246 1.328258,-2.074158 z"
id="path5"
sodipodi:nodetypes="ccccc"
style="fill:#000000;fill-opacity:1" />
style="fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-opacity:0.82973289;stroke-width:0.40276519;stroke-dasharray:none" />
</g>
<path
style="font-size:10.2423px;line-height:1;font-family:KacstDigital;-inkscape-font-specification:'KacstDigital, Normal';fill:#ffffff;fill-opacity:1;stroke:#fffbff;stroke-width:0.46;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

2
src/assets/svg/North_arrow.svelte
View file

@ -1,4 +1,4 @@
<script>
export let color = "#000000"
</script>
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown on:focus viewBox="0 0 19.998842 21.478794" version="1.1" id="svg6" sodipodi:docname="north_arrow.svg" width="19.998842" height="21.478794" inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs6" /> <sodipodi:namedview id="namedview6" pagecolor="#ffffff" bordercolor="#999999" borderopacity="1" inkscape:showpageshadow="2" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showguides="true" inkscape:zoom="31.809268" inkscape:cx="10.374335" inkscape:cy="10.327179" inkscape:window-width="1920" inkscape:window-height="1005" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="svg6" /> <g id="g6" transform="matrix(1.3906291,1.4182437,-1.4182437,1.3906291,10.496254,-26.783855)" style="fill:{color};fill-opacity:1"> <path fill="#dd2e44" d="M 18.378552,14.993974 9.879,9.886 l 5.123325,8.551246 1.328258,-2.074158 z" id="path5" sodipodi:nodetypes="ccccc" style="fill:{color};fill-opacity:1" /> </g> <path style="font-size:10.2423px;line-height:1;font-family:KacstDigital;-inkscape-font-specification:'KacstDigital, Normal';fill:#ffffff;fill-opacity:1;stroke:#fffbff;stroke-width:0.46;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 8.3448502,13.390069 H 9.141387 l 1.938629,3.657626 v -3.657626 h 0.573976 v 4.372166 H 10.857453 L 8.9188256,14.104609 v 3.657626 H 8.3448502 Z" id="text6" aria-label="N" /> </svg>
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown on:focus viewBox="0 0 19.998842 21.478794" version="1.1" id="svg6" sodipodi:docname="north_arrow.svg" width="19.998842" height="21.478794" inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs6" /> <sodipodi:namedview id="namedview6" pagecolor="#ffffff" bordercolor="#999999" borderopacity="1" inkscape:showpageshadow="2" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showguides="true" inkscape:zoom="31.809268" inkscape:cx="7.4506587" inkscape:cy="14.445475" inkscape:window-width="1920" inkscape:window-height="1005" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="svg6" /> <g id="g6" transform="matrix(1.3906291,1.4182437,-1.4182437,1.3906291,10.496254,-26.783855)" style="fill:{color};fill-opacity:1;stroke:#ffffff;stroke-opacity:0.82973289;stroke-width:0.40276519;stroke-dasharray:none"> <path fill="#dd2e44" d="M 18.378552,14.993974 9.879,9.886 l 5.123325,8.551246 1.328258,-2.074158 z" id="path5" sodipodi:nodetypes="ccccc" style="fill:{color};fill-opacity:1;stroke:#ffffff;stroke-opacity:0.82973289;stroke-width:0.40276519;stroke-dasharray:none" /> </g> <path style="font-size:10.2423px;line-height:1;font-family:KacstDigital;-inkscape-font-specification:'KacstDigital, Normal';fill:#ffffff;fill-opacity:1;stroke:#fffbff;stroke-width:0.46;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 8.3448502,13.390069 H 9.141387 l 1.938629,3.657626 v -3.657626 h 0.573976 v 4.372166 H 10.857453 L 8.9188256,14.104609 v 3.657626 H 8.3448502 Z" id="text6" aria-label="N" /> </svg>