mahdium/TBW
1
0
Fork 0
mirror of https://github.com/mmahdium/TBW.git synced 2025-11-04 09:09:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI

Browse Source
This commit is contained in:
Mohammad Mahdi
2025-10-21 20:59:35 +03:30
parent 1ac22b60ca
commit 8e5249ab99
3 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/MovieDetails.vue
View File

@@ -17,11 +17,7 @@ const alreadyAdded = computed(() =>
<template> <template>
<ErrorAlert v-if="props.movie?.Error" :message="props.movie.ErrorMessage" /> <ErrorAlert v-if="props.movie?.Error" :message="props.movie.ErrorMessage" />
<div
v-else
class="min-h-screen flex items-center justify-center px-6 py-12
bg-gradient-to-b from-gray-50 to-white"
>
<!-- Loading state --> <!-- Loading state -->
<div v-if="props.movie === undefined" class="flex justify-center items-center"> <div v-if="props.movie === undefined" class="flex justify-center items-center">
<span class="loading loading-ring loading-lg text-primary"></span> <span class="loading loading-ring loading-lg text-primary"></span>
@@ -99,5 +95,5 @@ const alreadyAdded = computed(() =>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>

2
src/components/MovieList.vue
View File

@@ -27,7 +27,7 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
<ul <ul
v-auto-animate v-auto-animate
v-else v-else
class="grid gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 lg:gap-8" class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
> >
<li v-for="movie in props.movies" :key="movie.imdbID" v-auto-animate> <li v-for="movie in props.movies" :key="movie.imdbID" v-auto-animate>
<MovieCard <MovieCard

8
src/components/NavBar.vue
View File

@@ -36,7 +36,7 @@
bg-white/80 backdrop-blur-md border border-gray-200/60" bg-white/80 backdrop-blur-md border border-gray-200/60"
> >
<li><RouterLink class="text-gray-700 hover:text-gray-900" to="/">Home</RouterLink></li> <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/">Home</RouterLink></li>
<li><RouterLink class="text-gray-700 hover:text-gray-900" to="/list">List</RouterLink></li> <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/list">Library</RouterLink></li>
<li><RouterLink class="text-gray-700 hover:text-gray-900" to="/add">Add</RouterLink></li> <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/add">Add</RouterLink></li>
</ul> </ul>
</div> </div>
@@ -55,7 +55,7 @@
<div class="navbar-center hidden lg:flex"> <div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1 space-x-4"> <ul class="menu menu-horizontal px-1 space-x-4">
<li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink></li> <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink></li>
<li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list">List</RouterLink></li> <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list">Library</RouterLink></li>
<li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add">Add</RouterLink></li> <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add">Add</RouterLink></li>
</ul> </ul>
</div> </div>
@@ -65,9 +65,9 @@
<RouterLink <RouterLink
class="btn px-5 bg-gradient-to-r from-gray-100 to-gray-200 class="btn px-5 bg-gradient-to-r from-gray-100 to-gray-200
border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300" border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
to="/add" to="/list"
> >
Get Started Go to library
</RouterLink> </RouterLink>
</div> </div>
</div> </div>