From 54cfeefa0215d7c4b419adb12fb12e51a849cb08 Mon Sep 17 00:00:00 2001
From: nachtjasmin <nachtjasmin@posteo.de>
Date: Sun, 28 Jul 2024 11:58:06 +0200
Subject: [PATCH] Improve layout for card links

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.
---
 main.css  | 12 ------------
 ts/map.ts | 25 +++++++++++++++----------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/main.css b/main.css
index 90ab97e..9d6501c 100644
--- a/main.css
+++ b/main.css
@@ -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: "🌐";
-}
diff --git a/ts/map.ts b/ts/map.ts
index 0400347..dccaa48 100644
--- a/ts/map.ts
+++ b/ts/map.ts
@@ -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 !== "")