Joururi/leim-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stylized popup links

Browse Source
This commit is contained in:
Alexis
2023-10-14 14:23:43 +02:00
parent 02b63a3748
commit 1f644d1586
2 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/assets/scss/_leaflet.scss
View File

@@ -13,13 +13,29 @@
border-radius: .25rem; border-radius: .25rem;
.leaflet-popup-content { .leaflet-popup-content {
strong { .title {
margin-bottom: .25em; display: block;
font-weight: 600;
text-underline-offset: 2px;
text-decoration: underline;
}
a { strong.title {
text-underline-offset: 2px; color: #16a34a;
text-decoration: underline; }
}
a.title:hover {
text-decoration: none;
color: #16a34a;
}
p {
}
> * + * {
margin: 0;
margin-top: .4em;
} }
} }
} }

21
src/components/maps/WorldMap.astro
View File

@@ -89,15 +89,22 @@ for (let i = 0; i < markers.length; i++) {
} }
const marker = L.marker(coords, { icon: markerIcon }).addTo(map); const marker = L.marker(coords, { icon: markerIcon }).addTo(map);
const popupContent = ` let popupContent = "";
<strong> if (m.link) {
<a href="${m.link}" target="_blank"> popupContent = `
<a href="${m.link}" target="_blank" class="title">
${m.title} ${m.title}
</a> </a>
</strong> <p>${m.description}</p>
<br> `;
${m.description} } else {
`; popupContent = `
<strong class="title">
${m.title}
</strong>
<p>${m.description}</p>
`;
}
marker.bindPopup(popupContent).openPopup(); marker.bindPopup(popupContent).openPopup();
const displayTooltip = m.group === 'capitals'; const displayTooltip = m.group === 'capitals';