tiradoe/movie-night-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Reviewed-on: #19
This commit is contained in:
Edward Tirado Jr 2025-07-13 05:10:36 +00:00
commit e80b210c22
4 changed files with 124 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/components/ProfileMenu.vue → src/components/common/menus/ProfileMenu.vue
View file

46
src/components/common/navigation/ScrollToTop.vue Normal file
View file

@ -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>

1
src/components/common/navigation/navbar.vue
View file

@ -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>

146
src/pages/lists/[id].vue
View file

@ -1,75 +1,81 @@
<template>
<LoadingIcon v-if="loading" show-quote="true" />
<div v-else class="p-5 sm:p-0">
<Modal ref="movie_modal">
<ShowMovie
v-if="modal_movie"
:movie="modal_movie"
:updating="updating"
@close-modal="closeModal"
@update-movie="updateMovie(modal_movie)"
></ShowMovie>
</Modal>
<h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
<div
v-if="movies.length > 1 && !loading"
class="grid grid-cols-2 rounded movie-card neon-border p-5"
>
<div>
<ul class="flex flex-row">
<li>
<label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
<input
id="hide_scheduled"
v-model="hide_scheduled"
type="checkbox"
@change="hideScheduled"
/>
</li>
</ul>
</div>
<input
v-model="movie_query"
class="p-1 rounded"
placeholder="Filter Movies"
type="text"
@input="filterMovies"
/>
</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"
<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"
:movie="modal_movie"
:updating="updating"
@close-modal="closeModal"
@update-movie="updateMovie(modal_movie)"
></ShowMovie>
</Modal>
<h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
<div
v-if="movies.length > 1 && !loading"
class="grid grid-cols-2 rounded movie-card neon-border p-5"
>
<!-- 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>
<ul class="flex flex-row">
<li>
<label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
<input
id="hide_scheduled"
v-model="hide_scheduled"
type="checkbox"
@change="hideScheduled"
/>
</li>
</ul>
</div>
</li>
</ul>
<input
v-model="movie_query"
class="p-1 rounded"
placeholder="Filter Movies"
type="text"
@input="filterMovies"
/>
</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>
</div>
</template>
@ -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);
}