From aa1e68142b05cc4d9d8e96c93072a952f65aa511 Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@posteo.de>
Date: Tue, 6 Feb 2024 11:54:29 +0100
Subject: [PATCH] style: improve map popup layout

---
 components/data-map-view.vue        | 23 +++++++++++++++++------
 components/geo-map-popup.client.vue | 29 ++++++++++++++++++-----------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index f6105c64..2ce64082 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -80,7 +80,7 @@ function onLayerClick(features: Array<MapGeoJSONFeature & Pick<EntityFeature, "p
 		}
 	});
 
-	const point = turf.center(createFeatureCollection(entities))
+	const point = turf.center(createFeatureCollection(entities));
 	const coordinates = point.geometry.coordinates;
 
 	popover.value = { coordinates, entities };
@@ -117,11 +117,22 @@ function createDateSpan(date: { earliest?: string; latest?: string }) {
 				:width="width"
 				@layer-click="onLayerClick"
 			>
-				<GeoMapPopup v-if="popover != null" :coordinates="popover.coordinates" @close="popover = null">
-					<article v-for="entity of popover.entities">
-						<strong class="text-semibold">{{ entity.properties.title }}</strong>
-						<NavLink class="underline" :href="{ path: `/entities/${entity.properties._id}` }">
-							{{ t('DataMapView.go-to-details-page') }}
+				<GeoMapPopup
+					v-if="popover != null"
+					:coordinates="popover.coordinates"
+					@close="popover = null"
+				>
+					<article
+						v-for="entity of popover.entities"
+						:key="entity.properties._id"
+						class="grid gap-0.5 font-body text-xs"
+					>
+						<strong class="block font-medium">{{ entity.properties.title }}</strong>
+						<NavLink
+							class="underline hover:no-underline"
+							:href="{ path: `/entities/${entity.properties._id}` }"
+						>
+							{{ t("DataMapView.go-to-details-page") }}
 						</NavLink>
 					</article>
 				</GeoMapPopup>
diff --git a/components/geo-map-popup.client.vue b/components/geo-map-popup.client.vue
index bcc90dc0..7d8356f9 100644
--- a/components/geo-map-popup.client.vue
+++ b/components/geo-map-popup.client.vue
@@ -3,43 +3,50 @@ import { assert } from "@acdh-oeaw/lib";
 import { Popup } from "maplibre-gl";
 
 const props = defineProps<{
-	coordinates: [number, number]
+	coordinates: [number, number];
 }>();
 
 const emit = defineEmits<{
-	(event: 'close'): void
-}>()
+	(event: "close"): void;
+}>();
 
 const { map } = useGeoMap();
 
 const elementRef = ref<HTMLElement | null>(null);
 
 interface Context {
-	popup: Popup | null
+	popup: Popup | null;
 }
 
 const context: Context = {
-	popup: null
+	popup: null,
 };
 
 onMounted(async () => {
-	await nextTick()
+	await nextTick();
 	assert(elementRef.value != null);
 	assert(map != null);
 
-	const popup = new Popup({ closeButton: false })
+	const popup = new Popup({ closeButton: false, maxWidth: "256px" })
 		.setLngLat(props.coordinates)
 		.setDOMContent(elementRef.value)
 		.addTo(map);
 
-	popup.once("close", () => emit("close"))
+	popup.once("close", () => {
+		emit("close");
+	});
 
 	context.popup = popup;
 });
 
-watch(() => props.coordinates, (coordinates) => {
-	context.popup?.setLngLat(coordinates)
-})
+watch(
+	() => {
+		return props.coordinates;
+	},
+	(coordinates) => {
+		context.popup?.setLngLat(coordinates);
+	},
+);
 
 onScopeDispose(() => {
 	context.popup?.remove();