src/components/common/navigation/ScrollToTop.vue

@@ -1,46 +0,0 @@
-<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,7 +24,6 @@
 
 <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,81 +1,75 @@
 <template>
-  <div>
+  <LoadingIcon v-if="loading" show-quote="true" />
-    <LoadingIcon v-if="loading" show-quote="true" />
+  <div v-else class="p-5 sm:p-0">
-    <div v-else class="p-5 sm:p-0">
+    <Modal ref="movie_modal">
-      <ScrollToTop></ScrollToTop>
+      <ShowMovie
-      <Modal ref="movie_modal">
+        v-if="modal_movie"
-        <ShowMovie
+        :movie="modal_movie"
-          v-if="modal_movie"
+        :updating="updating"
-          :movie="modal_movie"
+        @close-modal="closeModal"
-          :updating="updating"
+        @update-movie="updateMovie(modal_movie)"
-          @close-modal="closeModal"
+      ></ShowMovie>
-          @update-movie="updateMovie(modal_movie)"
+    </Modal>
-        ></ShowMovie>
+    <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
-      </Modal>
+    <div
-      <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
+      v-if="movies.length > 1 && !loading"
-      <div
+      class="grid grid-cols-2 rounded movie-card neon-border p-5"
-        v-if="movies.length > 1 && !loading"
+    >
-        class="grid grid-cols-2 rounded movie-card neon-border p-5"
+      <div>
-      >
+        <ul class="flex flex-row">
-        <div>
+          <li>
-          <ul class="flex flex-row">
+            <label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
-            <li>
+            <input
-              <label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
+              id="hide_scheduled"
-              <input
+              v-model="hide_scheduled"
-                id="hide_scheduled"
+              type="checkbox"
-                v-model="hide_scheduled"
+              @change="hideScheduled"
-                type="checkbox"
+            />
-                @change="hideScheduled"
+          </li>
-              />
+        </ul>
-            </li>
-          </ul>
-        </div>
-        <input
-          v-model="movie_query"
-          class="p-1 rounded"
-          placeholder="Filter Movies"
-          type="text"
-          @input="filterMovies"
-        />
       </div>
-
+      <input
-      <div
+        v-model="movie_query"
-        v-if="movies.length < 1 && !loading"
+        class="p-1 rounded"
-        class="mt-10 flex gap-5 flex-col"
+        placeholder="Filter Movies"
-      >
+        type="text"
-        No Movies Found
+        @input="filterMovies"
-        <MovieQuote />
+      />
-      </div>
-      <!-- MOVIE LIST -->
-      <ul
-        v-else
-        class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-5"
-      >
-        <li
-          v-for="movie in filtered_movies"
-          :key="movie.poster"
-          class="rounded movie-card neon-border flex flex-col overflow-hidden"
-        >
-          <!-- POSTER -->
-          <MoviePoster
-            :image="movie.poster"
-            class="flex-shrink-0"
-            @click="showModal(movie)"
-          />
-          <div class="p-5 flex flex-col justify-between flex-1">
-            <!-- TITLE -->
-            <span class="font-bold text-center mb-1">{{ movie.title }}</span>
-            <span
-              v-if="logged_in"
-              class="text-center hover-pointer"
-              @click="removeMovie(movie.imdb_id)"
-            >
-              X
-            </span>
-          </div>
-        </li>
-      </ul>
     </div>
+
+    <div v-if="movies.length < 1 && !loading" class="mt-10 flex gap-5 flex-col">
+      No Movies Found
+      <MovieQuote />
+    </div>
+    <!-- MOVIE LIST -->
+    <ul
+      v-else
+      class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-5"
+    >
+      <li
+        v-for="movie in filtered_movies"
+        :key="movie.poster"
+        class="rounded movie-card neon-border flex flex-col overflow-hidden"
+      >
+        <!-- POSTER -->
+        <MoviePoster
+          :image="movie.poster"
+          class="flex-shrink-0"
+          @click="showModal(movie)"
+        />
+        <div class="p-5 flex flex-col justify-between flex-1">
+          <!-- TITLE -->
+          <span class="font-bold text-center mb-1">{{ movie.title }}</span>
+          <span
+            v-if="logged_in"
+            class="text-center hover-pointer"
+            @click="removeMovie(movie.imdb_id)"
+          >
+            X
+          </span>
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -88,7 +82,6 @@ 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: [] });
@@ -245,7 +238,6 @@ 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);
   }