116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import MainHeader from "@/Components/FlightsGoneBy/MainHeader.vue";
|
|
import MainFooter from "@/Components/FlightsGoneBy/MainFooter.vue";
|
|
import Radar from "@/Components/FlightsGoneBy/Radar.vue";
|
|
import StatusNotifications from "@/Components/FlightsGoneBy/StatusNotifications.vue";
|
|
import ToastNotifications from "@/Components/FlightsGoneBy/ToastNotifications.vue";
|
|
import { router, usePage } from "@inertiajs/vue3";
|
|
import { ref } from "vue";
|
|
import NotificationListener from "@/Components/FlightsGoneBy/NotificationListener.vue";
|
|
import { SharedProps } from "@/Types/types";
|
|
import PushNotificationPrompt from "@/Components/PushNotificationPrompt.vue";
|
|
import CopyPageButton from "@/Components/FlightsGoneBy/CopyPageButton.vue";
|
|
|
|
const transitionKey = ref(0);
|
|
|
|
const page = usePage<SharedProps>().props;
|
|
|
|
router.on("success", () => {
|
|
transitionKey.value++;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Radar>
|
|
<!--
|
|
A real fixed element at the top edge: Safari tints the status bar
|
|
with its colour instead of drawing the translucent blur.
|
|
(Pseudo-elements don't trigger this.)
|
|
-->
|
|
<div class="status-bar-backing" aria-hidden="true"></div>
|
|
|
|
<div class="layoutContainer">
|
|
<MainHeader :key="`header-${transitionKey}`" />
|
|
<Transition name="fade" mode="out-in">
|
|
<main id="pageContainer" :key="`main-${transitionKey}`">
|
|
<slot />
|
|
</main>
|
|
</Transition>
|
|
<span class="footer-share">
|
|
<CopyPageButton label="Share Link" />
|
|
</span>
|
|
<MainFooter :key="`footer-${transitionKey}`" />
|
|
</div>
|
|
|
|
<NotificationListener v-if="page.auth.user?.id" :user-id="page.auth.user?.id" />
|
|
<StatusNotifications />
|
|
<ToastNotifications />
|
|
<PushNotificationPrompt v-if="page.auth.user?.id" />
|
|
</Radar>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status-bar-backing {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: max(10px, env(safe-area-inset-top, 0px));
|
|
background: var(--surface);
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.layoutContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100dvh;
|
|
color: var(--text);
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
/* Push the header below the status bar. If Safari's solid area is taller
|
|
than the reported inset, add a few px here, e.g. calc(env(...) + 12px). */
|
|
padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
header,
|
|
footer {
|
|
flex: 0 0 5dvh;
|
|
min-height: 3rem;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
footer {
|
|
flex: 0 1 auto;
|
|
min-height: 3.25rem;
|
|
padding-block: 0.35rem;
|
|
}
|
|
}
|
|
|
|
main {
|
|
flex: 1 1 auto;
|
|
background: transparent;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-share {
|
|
padding: 1em;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
</style>
|