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

Improve classes

Browse Source
This commit is contained in:
Mohammad Mahdi
2025-10-23 21:36:15 +03:30
parent 037be3c0ef
commit 5f9aa5b61b
12 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AddMoreCard.vue
View File

@@ -3,7 +3,7 @@
<template>
<router-link
to="/add"
class="card relative w-full h-full flex items-center justify-center aspect-[2/3] bg-white/40 backdrop-blur-md border-2 border-dashed border-gray-300 rounded-lg shadow-sm hover:shadow-md hover:border-gray-400 transition-all duration-300"
class="card relative w-full h-full flex items-center justify-center aspect-2/3 bg-white/40 backdrop-blur-md border-2 border-dashed border-gray-300 rounded-lg shadow-sm hover:shadow-md hover:border-gray-400 transition-all duration-300"
v-motion-fade-visible-once
>
<!-- Plus icon -->

8
src/components/MediaCard.vue
View File

@@ -30,7 +30,7 @@ const imageSource = computed(() => {
<router-link
:to="{ name: 'details', params: { type: props.movie.MediaType, id: props.movie.Id } }"
>
<figure class="overflow-hidden flex items-center justify-center aspect-[2/3] bg-gray-50">
<figure class="overflow-hidden flex items-center justify-center aspect-2/3 bg-gray-50">
<span v-if="!loaded" class="loading loading-ring loading-lg text-primary"></span>
<div v-else-if="imageLoadFailed" class="flex items-center justify-center">
@@ -72,7 +72,7 @@ const imageSource = computed(() => {
:to="{ name: 'details', params: { type: props.movie.MediaType, id: props.movie.Id } }"
>
<h2
class="card-title text-base font-semibold bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="card-title text-base font-semibold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
>
{{ props.movie.Title }}
</h2>
@@ -83,7 +83,7 @@ const imageSource = computed(() => {
<button
v-motion-fade-visible-once
v-if="!alreadyAdded"
class="btn btn-sm px-4 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 hover:text-gray-900 transition"
class="btn btn-sm px-4 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
@click="store.addMedia(props.movie)"
>
Add
@@ -91,7 +91,7 @@ const imageSource = computed(() => {
<button
v-motion-fade-visible-once
v-else
class="btn btn-sm px-4 bg-gradient-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200 hover:text-red-700 transition"
class="btn btn-sm px-4 bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200 hover:text-red-700 transition"
@click="store.removeMedia(props.movie.Id)"
>
Remove

14
src/components/MediaDetails.vue
View File

@@ -37,7 +37,7 @@ const alreadyAdded = computed(() =>
v-motion-fade-visible-once
>
<!-- Poster -->
<figure class="flex-shrink-0">
<figure class="shrink-0">
<span v-if="!imageLoaded" class="loading loading-ring loading-lg text-primary"></span>
<img
v-show="imageLoaded"
@@ -85,19 +85,19 @@ const alreadyAdded = computed(() =>
<span
v-for="g in props.type === 'movie' ? props.movie!.Genres : props.tvSeries!.Genres"
:key="g.id"
class="px-3 py-1 rounded-md text-sm bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
class="px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
>
{{ g.name }}
</span>
<span
v-if="props.type === 'movie'"
class="px-3 py-1 rounded-md text-sm bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
class="px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
>
Runtime: {{ props.movie!.Runtime }} min
</span>
<span
v-if="props.type === 'tv'"
class="px-3 py-1 rounded-md text-sm bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
class="px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
>
Seasons: {{ props.tvSeries!.NumberOfSeasons }}
</span>
@@ -108,14 +108,14 @@ const alreadyAdded = computed(() =>
<template v-if="(props.movie && props.media) || (props.tvSeries && props.media)">
<button
v-if="!alreadyAdded"
class="btn px-6 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"
class="btn px-6 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
@click="store.addMedia(props.media)"
>
Add to list
</button>
<button
v-else
class="btn px-6 bg-gradient-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
class="btn px-6 bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
@click="store.removeMedia(props.media.Id)"
>
Remove from library
@@ -132,7 +132,7 @@ const alreadyAdded = computed(() =>
}"
>
<button
class="btn relative flex items-center gap-2 px-6 bg-gradient-to-r from-indigo-500 to-violet-500 text-white border-0 shadow-md hover:opacity-90 transition"
class="btn relative flex items-center gap-2 px-6 bg-linear-to-r from-indigo-500 to-violet-500 text-white border-0 shadow-md hover:opacity-90 transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"

2
src/components/MovieList.vue
View File

@@ -39,7 +39,7 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
<div v-if="props.isSearch && props.movies.length > 0" class="flex justify-center mt-8">
<button
class="btn px-6 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 hover:text-gray-900 disabled:opacity-50"
class="btn px-6 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 disabled:opacity-50"
@click="emit('loadMore')"
:disabled="props.loadingMore"
>

4
src/components/NavBar.vue
View File

@@ -36,7 +36,7 @@
<!-- Logo -->
<RouterLink
class="btn btn-ghost normal-case text-2xl font-bold bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="btn btn-ghost normal-case text-2xl font-bold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
to="/"
>
To Vue
@@ -65,7 +65,7 @@
<!-- Right -->
<div class="navbar-end">
<RouterLink
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"
class="btn px-5 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
to="/list"
>
Go to library

2
src/components/SearchBar.vue
View File

@@ -48,7 +48,7 @@ function onSubmit() {
<!--
<button
type="submit"
class="px-4 py-2 bg-gradient-to-r from-gray-100 to-gray-200
class="px-4 py-2 bg-linear-to-r from-gray-100 to-gray-200
border-l border-gray-200 text-gray-600 hover:text-gray-800
transition"
>

2
src/views/AddView.vue
View File

@@ -88,7 +88,7 @@ watch(searchQuery, () => {
<div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
<!-- Title -->
<h1
class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
>
Add a Movie
</h1>

2
src/views/DetailsView.vue
View File

@@ -64,7 +64,7 @@ onMounted(async () => {
<!-- Details -->
<MediaDetails
v-else-if="movieDetails || tvSeriesDetails"
:type="(route.params.type as 'movie' | 'tv')"
:type="route.params.type === 'movie' ? 'movie' : 'tv'"
:media="media"
:movie="movieDetails"
:tv-series="tvSeriesDetails"

2
src/views/HomeView.vue
View File

@@ -14,7 +14,7 @@
<RouterLink
to="/add"
class="btn px-8 py-3 text-lg font-medium 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 hover:text-gray-900 transition"
class="btn px-8 py-3 text-lg font-medium bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
>
Get Started
</RouterLink>

2
src/views/ListView.vue
View File

@@ -8,7 +8,7 @@ const store = useMediaStore()
<template>
<div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
<h1
class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
>
Movie Library
</h1>

6
src/views/NotFoundView.vue
View File

@@ -2,11 +2,11 @@
<template>
<div
class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-gray-50 to-white px-4"
class="min-h-screen flex flex-col items-center justify-center bg-linear-to-b from-gray-50 to-white px-4"
>
<!-- Big 404 -->
<h1
class="text-8xl font-extrabold mb-4 bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="text-8xl font-extrabold mb-4 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
>
404
</h1>
@@ -19,7 +19,7 @@
<!-- Button back home -->
<RouterLink
to="/"
class="btn px-6 py-3 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 hover:text-gray-900 transition"
class="btn px-6 py-3 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
>
Back to Home
</RouterLink>

4
src/views/WatchView.vue
View File

@@ -9,7 +9,7 @@ const isLoaded = ref(false)
</script>
<template>
<div class="flex justify-center min-h-auto px-4 py-12 bg-gradient-to-b from-gray-50 to-white">
<div class="flex justify-center min-h-auto px-4 py-12 bg-linear-to-b from-gray-50 to-white">
<div
class="w-full max-w-6xl bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-md rounded-xl p-4 lg:p-8 transition flex flex-col items-center"
v-motion-fade-visible-once
@@ -18,7 +18,7 @@ const isLoaded = ref(false)
<div class="flex items-center gap-3 mb-6">
<h1 class="text-3xl font-bold text-gray-700">
Watch <br />
<span class="bg-gradient-to-r from-indigo-500 to-cyan-400 bg-clip-text text-transparent">
<span class="bg-linear-to-r from-indigo-500 to-cyan-400 bg-clip-text text-transparent">
{{ movieName }}
</span>
</h1>