chore: make the detail view responsive

acdh-oeaw · Oct 21, 2024 · 2dea79a · 2dea79a
1 parent 2d564a3
commit 2dea79a
Show file tree

Hide file tree

Showing 3 changed files with 205 additions and 95 deletions.
diff --git a/components/character-fictionality.vue b/components/character-fictionality.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { UserRoundIcon, UserRoundPenIcon, VenetianMaskIcon } from "lucide-vue-next";
+
+const props = defineProps<{
+	fictionality: string;
+	isMobile: boolean;
+}>();
+
+type Icon = typeof UserRoundIcon;
+
+const characterIcons: Record<string, Icon> = {
+	fiktivefigur: UserRoundPenIcon,
+	historischefigur: UserRoundIcon,
+	mythologischefigur: VenetianMaskIcon,
+};
+
+const iconComponent = computed(() => {
+	const normalizedFictionality = props.fictionality
+		.toLowerCase()
+		.replace(/[-\s,]/g, "") // Removes dashes, spaces, and commas
+		.replace(/[^a-zA-Zäöüß]/g, ""); // Removes any non-alphabet characters except for umlauts and ß
+	return characterIcons[normalizedFictionality] ?? null;
+});
+</script>
+
+<template>
+	<div v-if="props.isMobile">
+		<Popover>
+			<PopoverTrigger>
+				<component :is="iconComponent" :size="16" class="inline text-frisch-orange" />
+			</PopoverTrigger>
+			<PopoverContent>
+				<p>{{ props.fictionality }}</p>
+			</PopoverContent>
+		</Popover>
+	</div>
+	<div v-else>
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger as-child>
+					<component :is="iconComponent" :size="16" class="inline text-frisch-orange" />
+				</TooltipTrigger>
+				<TooltipContent>
+					<p>{{ props.fictionality }}</p>
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	</div>
+</template>
diff --git a/components/map-sidebar.vue b/components/map-sidebar.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { EyeIcon, MapPinIcon } from "lucide-vue-next";
 
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+
 const router = useRouter();
 
 const props = defineProps<{
@@ -12,6 +14,7 @@ const props = defineProps<{
 		description: string | undefined;
 	};
 	relation: string;
+	isMobile: boolean;
 }>();
 
 function setPlaceQuery(id: number | undefined) {
@@ -24,26 +27,52 @@ function setPlaceQuery(id: number | undefined) {
 </script>
 
 <template>
-	<Sheet>
-		<SheetTrigger as-child @click="setPlaceQuery(props.place.id)">
-			<EyeIcon :size="16" class="text-frisch-orange" />
-		</SheetTrigger>
-		<SheetContent>
-			<div class="flex items-center gap-1 text-sm">
-				<MapPinIcon :size="16" />
-				{{ props.relation }}
-			</div>
-			<SheetTitle class="pb-2">{{ props.place.name }}</SheetTitle>
-			<SheetDescription>
-				<div v-if="props.place.longitude != null && props.place.latitude != null">
-					<Map :longitude="props.place.longitude" :latitude="props.place.latitude" />
+	<div v-if="props.isMobile">
+		<Drawer>
+			<DrawerTrigger class="w-full">
+				<EyeIcon :size="16" class="text-frisch-orange" />
+			</DrawerTrigger>
+			<DrawerContent>
+				<div class="flex items-center gap-1 px-4 pt-2 text-sm">
+					<MapPinIcon :size="16" />
+					{{ props.relation }}
+				</div>
+				<div class="px-4 pb-2 text-lg font-semibold">{{ props.place.name }}</div>
+				<div class="px-4 py-2">
+					<div v-if="props.place.longitude != null && props.place.latitude != null">
+						<Map :longitude="props.place.longitude" :latitude="props.place.latitude" />
+					</div>
+					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
+					<div v-if="props.place.description !== ''">
+						{{ props.place.description }}
+					</div>
+					<div v-else class="text-sm text-muted-foreground">Keine Beschreibung vorhanden.</div>
 				</div>
-				<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
-				<div v-if="props.place.description !== ''">
-					{{ props.place.description }}
+			</DrawerContent>
+		</Drawer>
+	</div>
+	<div v-else>
+		<Sheet>
+			<SheetTrigger as-child @click="setPlaceQuery(props.place.id)">
+				<EyeIcon :size="16" class="text-frisch-orange" />
+			</SheetTrigger>
+			<SheetContent>
+				<div class="flex items-center gap-1 text-sm">
+					<MapPinIcon :size="16" />
+					{{ props.relation }}
 				</div>
-				<div v-else>Keine Beschreibung vorhanden.</div>
-			</SheetDescription>
-		</SheetContent>
-	</Sheet>
+				<SheetTitle class="pb-2">{{ props.place.name }}</SheetTitle>
+				<SheetDescription>
+					<div v-if="props.place.longitude != null && props.place.latitude != null">
+						<Map :longitude="props.place.longitude" :latitude="props.place.latitude" />
+					</div>
+					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
+					<div v-if="props.place.description !== ''">
+						{{ props.place.description }}
+					</div>
+					<div v-else>Keine Beschreibung vorhanden.</div>
+				</SheetDescription>
+			</SheetContent>
+		</Sheet>
+	</div>
 </template>