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

Refactor checklist styling and structure

Browse Source 
Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
Cursor Agent
2025-12-22 10:19:35 +00:00
co-authored by mathieumoran1
parent 1a460ca06c
commit c3ab04f805
2 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/checklist.html
+24 -12
View File
@@ -44,11 +44,6 @@
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* New styles for table */
.table-hover tbody tr:hover {
background-color: #f1f1f1;
cursor: pointer;
}
</style>
</head>
<body class="bg-light page-loading">
@@ -90,14 +85,27 @@
<div class="container mt-5">
<h2>Checklist</h2>
<div id="watched-ratio" class="ratio"></div>
<h3 class="fs-6" style="margin-bottom: -1px;">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"><span id="movies-per-day"></span></h3>
<div class="progress my-3">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%; background-color: red;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<!-- Summary card (match Stats page spacing/structure) -->
<div class="card shadow-sm mt-3">
<div class="card-body">
<div class="d-flex flex-column gap-1">
<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 class="text-muted small"><span id="movies-per-day"></span></div>
</div>
<div class="progress mt-3" style="height: 10px;">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%; background-color: red;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-busy="true"></div>
</div>
</div>
</div>
<!-- Table for movies -->
<table class="table table-hover movie-table">
<div class="table-responsive mt-3">
<table class="table table-striped table-hover align-middle movie-table mb-0">
<thead>
<tr>
<th scope="col">Vu</th>
@@ -106,9 +114,13 @@
</tr>
</thead>
<tbody id="movie-table-body">
<!-- Movie rows will be inserted here -->
<tr>
<td colspan="3" class="text-center py-4 text-muted" aria-live="polite" aria-busy="true">Chargement…</td>
</tr>
</tbody>
</table>
</div>
<br><br>
</div>
public/js/app_checklist.js
+11 -8
View File
@@ -453,12 +453,9 @@ window.addEventListener('DOMContentLoaded', async function () {
<td id="watched-date-${movie.imdb_id}">${watchedDate}</td>
`;
// Set initial row color based on watched state
if (watchedMovie) {
movieRow.style.backgroundColor = 'rgba(144, 238, 144, 0.6)'; // Lighter light green with transparency
} else {
movieRow.style.backgroundColor = 'rgba(255, 99, 71, 0.6)'; // Lighter light red with transparency
}
// Use Bootstrap table state classes (matches Stats page styling better than custom backgrounds)
movieRow.classList.toggle('table-success', Boolean(watchedMovie));
movieRow.classList.toggle('table-danger', !watchedMovie);
movieTableBody.appendChild(movieRow);
@@ -478,10 +475,16 @@ window.addEventListener('DOMContentLoaded', async function () {
if (isChecked) {
watchedDateCell.textContent = new Date().toLocaleString();
row.style.backgroundColor = 'rgba(144, 238, 144, 0.6)'; // Apply light green with transparency
if (row) {
row.classList.add('table-success');
row.classList.remove('table-danger');
}
} else {
watchedDateCell.textContent = '';
row.style.backgroundColor = 'rgba(255, 99, 71, 0.6)'; // Apply light red with transparency
if (row) {
row.classList.add('table-danger');
row.classList.remove('table-success');
}
}
await fetch('/api/movies/users/updateWatchedMovies', {