fixed the details page layout

TUM-Dev · Apr 4, 2024 · 1021ef9 · 1021ef9
1 parent 4a7e4da
commit 1021ef9
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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 → webclient/components/FeedbackModal.vue b/webclient/components/LazyFeedbackModal.vue → webclient/components/FeedbackModal.vue
diff --git a/webclient/layouts/details.vue 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
@@ -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>