Mirrors/regenbogenkarte
2
0
Fork 0
mirror of https://github.com/Queer-Lexikon/regenbogenkarte synced 2024-11-24 21:23:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improve layout for card links

Browse source 
This commit improves the layout in the following ways: First, we ensure a proper
spacing, both between icon and text but also between the links. Second, we also
improve the accessibility a bit, by underlining links when hovering them.
This commit is contained in:
nachtjasmin 2024-07-28 11:58:06 +02:00 committed by Zora Franke
parent 3cfe7d5d64
commit 54cfeefa02
2 changed files with 15 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
main.css
View file

@ -26,15 +26,3 @@ body {
.map-popup .leaflet-popup-content p {
@apply m-0 mb-1;
}
li.contact-email::marker {
content: "📧";
}
li.contact-phone::marker {
content: "☎";
}
li.contact-website::marker {
content: "🌐";
}

25
ts/map.ts
View file

@ -130,17 +130,22 @@ const buildContent = (o: Organisation): string => {
let result = `
<h3 class="font-semibold text-base">${o.name}</h3>
<address class="inline">${o.location.address ?? "auf Nachfrage"}</address>
<ul class="list-disc my-4 pl-2 list-inside">`;
<ul class="my-4 space-y-1 pl-2 list-inside">`;
const li = (label: string, link: string, icon: string): string => {
return `<li>
<span aria-hidden=true class=mr-2>${icon}</span>
<a href="${link}" class="hover:underline">
${label}
</a>
</li>`;
};
for (const { label, url } of o.websites) result += li(label, url, "🌐");
for (const { label, email } of o.emails) result += li(label, email, "📧");
for (const { label, phone } of o.phones)
result += li(`${label} (${phone})`, "tel:" + phone, "☎");
o.websites.forEach((website) => {
result += `<li class="contact-website"><a href="${website.url}">${website.label}</a></li>`;
});
o.emails.forEach((email) => {
result += `<li class="contact-email"><a href="mailto:${email.email}">${email.label}</a></li>`;
});
o.phones.forEach((phone) => {
result += `<li class="contact-phone">${phone.label}: <a href="tel:${phone.phone}">${phone.phone}</a></li>`;
});
result += `</ul>`;
if (o.activities && o.activities !== "")