From ba271fb972113f3803456b1f0a2fd9483a4bb14c Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 22 Oct 2024 12:35:06 +0200
Subject: [PATCH] chore: make the site responsible for tablet-view

---
 components/character-fictionality.vue |  5 +-
 components/ui/card/CardContent.vue    |  2 +-
 pages/about.vue                       | 14 +++---
 pages/index.vue                       |  2 +-
 pages/search.vue                      | 10 ++--
 pages/work/[id].vue                   | 71 ++++++++++++++++++---------
 tailwind.config.ts                    |  3 ++
 7 files changed, 71 insertions(+), 36 deletions(-)

diff --git a/components/character-fictionality.vue b/components/character-fictionality.vue
index 90f6e15..c2cf84d 100644
--- a/components/character-fictionality.vue
+++ b/components/character-fictionality.vue
@@ -4,8 +4,11 @@ import { UserRoundIcon, UserRoundPenIcon, VenetianMaskIcon } from "lucide-vue-ne
 const props = defineProps<{
 	fictionality: string;
 	isMobile: boolean;
+	isTablet: boolean;
 }>();
 
+console.log(props.isMobile, props.isTablet);
+
 type Icon = typeof UserRoundIcon;
 
 const characterIcons: Record<string, Icon> = {
@@ -24,7 +27,7 @@ const iconComponent = computed(() => {
 </script>
 
 <template>
-	<div v-if="props.isMobile">
+	<div v-if="props.isMobile || props.isTablet">
 		<Popover>
 			<PopoverTrigger>
 				<component :is="iconComponent" :size="16" class="inline text-frisch-orange" />
diff --git a/components/ui/card/CardContent.vue b/components/ui/card/CardContent.vue
index cdfb685..d9b05cc 100644
--- a/components/ui/card/CardContent.vue
+++ b/components/ui/card/CardContent.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-	<div :class="cn('p-6 pt-0', props.class)">
+	<div :class="cn('p-6', props.class)">
 		<slot />
 	</div>
 </template>
diff --git a/pages/about.vue b/pages/about.vue
index 4f3780c..0b8cd74 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -42,9 +42,11 @@ useErrorMessage(teamError ?? approachError ?? membersError, {
 </script>
 
 <template>
-	<MainContent class="grid gap-8 p-4 lg:grid-cols-[2fr_3fr] lg:px-12">
-		<div class="flex lg:justify-end">
-			<Card class="aspect-square size-full bg-frisch-grey lg:size-72">
+	<MainContent
+		class="grid gap-8 p-4 md:grid-cols-[1fr_3fr] md:justify-center md:px-12 2xl:grid-cols-[2fr_3fr]"
+	>
+		<div class="flex md:justify-end">
+			<Card class="aspect-square size-full bg-frisch-grey md:size-72">
 				<CardContent class="flex size-full py-4 text-2xl font-bold text-white">
 					<h1 class="uppercase">{{ t("AboutPage.title") }}</h1>
 				</CardContent>
@@ -60,13 +62,13 @@ useErrorMessage(teamError ?? approachError ?? membersError, {
 				<template #empty></template>
 			</ContentRenderer>
 
-			<ul class="list-none px-0 pt-4 lg:pt-8">
+			<ul class="list-none px-0 pt-4 md:pt-8">
 				<li
 					v-for="member of members"
 					:key="member._id"
-					class="grid gap-4 p-0 lg:grid-cols-[auto_1fr]"
+					class="grid gap-4 p-0 md:grid-cols-[auto_1fr]"
 				>
-					<div class="relative aspect-square overflow-hidden lg:size-72">
+					<div class="relative aspect-square overflow-hidden md:size-72">
 						<img
 							v-if="member.image != null"
 							alt=""
diff --git a/pages/index.vue b/pages/index.vue
index 4f6497f..aab3769 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -35,7 +35,7 @@ const links = {
 			class="grid h-full gap-4 text-2xl font-bold sm:grid-cols-[repeat(3,minmax(0,350px))] sm:justify-center"
 		>
 			<NuxtLink v-for="(link, id) of links" :key="id" :href="link.href">
-				<Card class="size-full transition hover:scale-105" :class="link.color">
+				<Card class="size-full transition hover:scale-105 sm:items-center" :class="link.color">
 					<CardContent class="flex size-full items-center uppercase text-white">
 						{{ link.label }}
 					</CardContent>
diff --git a/pages/search.vue b/pages/search.vue
index 4af97a3..4aefcba 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -110,22 +110,22 @@ const facets = computed(() => {
 </script>
 
 <template>
-	<MainContent class="overflow-x-hidden bg-frisch-marine lg:overflow-x-auto lg:pr-20">
+	<MainContent class="overflow-x-hidden bg-frisch-marine md:pr-0 lg:overflow-x-auto 2xl:pr-20">
 		<h1 class="sr-only">{{ t("SearchPage.title") }}</h1>
 		<div
 			v-if="!isLoading"
-			class="grid h-full grid-rows-[auto_1fr] lg:grid-cols-[minmax(650px,_1fr)_auto_3fr] lg:grid-rows-none"
+			class="grid h-full grid-rows-[auto_1fr] md:grid-cols-[1fr_auto_1fr] lg:grid-rows-none 2xl:grid-cols-[minmax(650px,_1fr)_auto_3fr]"
 		>
-			<div class="hidden lg:block">
+			<div class="hidden md:block">
 				<SearchForm query="" @submit="onChange">
 					<SearchTextInput />
 					<SearchFilter :facets="facets" />
 				</SearchForm>
 			</div>
 			<div
-				class="hidden size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange lg:block"
+				class="hidden size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange md:block md:border-y-[65px] md:border-l-[65px]"
 			/>
-			<div class="flex lg:hidden">
+			<div class="flex md:hidden">
 				<Drawer v-model:open="isMobileSearchOpen">
 					<DrawerTrigger class="w-full">
 						<span class="flex w-full items-center bg-frisch-orange-searchform">
diff --git a/pages/work/[id].vue b/pages/work/[id].vue
index 4eeefc3..d44c42e 100644
--- a/pages/work/[id].vue
+++ b/pages/work/[id].vue
@@ -14,7 +14,11 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 const route = useRoute();
 
 const isMobile = computed(() => {
-	return window.innerWidth < 1024;
+	return window.innerWidth < 820;
+});
+
+const isTablet = computed(() => {
+	return window.innerWidth < 1536;
 });
 
 const id = computed(() => {
@@ -145,13 +149,12 @@ const icon = computed(() => {
 </script>
 
 <template>
-	<MainContent class="relative grid h-full bg-frisch-marine lg:pr-20">
-		<div v-if="!isLoading" class="grid h-full grid-cols-[auto_1fr]">
+	<MainContent class="relative grid h-full bg-frisch-marine md:pr-14 2xl:pr-20">
+		<div v-if="!isLoading" class="grid h-full md:grid-cols-[auto_1fr]">
 			<div
-				v-if="!isMobile"
-				class="size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange"
+				class="hidden size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange md:block md:border-y-[65px] md:border-l-[65px]"
 			/>
-			<div class="grid lg:grid-cols-2 lg:gap-8">
+			<div class="grid md:grid-cols-2 md:gap-8">
 				<div v-if="work != null" class="bg-white p-8 lg:p-16">
 					<!-- TODO: maybe display siglum here -->
 					<div v-if="work?.work_type != null" class="flex items-center gap-2 pb-2">
@@ -182,7 +185,12 @@ const icon = computed(() => {
 
 						<div class="flex items-center">
 							<GlobeIcon :size="16" class="mr-2" />
-							<div v-if="work?.expression_data[0]?.language != null">
+							<div
+								v-if="
+									work?.expression_data[0]?.language != null &&
+									work?.expression_data[0]?.language.length > 0
+								"
+							>
 								<div v-for="(language, index) in work?.expression_data[0]?.language" :key="index">
 									<span>{{ language }}</span>
 									<span v-if="index !== work?.expression_data[0]?.language.length - 1">
@@ -207,7 +215,7 @@ const icon = computed(() => {
 							</NuxtLink>
 						</div>
 					</span>
-					<div v-if="isMobile">
+					<div class="block md:hidden">
 						<Drawer>
 							<DrawerTrigger class="w-full">
 								<span class="grid grid-cols-[auto_1fr] items-center gap-2 pt-2 text-frisch-orange">
@@ -294,7 +302,7 @@ const icon = computed(() => {
 									<div class="text-lg font-semibold">Charaktere</div>
 								</AccordionTrigger>
 								<AccordionContent class="text-base">
-									<div class="grid grid-rows-[auto_auto_auto] gap-4 lg:grid-cols-3">
+									<div class="grid grid-rows-[auto_auto_auto] gap-4 2xl:grid-cols-3">
 										<div>
 											<div class="pb-2 font-semibold">Hauptfiguren</div>
 											<div v-if="characters.main != null && characters.main.length > 0">
@@ -303,6 +311,7 @@ const icon = computed(() => {
 														<CharacterFictionality
 															:fictionality="character.fictionality"
 															:is-mobile="isMobile"
+															:is-tablet="isTablet"
 														/>
 
 														{{ character.name }}
@@ -321,6 +330,7 @@ const icon = computed(() => {
 														<CharacterFictionality
 															:fictionality="character.fictionality"
 															:is-mobile="isMobile"
+															:is-tablet="isTablet"
 														/>
 
 														{{ character.name }}
@@ -339,6 +349,7 @@ const icon = computed(() => {
 														<CharacterFictionality
 															:fictionality="character.fictionality"
 															:is-mobile="isMobile"
+															:is-tablet="isTablet"
 														/>
 
 														{{ character.name }}
@@ -362,7 +373,7 @@ const icon = computed(() => {
 								</AccordionTrigger>
 								<AccordionContent class="text-base">
 									<div>
-										<div class="grid grid-rows-[auto_auto_auto] gap-4 lg:grid-cols-3">
+										<div class="grid grid-rows-[auto_auto_auto] gap-4 2xl:grid-cols-3">
 											<div>
 												<div class="pb-2 font-semibold">Schauplätze</div>
 												<div v-if="places.takesPlaceIn != null && places.takesPlaceIn.length > 0">
@@ -476,7 +487,7 @@ const icon = computed(() => {
 								</AccordionTrigger>
 								<AccordionContent class="text-base">
 									<div>
-										<div class="grid grid-rows-[auto_auto_auto] gap-4 lg:grid-cols-3">
+										<div class="grid grid-rows-[auto_auto_auto] gap-4 2xl:grid-cols-3">
 											<div>
 												<div class="pb-2 font-semibold">Erwähnte Werke</div>
 												<div v-if="relatedWork.references && relatedWork.references.length > 0">
@@ -542,7 +553,7 @@ const icon = computed(() => {
 										<div>
 											<div v-if="work?.physical_objects && work?.physical_objects.length > 0">
 												<div
-													class="grid grid-rows-[auto_auto_auto] gap-4 lg:grid-cols-[auto_1fr] lg:gap-10"
+													class="grid grid-rows-[auto_auto_auto] gap-4 2xl:grid-cols-[auto_1fr] 2xl:gap-10"
 												>
 													<div>
 														<div class="pb-2 font-semibold">Archiv</div>
@@ -570,7 +581,7 @@ const icon = computed(() => {
 						</Accordion>
 					</div>
 				</div>
-				<div v-if="!isMobile" class="bg-white py-8">
+				<div class="hidden md:block md:bg-white md:py-8">
 					<div class="grid grid-cols-[auto_1fr] items-center gap-4">
 						<div
 							class="size-0 border-y-[55px] border-l-[55px] border-y-transparent border-l-frisch-marine"
@@ -586,20 +597,36 @@ const icon = computed(() => {
 						</div>
 						<div v-if="analysisTags.length > 0" class="py-4">
 							<span v-for="tag in analysisTags" :key="tag.name" class="mb-2 mr-1">
-								<TooltipProvider>
-									<Tooltip>
-										<TooltipTrigger as-child>
+								<span v-if="!isTablet">
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger as-child>
+												<span
+													class="mb-1 inline-block cursor-default bg-frisch-orange px-2 py-1 text-xs text-white opacity-85"
+												>
+													{{ tag.value }}
+												</span>
+											</TooltipTrigger>
+											<TooltipContent>
+												<p>{{ tag.name }}</p>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</span>
+								<span v-else>
+									<Popover>
+										<PopoverTrigger>
 											<span
 												class="mb-1 inline-block cursor-default bg-frisch-orange px-2 py-1 text-xs text-white opacity-85"
 											>
 												{{ tag.value }}
 											</span>
-										</TooltipTrigger>
-										<TooltipContent>
-											<p>{{ tag.name }}</p>
-										</TooltipContent>
-									</Tooltip>
-								</TooltipProvider>
+										</PopoverTrigger>
+										<PopoverContent>
+											{{ tag.name }}
+										</PopoverContent>
+									</Popover>
+								</span>
 							</span>
 						</div>
 					</div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c240467..372d14f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -120,6 +120,9 @@ const config = {
 				"collapsible-down": "collapsible-down 0.2s ease-in-out",
 				"collapsible-up": "collapsible-up 0.2s ease-in-out",
 			},
+			screens: {
+				md: "820px",
+			},
 		},
 	},
 	plugins: [animate, typography, fluidColumnsPlugin],