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

Checklist styling update #53

Merged
quoije merged 5 commits from cursor/checklist-styling-update-82ef into 2026-video.backend 2025-12-22 05:36:34 -05:00
Conversation 1 Commits 5 Files Changed 7
+66 -69
3 changed files with 66 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b5dd58f80a - Show all commits
public/css/app.css
+17
View File
@@ -165,3 +165,20 @@ footer {
.app-version-list .list-group-item:last-child {
border-bottom: 0;
}
/* Movies page helpers (Bootstrap-first, minimal custom) */
.movie-poster {
width: 100%;
max-height: 360px;
object-fit: contain;
}
.imdb-icon {
width: 18px;
height: 18px;
vertical-align: text-bottom;
}
.watched-badge {
z-index: 2;
}
public/js/app_movies.js
+20 -11
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">
<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>
<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="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);
public/movies.html
+23 -52
View File
@@ -21,42 +21,9 @@
color: #ddd;
}
/* Style for the 'WATCHED' banner */
.watched-banner {
background-color: green;
color: white;
text-align: center;
padding: 5px;
font-weight: bold;
position: absolute;
top: 10px;
width: 100%;
z-index: 1;
}
/* Centering checkbox and making card look better */
.movie-card {
position: relative;
margin-bottom: 20px;
}
.card-body {
position: relative;
}
#movies-list {
margin-top: 10px;
}
/* Style for the filter button */
#filter-button {
margin-left: 15px;
}
/* Style for the ratio display */
.ratio {
font-weight: bold;
margin-top: 10px;
}
.navbar-toggler {
border-color: white; /* Make the border white */
}
@@ -104,31 +71,35 @@
</nav>
<div class="container mt-5">
<div class="d-flex justify-content-between align-items-center">
<h2>Films</h2>
<!-- Summary card (match Statistiques/Checklist structure) -->
<div class="card shadow-sm mt-3">
<div class="card-body">
<div class="d-flex flex-column gap-1">
<div class="text-muted small">
Dernière mise à jour des films: <span class="fw-semibold text-dark" id="movies-last-updated">—</span>
</div>
<div id="watched-ratio" class="fw-semibold">—</div>
<div class="text-muted small">
Temps avant les Oscars (<span id="oscar-date-day-month">—</span> <span id="oscar-year">—</span>) — <span id="time-left">—</span>
</div>
</div>
<!-- Displaying last updated vod_links -->
<div class="alert alert-warning fade show" role="alert">
Dernière mise à jour des films: <strong id="movies-last-updated">—</strong>
</div>
<!-- Displaying the ratio of watched movies -->
<div id="watched-ratio" class="ratio">
<!-- This will display the ratio -->
</div>
<h3 class="fs-6">Temps avant les Oscars (<span id="oscar-date-day-month">—</span> <span id="oscar-year">—</span>) - <span id="time-left"></span></h3>
<h3 class="fs-6 mb-0">
</h3>
<br>
<div class="form-check form-switch">
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-2 mt-3">
<div class="form-check form-switch m-0">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Films non regardés seulement</label>
</div>
<div id="movies-list" class="row">
<!-- Movies will be displayed here -->
<div class="text-muted small">Clique sur l’affiche ou le titre pour ouvrir le lecteur.</div>
</div>
</div>
</div>
<div id="movies-list" class="row g-3 mt-1">
<div class="col-12">
<div class="text-center py-4 text-muted" aria-live="polite" aria-busy="true">Chargement…</div>
</div>
</div>
</div>