Merge pull request 'added scroll to top button' (#19) from scroll-to-top into main

Reviewed-on: #19

src/components/common/navigation/ScrollToTop.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+//const props = defineProps(['show']);
+const showScroll = ref(false);
+const updateScrollPosition = () => {
+  showScroll.value = document.documentElement.scrollTop > 1500;
+};
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", updateScrollPosition);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", updateScrollPosition);
+});
+</script>
+
+<template>
+  <span v-if="showScroll" class="floater overlay-text" @click="scrollToTop">
+    Scroll To Top
+  </span>
+</template>
+
+<style scoped>
+.floater {
+  display: block;
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  z-index: 1000;
+  cursor: pointer;
+  background-color: rgba(112, 128, 144, 0.8);
+  padding: 1rem;
+  border-radius: 10px;
+}
+
+.overlay-text {
+  color: white;
+  text-shadow: 1px 1px #6f0b51;
+}
+</style>

src/components/common/navigation/navbar.vue

@@ -24,6 +24,7 @@
 
 <script lang="ts" setup>
 import { hasToken } from "~/composables/hasToken";
+import ProfileMenu from "~/components/common/menus/ProfileMenu.vue";
 
 const authenticated = computed(() => hasToken());
 </script>

src/pages/lists/[id].vue

@@ -1,6 +1,8 @@
 <template>
+  <div>
     <LoadingIcon v-if="loading" show-quote="true" />
     <div v-else class="p-5 sm:p-0">
+      <ScrollToTop></ScrollToTop>
       <Modal ref="movie_modal">
         <ShowMovie
           v-if="modal_movie"
@@ -37,7 +39,10 @@
         />
       </div>
 
-    <div v-if="movies.length < 1 && !loading" class="mt-10 flex gap-5 flex-col">
+      <div
+        v-if="movies.length < 1 && !loading"
+        class="mt-10 flex gap-5 flex-col"
+      >
         No Movies Found
         <MovieQuote />
       </div>
@@ -71,6 +76,7 @@
         </li>
       </ul>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -82,6 +88,7 @@ import Modal from "~/components/common/ui/Modal.vue";
 import { useCookie } from "#app";
 import { $fetch } from "ofetch";
 import MoviePoster from "~/components/MoviePoster.vue";
+import ScrollToTop from "~/components/common/navigation/ScrollToTop.vue";
 
 const list_id = ref(0);
 const list = defineModel<MovieList>("movie_list", { default: [] });
@@ -238,6 +245,7 @@ onMounted(() => {
   const route = useRoute();
   if (typeof route.params.id === "string") {
     const list_param: string = route.params.id;
+
     list_id.value = parseInt(list_param);
     getList(list_id.value);
   }