your personal website on atproto - mirror
blento.app
Merge pull request #182 from unbedenklich/fixMapCard
fixed attribution
+72
-5
+2
-1
.claude/settings.local.json
+2
-1
.claude/settings.local.json
+68
-2
src/lib/cards/core/MapCard/Map.svelte
+68
-2
src/lib/cards/core/MapCard/Map.svelte
···
5
5
let { item = $bindable() }: { item: Item } = $props();
6
6
7
7
let center = $state({ lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) });
8
+
let showAttribution = $state(false);
8
9
</script>
9
10
10
11
<div class="absolute inset-0 isolate h-full w-full">
···
13
14
style="https://tiles.openfreemap.org/styles/liberty"
14
15
zoom={item.cardData.zoom}
15
16
{center}
16
-
attributionControl={{ compact: true }}
17
+
attributionControl={false}
17
18
dragPan={false}
18
19
dragRotate={false}
19
20
keyboard={false}
···
23
24
pitchWithRotate={false}
24
25
touchPitch={false}
25
26
>
26
-
<Projection type={'globe'} />
27
+
<Projection type="globe" />
27
28
28
29
<Marker bind:lnglat={center}>
29
30
{#snippet content()}
···
33
34
{/snippet}
34
35
</Marker>
35
36
</MapLibre>
37
+
38
+
{#snippet infoIcon()}
39
+
<svg
40
+
xmlns="http://www.w3.org/2000/svg"
41
+
width="24"
42
+
height="24"
43
+
fill-rule="evenodd"
44
+
viewBox="0 0 20 20"
45
+
>
46
+
<path
47
+
d="M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0"
48
+
/>
49
+
</svg>
50
+
{/snippet}
51
+
52
+
{#snippet attributionText()}
53
+
<a
54
+
href="https://openfreemap.org"
55
+
target="_blank"
56
+
rel="noopener noreferrer"
57
+
class="text-black/75 no-underline hover:underline"
58
+
onclick={(e) => e.stopPropagation()}>OpenFreeMap</a
59
+
>
60
+
<a
61
+
href="https://openmaptiles.org"
62
+
target="_blank"
63
+
rel="noopener noreferrer"
64
+
class="text-black/75 no-underline hover:underline"
65
+
onclick={(e) => e.stopPropagation()}>© OpenMapTiles</a
66
+
>
67
+
Data from
68
+
<a
69
+
href="https://www.openstreetmap.org/copyright"
70
+
target="_blank"
71
+
rel="noopener noreferrer"
72
+
class="text-black/75 no-underline hover:underline"
73
+
onclick={(e) => e.stopPropagation()}>OpenStreetMap</a
74
+
>
75
+
{/snippet}
76
+
77
+
{#if showAttribution}
78
+
<div
79
+
class="absolute right-2.5 bottom-2.5 z-10 rounded-xl bg-white text-black"
80
+
style="width: calc(100% - 20px); max-width: 12rem;"
81
+
>
82
+
<button
83
+
class="float-right flex size-6 cursor-pointer items-center justify-center rounded-full shadow-[0_0_6px_rgba(59,130,246,0.6)]"
84
+
onclick={() => (showAttribution = false)}
85
+
aria-label="Toggle attribution"
86
+
>
87
+
{@render infoIcon()}
88
+
</button>
89
+
<div class="p-2 text-left text-xs leading-snug text-black/75">
90
+
{@render attributionText()}
91
+
</div>
92
+
</div>
93
+
{:else}
94
+
<button
95
+
class="absolute right-2.5 bottom-2.5 z-10 flex size-6 items-center justify-center rounded-full bg-white text-black"
96
+
onclick={() => (showAttribution = true)}
97
+
aria-label="Toggle attribution"
98
+
>
99
+
{@render infoIcon()}
100
+
</button>
101
+
{/if}
36
102
</div>
+1
-1
src/lib/cards/core/SectionCard/EditingSectionCard.svelte
+1
-1
src/lib/cards/core/SectionCard/EditingSectionCard.svelte
···
9
9
10
10
<div
11
11
class={[
12
-
'line-clamp-1 inline-flex h-full w-full rounded-md py-2 px-4 font-semibold',
12
+
'line-clamp-1 inline-flex h-full w-full rounded-md px-4 py-2 font-semibold',
13
13
textAlignClasses[item.cardData.textAlign as string],
14
14
verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
15
15
textSizeClasses[(item.cardData.textSize ?? 1) as number]
+1
-1
src/lib/cards/core/SectionCard/SectionCard.svelte
+1
-1
src/lib/cards/core/SectionCard/SectionCard.svelte
···
12
12
13
13
<div
14
14
class={[
15
-
'line-clamp-1 inline-flex h-full w-full rounded-md py-2 px-4 font-semibold',
15
+
'line-clamp-1 inline-flex h-full w-full rounded-md px-4 py-2 font-semibold',
16
16
textAlignClasses[item.cardData.textAlign as string],
17
17
verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
18
18
textSizeClasses[(item.cardData.textSize ?? 1) as number]