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/checklist.html
+34 -22
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,25 +85,42 @@
<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">
<thead>
<tr>
<th scope="col">Vu</th>
<th scope="col">Titre</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody id="movie-table-body">
<!-- Movie rows will be inserted here -->
</tbody>
</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>
<th scope="col">Titre</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody id="movie-table-body">
<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>