diff --git a/components/Nav/BackToTop.vue b/components/Nav/BackToTop.vue new file mode 100644 index 0000000000000000000000000000000000000000..faf1a66086224943736dca5b51c141fac76b8d8d --- /dev/null +++ b/components/Nav/BackToTop.vue @@ -0,0 +1,53 @@ + +<!-- from https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/components/app/BackToTop.vue --> +<template> + <v-layout-item + v-scroll="onScroll" + class="text-end pointer-events-none" + model-value + position="bottom" + size="88" + > + <div class="ma-4"> + <v-fab-transition> + <v-btn + v-show="model" + class="mt-auto pointer-events-initial" + color="primary" + elevation="8" + icon="mdi-chevron-up" + size="large" + @click="onClick" + /> + </v-fab-transition> + </div> + </v-layout-item> + </template> + + <script setup> + import { ref } from 'vue' + + const model = ref(false) + + function onScroll () { + model.value = window.scrollY > 200 + } + + function onClick () { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }) + } + </script> + + <style scoped> + .pointer-events-none { + pointer-events: none; + } + + .pointer-events-initial { + pointer-events: initial; + } + </style> + \ No newline at end of file diff --git a/components/Nav/TableOfContent.vue b/components/Nav/TableOfContent.vue index 45b9639eb3c3921656e60cc169c6be7674c9d049..da744b193fde2a7fd233384ce21bea4112ea5e57 100644 --- a/components/Nav/TableOfContent.vue +++ b/components/Nav/TableOfContent.vue @@ -11,19 +11,14 @@ const { mobile } = useDisplay(); </script> <template> - <v-navigation-drawer - v-if="!mobile" - id="app-toc" - location="right" - :border="0" - permanent - > + <v-navigation-drawer v-if="!mobile" id="app-toc" location="right" :border="0" permanent> <template #prepend> <div class="text-h6 font-weight-medium mt-4 mb-2 ms-4">Contents</div> </template> <ul class="px-2 py-2"> - <NavTableOfContentItem :links="props.links" /></ul - ></v-navigation-drawer> + <NavTableOfContentItem :links="props.links" /> + </ul> + </v-navigation-drawer> </template> <style scoped> #app-toc ul { diff --git a/layouts/article.vue b/layouts/article.vue index 5a111f7030630c6c36de5cc182067acea60fdf4b..cda9f07d6383271d6ca446c9708988e2a71e0e9e 100644 --- a/layouts/article.vue +++ b/layouts/article.vue @@ -13,7 +13,9 @@ console.log(next) </script> <template> <VApp> + <v-main style="min-height: 300px"> + <!-- <v-container class="fill-height w-auto" > --> <!-- <v-card flat max-width="1000" min-height="300" color="transparent"> <v-card-text> --> @@ -29,11 +31,13 @@ console.log(next) color="primary" :to="surroundPage?._path">{{ surroundPage?.title }}</v-btn> </v-col> </v-row> + </v-container> <Footer></Footer> </v-main> <NavNavbar /> <NavTableOfContent :links="page.body.toc.links" /> + <nav-back-to-top /> </VApp> </template> diff --git a/pages/defense-systems.vue b/pages/defense-systems.vue index e1b4391880afc80a76ecf796f43e1511d42ddb52..9ca3390ec2363893cff87a0daba42cc6c2cc71f4 100644 --- a/pages/defense-systems.vue +++ b/pages/defense-systems.vue @@ -42,7 +42,6 @@ const headers = computed(() => { }); const systems = computed(() => { return sanitizedData.value.map((content) => { - console.log(content) return { system: { name: content.title, path: content._path }, ...content[tableKey],