cleaned up mobile styling and updated input action component

This commit is contained in:
Edward Tirado Jr 2026-04-08 19:04:15 -05:00
parent 59fb81a42e
commit a8488f111f
11 changed files with 112 additions and 56 deletions

View file

@ -20,10 +20,9 @@ const refreshLists = () => {
<div class="content">
<PageTitle title="Lists"/>
<Card class="card">
<CreateListForm @refreshLists="refreshLists"/>
<div class="w-full flex flex-col gap-5">
<h2 class="text-2xl font-bold">Your Lists</h2>
<div class="user-list-container">
<h2 class="">Your Lists</h2>
<span v-if="!listGroup?.movie_lists?.length" class="not-found-message">No lists found.</span>
<ul v-else class="movie-list">
<li v-for="list in listGroup?.movie_lists"
@ -35,10 +34,11 @@ const refreshLists = () => {
</NuxtLink>
</li>
</ul>
<CreateListForm @refreshLists="refreshLists"/>
</div>
<div class="w-full flex flex-col gap-5">
<h2 class="text-2xl font-bold">Shared With You</h2>
<div>
<h2>Shared With You</h2>
<span v-if="!listGroup?.shared_lists?.length" class="not-found-message">No shared lists found.</span>
<ul v-else class="movie-list">
<li v-for="list in listGroup?.shared_lists"
@ -60,7 +60,7 @@ const refreshLists = () => {
.card {
display: flex;
flex-direction: column;
gap: 1rem;
gap: 2rem;
}
.movie-list {
@ -91,4 +91,10 @@ const refreshLists = () => {
padding: 1em 0;
}
.user-list-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
</style>