summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackToTopButton.vue
diff options
context:
space:
mode:
authorUdo Walter2019-03-22 05:36:03 +0100
committerUdo Walter2019-03-22 05:36:03 +0100
commite6c97c4913e5d24a908c65cc7592d9332df24057 (patch)
tree80662936f9dcb8622a743726fac5fcfccd6bddd2 /webapp/src/components/BackToTopButton.vue
parent[server/registration/backends] Rework addClient and updateClient to receive json (diff)
downloadbas-e6c97c4913e5d24a908c65cc7592d9332df24057.tar.gz
bas-e6c97c4913e5d24a908c65cc7592d9332df24057.tar.xz
bas-e6c97c4913e5d24a908c65cc7592d9332df24057.zip
[webapp] add back to top button + log improvements
Diffstat (limited to 'webapp/src/components/BackToTopButton.vue')
-rw-r--r--webapp/src/components/BackToTopButton.vue56
1 files changed, 56 insertions, 0 deletions
diff --git a/webapp/src/components/BackToTopButton.vue b/webapp/src/components/BackToTopButton.vue
new file mode 100644
index 0000000..f70b636
--- /dev/null
+++ b/webapp/src/components/BackToTopButton.vue
@@ -0,0 +1,56 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+
+<template>
+ <v-scale-transition>
+ <v-btn
+ class="back-to-top-button"
+ fab
+ color="primary"
+ v-show="visible"
+ v-scroll="handleScroll"
+ @click="$vuetify.goTo(0, { duration })"
+ >
+ <v-icon>keyboard_arrow_up</v-icon>
+ </v-btn>
+ </v-scale-transition>
+</template>
+
+<script>
+
+export default {
+ name: 'BackToTopButton',
+ data () {
+ return {
+ visible: false
+ }
+ },
+ computed: {
+ duration () {
+ return this.$store.state.settings.noAnimations ? 0 : 420
+ }
+ },
+ methods: {
+ handleScroll () {
+ const offset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+ if (offset > 200) this.visible = true
+ else this.visible = false
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.back-to-top-button {
+ position: fixed;
+ right: 16px;
+ bottom: 16px;
+}
+</style>