quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checklist styling update (#53)

Browse Source 
* Refactor checklist styling and structure

Co-authored-by: mathieumoran1 <[email protected]>

* Refactor movie display and styling for better UI

Co-authored-by: mathieumoran1 <[email protected]>

* feat: Add page loader component and integrate into player

Co-authored-by: mathieumoran1 <[email protected]>

* Refactor: Adjust IMDB icon size and alignment

Co-authored-by: mathieumoran1 <[email protected]>

* Feat: Show admin status on player page

Co-authored-by: mathieumoran1 <[email protected]>

---------

Co-authored-by: Cursor Agent <[email protected]>
This commit was merged in pull request #53.
This commit is contained in:
Mathieu Moran
2025-12-22 05:36:33 -05:00
committed by GitHub
co-authored by Cursor Agent
parent 1a460ca06c
commit 421206d280
7 changed files with 289 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/app_movies.js
+22 -13
View File
@@ -359,22 +359,31 @@ window.addEventListener('DOMContentLoaded', async function () {
: (hasLegacy ? movie.vod_link : (movie && movie._id ? `/player.html?id=${encodeURIComponent(movie._id)}` : '#'));
const movieDiv = document.createElement('div');
movieDiv.classList.add('col-md-4', 'mb-4', 'movie-card');
movieDiv.classList.add('col-12', 'col-sm-6', 'col-lg-4', 'movie-card');
movieDiv.setAttribute('data-imdb-id', movie.imdb_id);
movieDiv.innerHTML = `
<div class="card">
${isChecked ? '<div class="watched-banner">VISIONNÉ</div>' : ''}
<a href="${playerUrl}" target="_self" rel="noopener noreferrer">
<img src="${movie.poster}" class="card-img-top" alt="${movie.title}" style="width: 75%; display: block; margin: 0 auto; padding: 10px;">
<div class="card h-100 shadow-sm">
${isChecked ? '<span class="badge bg-success position-absolute top-0 start-0 m-2 watched-badge">VISIONNÉ</span>' : ''}
<a href="${playerUrl}" target="_self" rel="noopener noreferrer" class="text-decoration-none">
<div class="text-center pt-3 px-3">
<img src="${movie.poster}" class="img-fluid rounded movie-poster" alt="${movie.title}">
</div>
</a>
<div class="card-body">
<h5 class="card-title d-flex justify-content-between align-items-center">
<a href="${playerUrl}" target="_self" rel="noopener noreferrer" class="text-decoration-none text-dark">${movie.title}</a>
<span>⭐ ${movie.rating} <a href="https://www.imdb.com/title/${movie.imdb_id}/"><img src="/img/imdb.png"></a></span>
</h5>
<p class="fw-bold fst-italic card-text" style="font-size: 0.75rem;">${movie.category}</p>
<p class="card-text">${movie.description}</p>
${isChecked ? `<p class="card-text"><strong>Regardé le:</strong> ${watchedDate}</p>` : ''}
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start gap-2">
<h5 class="card-title mb-1 flex-grow-1">
<a href="${playerUrl}" target="_self" rel="noopener noreferrer" class="text-decoration-none text-dark">${movie.title}</a>
</h5>
<div class="text-nowrap small text-muted">
⭐ ${movie.rating}
<a href="https://www.imdb.com/title/${movie.imdb_id}/" target="_blank" rel="noopener noreferrer" aria-label="Voir sur IMDb">
<img src="/img/imdb.png" class="imdb-icon" alt="IMDb">
</a>
</div>
</div>
<div class="text-muted small fw-semibold fst-italic mb-2">${movie.category}</div>
<p class="card-text small flex-grow-1 mb-2">${movie.description}</p>
${isChecked ? `<div class="text-muted small"><span class="fw-semibold text-dark">Regardé le:</span> ${watchedDate}</div>` : ''}
</div>
</div>`;
moviesList.appendChild(movieDiv);