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

added settings and profile pages

Browse source
This commit is contained in:
Edward Tirado Jr 2025-07-07 18:04:12 -05:00
parent 92b78e9c40
commit 56149f90b6
15 changed files with 451 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/pages/user/profile.vue Normal file
View file

@ -0,0 +1,116 @@
<script lang="ts" setup></script>
<template>
<h2 class="page-header">Profile</h2>
<div id="profile-card" class="movie-card neon-border">
<div id="user-data">
<div id="profile-picture">
<img
alt="profile image"
class="user-icon neon-border"
src="https://placecage.lucidinternets.com/g/200/200"
/>
</div>
<ul class="profile-details">
<li class="user-detail">
<label for="name">Name</label>
<span id="name">Eddie Tirado</span>
</li>
<li class="user-detail">
<label for="username">Username</label>
<span id="username">tiradoe@movienight.social</span>
</li>
<li class="user-detail">
<label for="date-joined">Date Joined</label>
<span id="date-joined">8 Feb 1984</span>
</li>
</ul>
</div>
<hr class="neon-border my-5" />
<div id="extra-fields">
<div id="reviews">
<h3 class="section-header">Reviews</h3>
<ul class="movie-review-list">
<li class="movie-review">
<span>The Room</span>
<span>*****</span>
<span>Best. Movie. Ever.</span>
</li>
<li class="movie-review">
<span>Citizen Kane</span>
<span>*</span>
<span>Trash</span>
</li>
</ul>
</div>
<div id="movielists">
<h3 class="section-header">Lists</h3>
<ul id="movielist-list"></ul>
</div>
</div>
</div>
</template>
<style scoped>
label {
font-weight: bold;
font-size: 1.2rem;
}
.section-header {
font-size: 1.5rem;
line-height: calc(2 / 1.5);
padding-bottom: 1rem;
}
#user-data {
display: flex;
flex-direction: column;
align-items: center;
}
.user-detail {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.user-icon {
object-fit: cover;
border-radius: 2rem;
}
.profile-details {
display: flex;
flex-direction: column;
gap: 1rem;
list-style: none;
margin: 3rem 0;
}
.movie-card {
padding: 2rem;
}
.movie-review {
display: flex;
flex-direction: row;
gap: 1rem;
}
#extra-fields {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (width >= 48rem) {
#user-data {
flex-direction: row;
gap: 5rem;
}
}
</style>