From 1021ef9b2270ae173a55af61469517e4999f142e Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Fri, 5 Apr 2024 01:03:49 +0200
Subject: [PATCH] fixed the details page layout

---
 .../DetailsBuildingOverviewSection.vue        |  2 +-
 .../components/DetailsRoomOverviewSection.vue |  2 +-
 webclient/components/DetailsSources.vue       |  2 +-
 ...azyFeedbackModal.vue => FeedbackModal.vue} |  0
 webclient/layouts/details.vue                 | 37 +++++++++++++++++++
 webclient/pages/[view]/[id].vue               | 18 ++++-----
 6 files changed, 49 insertions(+), 12 deletions(-)
 rename webclient/components/{LazyFeedbackModal.vue => FeedbackModal.vue} (100%)
 create mode 100644 webclient/layouts/details.vue

diff --git a/webclient/components/DetailsBuildingOverviewSection.vue b/webclient/components/DetailsBuildingOverviewSection.vue
index acb975eda..e584a5ad5 100644
--- a/webclient/components/DetailsBuildingOverviewSection.vue
+++ b/webclient/components/DetailsBuildingOverviewSection.vue
@@ -15,7 +15,7 @@ const runtimeConfig = useRuntimeConfig();
 </script>
 
 <template>
-  <section v-if="props.buildings" class="print:!hidden">
+  <section v-if="props.buildings" class="px-5 print:!hidden">
     <h2 class="text-zinc-800 pb-3 text-lg font-semibold">{{ t("title") }}</h2>
     <!--  <a class="no-underline" href="#">Übersichtskarte <ArrowRightIcon class="w-4 h-4" /> -->
     <div class="text-zinc-600 grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
diff --git a/webclient/components/DetailsRoomOverviewSection.vue b/webclient/components/DetailsRoomOverviewSection.vue
index 8005d046e..dd30c3f54 100644
--- a/webclient/components/DetailsRoomOverviewSection.vue
+++ b/webclient/components/DetailsRoomOverviewSection.vue
@@ -45,7 +45,7 @@ const { list, containerProps, wrapperProps } = useVirtualList<ChildEntry>(filter
 <template>
   <div
     v-if="props.rooms?.usages"
-    class="bg-white border-zinc-300 flex flex-col gap-3 rounded border p-4 dark:bg-zinc-100 print:!hidden"
+    class="flex flex-col gap-3 p-4 md:bg-white md:border-zinc-300 md:dark:bg-zinc-100 md:mx-5 md:rounded md:border print:!hidden"
   >
     <p class="text-zinc-800 text-lg font-semibold">{{ t("title") }}</p>
     <div class="flex flex-col gap-2">
diff --git a/webclient/components/DetailsSources.vue b/webclient/components/DetailsSources.vue
index 6a342437f..ad30c8332 100644
--- a/webclient/components/DetailsSources.vue
+++ b/webclient/components/DetailsSources.vue
@@ -15,7 +15,7 @@ const { t } = useI18n({ useScope: "local" });
 </script>
 
 <template>
-  <section>
+  <section class="px-5">
     <h2 class="text-md text-zinc-800 font-semibold">{{ t("title") }}</h2>
     <div class="text-zinc-600 text-sm">
       <p>
diff --git a/webclient/components/LazyFeedbackModal.vue b/webclient/components/FeedbackModal.vue
similarity index 100%
rename from webclient/components/LazyFeedbackModal.vue
rename to webclient/components/FeedbackModal.vue
diff --git a/webclient/layouts/details.vue b/webclient/layouts/details.vue
new file mode 100644
index 000000000..ec512de36
--- /dev/null
+++ b/webclient/layouts/details.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useFeedback } from "~/composables/feedback";
+
+const searchBarFocused = ref(false);
+const feedback = useFeedback();
+
+const i18nHead = useLocaleHead({
+  addDirAttribute: true,
+  addSeoAttributes: true,
+});
+useHead({
+  htmlAttrs: {
+    lang: i18nHead.value.htmlAttrs!.lang,
+  },
+  link: [...(i18nHead.value.link || [])],
+  meta: [...(i18nHead.value.meta || [])],
+});
+</script>
+
+<template>
+  <AppNavHeader>
+    <AppSearchBar v-model:searchBarFocused="searchBarFocused" />
+  </AppNavHeader>
+
+  <!-- Page content container -->
+  <div
+    class="mx-auto mt-16 min-h-[calc(100vh-400px)] max-w-4xl pb-10 transition-opacity"
+    :class="{ 'opacity-70': searchBarFocused }"
+  >
+    <slot />
+  </div>
+
+  <AppFooter :class="searchBarFocused ? 'opacity-70' : ''" />
+  <ClientOnly>
+    <LazyFeedbackModal v-if="feedback.open" />
+  </ClientOnly>
+</template>
diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
index bb96312e6..960b7085c 100644
--- a/webclient/pages/[view]/[id].vue
+++ b/webclient/pages/[view]/[id].vue
@@ -9,6 +9,7 @@ definePageMeta({
   validate(route) {
     return /(view|campus|site|building|room|poi)/.test(route.params.view as string);
   },
+  layout: "details",
 });
 
 type DetailsResponse = components["schemas"]["DetailsResponse"];
@@ -42,12 +43,11 @@ watch(error, () => {
     });
   }
 });
-watchEffect(() => {
+watch([data, route], () => {
   if (!data.value) return;
   if (route.fullPath !== data.value.redirect_url) router.replace({ path: data.value.redirect_url });
   // --- Additional data ---
   slideshowOpen.value = false;
-  console.log(data.value.maps);
   selectedMap.value = data.value.maps.default;
   // --- Images ---
   if (data.value.imgs && data.value.imgs.length > 0) {
@@ -126,7 +126,7 @@ onMounted(() => {
     <button
       v-if="shownImage"
       type="button"
-      class="focusable !-mx-5 block lg:hidden print:!hidden"
+      class="focusable block lg:hidden print:!hidden"
       @click="slideshowOpen = !!data.imgs"
     >
       <img
@@ -137,7 +137,7 @@ onMounted(() => {
     </button>
 
     <!-- Entry header / title -->
-    <div>
+    <div class="px-5">
       <BreadcrumbList
         :items="data.parent_names.map((n, i) => ({ name: n, to: i > 0 ? '/view/' + data?.parents[i] : '/' }))"
         class="pb-3 pt-6"
@@ -184,7 +184,7 @@ onMounted(() => {
     </div>
 
     <!-- First info section (map + infocard) -->
-    <div class="grid grid-cols-1 gap-5 lg:grid-cols-3">
+    <div class="grid grid-cols-1 gap-5 px-5 lg:grid-cols-3">
       <TabGroup class="col-span-1 lg:col-span-2" as="div" manual>
         <div class="mb-3 grid gap-2 lg:hidden">
           <Toast
@@ -195,14 +195,14 @@ onMounted(() => {
           <Toast v-if="data.props.comment" :msg="data.props.comment" />
         </div>
         <TabPanels>
-          <TabPanel :unmount="false">
+          <TabPanel id="interactiveMapPanel" :unmount="false">
             <ClientOnly>
               <DetailsInteractiveMap ref="interactiveMap" :data="data" />
             </ClientOnly>
           </TabPanel>
-          <TabPanel :unmount="false">
+          <TabPanel id="roomfinderMapPanel" :unmount="false">
             <ClientOnly>
-              <DetailsRoomfinderMap
+              <LazyDetailsRoomfinderMap
                 v-if="data.maps.roomfinder?.available"
                 ref="roomfinderMap"
                 :available="data.maps.roomfinder.available"
@@ -262,7 +262,7 @@ onMounted(() => {
 
     <DetailsBuildingOverviewSection :buildings="data.sections?.buildings_overview" />
     <ClientOnly>
-      <DetailsRoomOverviewSection :rooms="data.sections?.rooms_overview" />
+      <LazyDetailsRoomOverviewSection :rooms="data.sections?.rooms_overview" />
     </ClientOnly>
     <DetailsSources :coords="data.coords" :sources="data.sources" :shown_image="shownImage" />
   </div>