From 644769df84fb6a411b9fe968841bf1781a757ed9 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Fri, 6 Oct 2023 09:17:15 +0200
Subject: [PATCH] Add button back to top
---
components/Nav/BackToTop.vue | 53 +++++++++++++++++++++++++++++++
components/Nav/TableOfContent.vue | 13 +++-----
layouts/article.vue | 4 +++
pages/defense-systems.vue | 1 -
4 files changed, 61 insertions(+), 10 deletions(-)
create mode 100644 components/Nav/BackToTop.vue
diff --git a/components/Nav/BackToTop.vue b/components/Nav/BackToTop.vue
new file mode 100644
index 00000000..faf1a660
--- /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 45b9639e..da744b19 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 5a111f70..cda9f07d 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 e1b43918..9ca3390e 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],
--
GitLab