Skip to content
Snippets Groups Projects
Commit 2c48d12e authored by Tejas's avatar Tejas
Browse files

UI Overhaul Complete

parent 96cb1b5c
No related branches found
No related tags found
1 merge request!6Merge EC into Main
Hide whitespace changes
Inline Side-by-side
movie-group-8/src/views/FilmDetails.vue
+ 79
− 131
View file @ 2c48d12e
<template>
<div class="film-details">
<button class="back-button" @click="$router.back()">← Back</button>
<div v-if="loading" class="loading">Loading movie...</div>
<div v-else-if="error" class="error">Error: {{ error }}</div>
<div v-else class="details-container">
<div class="poster-container">
<img
v-if="movie.poster_path"
:src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
:alt="`${movie.title} poster`"
class="poster"
/>
</div>
<div class="min-h-screen bg-neutral-900 p-6">
<div class="max-w-[85rem] mx-auto">
<button class="text-neutral-300 mb-4 hover:underline" @click="$router.back()">← Back</button>
<div v-if="loading" class="text-center text-neutral-400 text-lg">Loading movie...</div>
<div v-else-if="error" class="text-center text-red-500 text-lg">Error: {{ error }}</div>
<div v-else class="bg-neutral-800 rounded-xl shadow-md p-6 md:p-10 space-y-10">
<!-- Poster & Trailer Card Layout -->
<div class="flex flex-col lg:flex-row gap-6">
<!-- Poster -->
<div class="w-full lg:w-1/3 flex justify-center items-start">
<img
v-if="movie.poster_path"
:src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
:alt="`${movie.title} poster`"
class="rounded-xl max-h-[473px] object-contain bg-neutral-700 p-2"
/>
</div>
<!-- Trailer -->
<div class="w-full lg:w-2/3">
<div
v-if="trailerUrl"
class="aspect-video w-full rounded-xl overflow-hidden bg-black"
>
<iframe
:src="trailerUrl"
class="w-full h-full"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</div>
<div class="info-container">
<h1 class="title">{{ movie.title }}</h1>
<p class="release-date">{{ formatDate(movie.release_date) }}</p>
<p class="overview">{{ movie.overview }}</p>
<div v-if="trailerUrl" class="trailer">
<h2>Trailer</h2>
<iframe
:src="trailerUrl"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<!-- Title and Watchlist -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<h1 class="text-3xl font-bold text-neutral-200">{{ movie.title }}</h1>
<button
type="button"
@click="toggleWatchlist"
class="px-5 py-2 rounded-xl font-medium transition duration-300"
:class="isInWatchlist
? 'bg-red-600 hover:bg-red-700'
: 'bg-green-600 hover:bg-green-700'"
>
{{ isInWatchlist ? 'Remove from Watchlist' : 'Add to Watchlist' }}
</button>
</div>
<button
type="button"
@click="toggleWatchlist"
class="mt-4 px-4 py-2 rounded text-white transition"
:class="isInWatchlist
? 'bg-red-600 hover:bg-red-700'
: 'bg-green-600 hover:bg-green-700'"
>
{{ isInWatchlist ? 'Remove from Watchlist' : 'Add to Watchlist' }}
</button>
<!-- Overview -->
<div>
<p class="text-neutral-400 text-sm mb-1">Released: {{ formatDate(movie.release_date) }}</p>
<p class="text-neutral-300 leading-relaxed">{{ movie.overview }}</p>
</div>
<!-- Review Button -->
<RouterLink
:to="{ name: 'ReviewFilm', params: { id: movie.id } }"
class="mt-2 inline-block px-4 py-2 bg-blue-600 rounded text-white hover:bg-blue-700 text-center"
class="inline-block bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-300"
>
Review this Film
</RouterLink>
<div class="mt-6 reviews-section">
<h2 class="text-xl mb-2 text-white">User Reviews</h2>
<div v-if="reviewsLoading" class="text-gray-400">Loading reviews…</div>
<div v-else-if="!reviews.length" class="text-gray-400">No reviews yet.</div>
<!-- Reviews -->
<div>
<h2 class="text-2xl font-semibold text-neutral-200 mb-4">User Reviews</h2>
<div v-if="reviewsLoading" class="text-neutral-400">Loading reviews…</div>
<div v-else-if="!reviews.length" class="text-neutral-500">No reviews yet.</div>
<ul v-else class="space-y-4">
<li v-for="(r, i) in reviews" :key="i" class="bg-neutral-800 p-4 rounded">
<li
v-for="(r, i) in reviews"
:key="i"
class="bg-neutral-700 p-4 rounded-lg"
>
<div class="flex items-center mb-2">
<img
v-if="r.authorPFP"
:src="r.authorPFP"
v-if="r.authorPFP"
:src="r.authorPFP"
alt=""
class="h-8 w-8 rounded-full mr-2"/>
<span class="font-semibold text-white">{{ r.authorName }}</span>
<span class="text-gray-400 ml-2">{{ r.rating }}★</span>
</div>
<p class="text-gray-200">{{ r.text }}</p>
</li>
class="h-8 w-8 rounded-full mr-2"
/>
<span class="font-semibold text-neutral-100">{{ r.authorName }}</span>
<span class="text-yellow-400 ml-2">{{ r.rating }}★</span>
</div>
<p class="text-neutral-300">{{ r.text }}</p>
</li>
</ul>
</div>
</div>
......@@ -71,13 +96,14 @@
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useWatchlist } from '@/composables/useWatchlist.js'
import { getAuth } from 'firebase/auth'
import { getFirestore, doc, getDoc } from 'firebase/firestore'
import { getAllReviews } from '@/composables/useReviews.js'
import { getAllReviews } from '@/composables/useReviews.js'
const route = useRoute()
const movie = ref(null)
......@@ -146,81 +172,3 @@ onMounted(async () => {
loading.value = false
})
</script>
<style scoped>
.film-details {
background-color: #121212;
color: #ffffff;
min-height: 100vh;
padding: 2rem;
box-sizing: border-box;
}
.back-button {
color: #ffffff;
background: transparent;
margin-bottom: 1rem;
font-size: 1rem;
}
.loading,
.error {
color: #ffffff;
text-align: center;
margin: 2rem 0;
}
.details-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
background-color: #1e1e1e;
padding: 2rem;
border-radius: 8px;
max-width: 900px;
margin: 2rem auto 0;
}
.poster-container {
flex: 0 0 300px;
}
.poster {
width: 100%;
border-radius: 4px;
}
.info-container {
flex: 1;
display: flex;
flex-direction: column;
}
.title {
font-size: 2rem;
margin: 0 0 0.5rem;
}
.release-date {
color: #bbbbbb;
margin-bottom: 1rem;
}
.overview {
color: #dddddd;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.trailer h2 {
margin-bottom: 0.5rem;
color: #ffffff;
}
.trailer iframe {
width: 100%;
height: 300px;
border-radius: 8px;
border: none;
}
</style>
movie-group-8/src/views/Profile.vue
+ 38
− 21
View file @ 2c48d12e
<template>
<div class="min-h-screen bg-gray-100 dark:bg-neutral-900 text-center px-4 py-8 pt-20">
<div class="text-center mb-10">
<div class="bg-neutral-800 border border-neutral-700 text-center max-w-2xl mx-auto p-6 rounded-2xl shadow mb-10">
<img
v-if="userPhotoURL"
:src="userPhotoURL"
alt="Profile Picture"
class="w-28 h-28 mx-auto rounded-full object-cover mb-4"
class="w-24 h-24 mx-auto rounded-full object-cover mb-4 border-2 border-white"
/>
<h1 class="text-3xl font-bold text-gray-800 dark:text-white">{{ displayName || 'Anonymous' }}</h1>
<p class="text-sm text-gray-600 dark:text-neutral-400">{{ userEmail }}</p>
<p class="mt-2 text-base text-gray-600 dark:text-neutral-400">{{ description }}</p>
<h1 class="text-2xl font-bold text-white">{{ displayName || 'Anonymous' }}</h1>
<p class="text-sm text-neutral-400">{{ userEmail }}</p>
<p class="mt-2 text-base text-neutral-400">{{ description }}</p>
<router-link
to="/settings"
class="mt-4 inline-block px-5 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
>
class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
>
Edit Profile
</router-link>
</div>
......@@ -56,10 +55,10 @@
:key="tab"
@click="activeTab = tab"
:class="[
'px-4 py-2 rounded-lg text-sm font-medium',
'px-5 py-2 rounded-full text-sm font-medium transition',
activeTab === tab
? 'bg-blue-600 text-white'
: 'bg-white dark:bg-neutral-700 text-gray-800 dark:text-white border border-gray-300 dark:border-neutral-600'
? 'bg-white text-black dark:bg-white dark:text-black'
: 'bg-neutral-700 text-white hover:bg-neutral-600'
]"
>
{{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
......@@ -67,21 +66,39 @@
</div>
<!-- Tab Content -->
<div v-if="activeTab === 'watchlist'" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div v-if="activeTab === 'watchlist'" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5 xl:grid-cols-5">
<router-link
v-for="movie in watchlist"
:key="movie.id"
:to="`/films/${movie.id}`"
class="block bg-white dark:bg-neutral-800 border dark:border-neutral-700 rounded-lg p-3 hover:opacity-90 transition"
class="rounded-xl overflow-hidden border border-neutral-700 bg-neutral-800 shadow hover:brightness-110 transition flex flex-col"
>
<img
v-if="movie.poster_path"
:src="'https://image.tmdb.org/t/p/w342' + movie.poster_path"
alt="Poster"
class="w-full h-60 object-cover rounded mb-3"
/>
<p class="font-semibold text-gray-800 dark:text-white">{{ movie.title }}</p>
<p class="text-sm text-gray-600 dark:text-neutral-400">⭐ {{ movie.vote_average }} — {{ movie.status }}</p>
<div class="rounded-t-xl overflow-hidden">
<img
v-if="movie.poster_path"
:src="'https://image.tmdb.org/t/p/w342' + movie.poster_path"
alt="Poster"
class="w-full object-contain"
/>
</div>
<div class="p-3 flex flex-col grow">
<p class="text-base font-semibold text-white">{{ movie.title }}</p>
<p class="mt-1 text-sm text-neutral-400 line-clamp-3">
{{ movie.overview }}
</p>
<div class="mt-auto flex justify-between items-center border-t border-neutral-700 pt-2 mt-3">
<span class="text-sm font-semibold text-blue-400">
⭐ {{ movie.vote_average.toFixed(1) }}
</span>
<span
class="px-3 py-1 text-xs rounded-md bg-neutral-700 text-white border border-neutral-600"
>
{{ movie.status === 'planned' ? 'Planned' : 'Watched' }}
</span>
</div>
</div>
</router-link>
</div>
......
movie-group-8/src/views/UserProfile.vue
+ 1
− 1
View file @ 2c48d12e
<template>
<div class="min-h-screen bg-gray-100 dark:bg-neutral-900 p-6">
<div class="text-center mb-10">
<div class="text-center mt-16 mb-10">
<img
v-if="user.photoURL"
:src="user.photoURL"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment