Statistics page redesign #60

Merged
quoije merged 17 commits from cursor/statistics-page-redesign-d08a into 2026 2025-12-22 18:16:37 -05:00
3 changed files with 17 additions and 28 deletions
Showing only changes of commit 6f8b94ea35 - Show all commits
+7
View File
@@ -264,6 +264,13 @@ footer {
font-size: 0.875rem; font-size: 0.875rem;
} }
.stats-movie-category {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.stats-movie-imdb { .stats-movie-imdb {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
+9 -23
View File
@@ -359,7 +359,6 @@ window.addEventListener('DOMContentLoaded', async function () {
// Modal UI (Films regardés) // Modal UI (Films regardés)
const moviesModalEl = document.getElementById('moviesModal'); const moviesModalEl = document.getElementById('moviesModal');
const movieGridEl = document.getElementById('movie-grid'); const movieGridEl = document.getElementById('movie-grid');
const movieSearchEl = document.getElementById('movie-search');
const movieSortEl = document.getElementById('movie-sort'); const movieSortEl = document.getElementById('movie-sort');
const moviesSummaryEl = document.getElementById('movies-summary'); const moviesSummaryEl = document.getElementById('movies-summary');
const moviesEmptyEl = document.getElementById('movies-empty'); const moviesEmptyEl = document.getElementById('movies-empty');
@@ -394,12 +393,6 @@ window.addEventListener('DOMContentLoaded', async function () {
return s; return s;
} }
function movieMatchesQuery(movie, q) {
if (!q) return true;
const hay = `${safeStr(movie?.title)} ${safeStr(movie?.category)} ${safeStr(movie?.imdb_id)}`.toLowerCase();
return hay.includes(q.toLowerCase());
}
function sortMovies(list, mode) { function sortMovies(list, mode) {
const arr = Array.isArray(list) ? list.slice() : []; const arr = Array.isArray(list) ? list.slice() : [];
if (mode === 'title') { if (mode === 'title') {
@@ -425,18 +418,14 @@ window.addEventListener('DOMContentLoaded', async function () {
} }
function renderMoviesModal() { function renderMoviesModal() {
if (!movieGridEl || !movieSearchEl || !movieSortEl || !moviesSummaryEl || !moviesEmptyEl) return; if (!movieGridEl || !movieSortEl || !moviesSummaryEl || !moviesEmptyEl) return;
const q = safeStr(movieSearchEl.value).trim();
const sortMode = safeStr(movieSortEl.value).trim() || 'recent'; const sortMode = safeStr(movieSortEl.value).trim() || 'recent';
const filtered = (Array.isArray(currentModalMovies) ? currentModalMovies : []).filter((m) => movieMatchesQuery(m, q)); const sorted = sortMovies((Array.isArray(currentModalMovies) ? currentModalMovies : []), sortMode);
const sorted = sortMovies(filtered, sortMode);
const total = Array.isArray(currentModalMovies) ? currentModalMovies.length : 0; const total = Array.isArray(currentModalMovies) ? currentModalMovies.length : 0;
moviesSummaryEl.textContent = total moviesSummaryEl.textContent = total ? `${total} film${total > 1 ? 's' : ''}` : '0 film';
? `${sorted.length} / ${total}`
: '0';
movieGridEl.innerHTML = ''; movieGridEl.innerHTML = '';
if (!sorted.length) { if (!sorted.length) {
@@ -514,10 +503,11 @@ window.addEventListener('DOMContentLoaded', async function () {
meta.className = 'stats-movie-meta'; meta.className = 'stats-movie-meta';
if (category) { if (category) {
const badge = document.createElement('span'); const cat = document.createElement('div');
badge.className = 'badge bg-light text-dark border'; cat.className = 'stats-movie-category text-muted small';
badge.textContent = category; cat.title = category;
meta.appendChild(badge); cat.textContent = category;
meta.appendChild(cat);
} }
if (rating !== null && rating > 0) { if (rating !== null && rating > 0) {
@@ -559,7 +549,6 @@ window.addEventListener('DOMContentLoaded', async function () {
: `Films regardés (${count})`; : `Films regardés (${count})`;
} }
if (movieSearchEl) movieSearchEl.value = '';
if (movieSortEl) movieSortEl.value = 'recent'; if (movieSortEl) movieSortEl.value = 'recent';
renderMoviesModal(); renderMoviesModal();
@@ -569,15 +558,12 @@ window.addEventListener('DOMContentLoaded', async function () {
} }
} }
if (movieSearchEl) {
movieSearchEl.addEventListener('input', () => renderMoviesModal());
}
if (movieSortEl) { if (movieSortEl) {
movieSortEl.addEventListener('change', () => renderMoviesModal()); movieSortEl.addEventListener('change', () => renderMoviesModal());
} }
if (moviesModalEl) { if (moviesModalEl) {
moviesModalEl.addEventListener('shown.bs.modal', () => { moviesModalEl.addEventListener('shown.bs.modal', () => {
try { movieSearchEl?.focus(); } catch (_) {} try { movieSortEl?.focus(); } catch (_) {}
}); });
} }
+1 -5
View File
@@ -173,11 +173,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="d-flex flex-column gap-3"> <div class="d-flex flex-column gap-3">
<div class="d-flex flex-wrap gap-2 align-items-center"> <div class="d-flex flex-wrap gap-2 align-items-center justify-content-end">
<div class="input-group input-group-sm flex-grow-1" style="min-width: 220px;">
<span class="input-group-text">Rechercher</span>
<input id="movie-search" type="search" class="form-control" placeholder="Titre, catégorie…" autocomplete="off">
</div>
<select id="movie-sort" class="form-select form-select-sm" style="max-width: 240px;"> <select id="movie-sort" class="form-select form-select-sm" style="max-width: 240px;">
<option value="recent">Plus récents</option> <option value="recent">Plus récents</option>
<option value="title">Titre (A → Z)</option> <option value="title">Titre (A → Z)</option>