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

Refactor movie modal: remove search, improve category display

Browse Source 
Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
Cursor Agent
2025-12-22 22:26:14 +00:00
co-authored by mathieumoran1
parent 48035c2fa6
commit 6f8b94ea35
3 changed files with 17 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/app.css
+7
View File
@@ -264,6 +264,13 @@ footer {
font-size: 0.875rem;
}
.stats-movie-category {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.stats-movie-imdb {
display: inline-flex;
align-items: center;
public/js/app_user-stat.js
+9 -23
View File
@@ -359,7 +359,6 @@ window.addEventListener('DOMContentLoaded', async function () {
// Modal UI (Films regardés)
const moviesModalEl = document.getElementById('moviesModal');
const movieGridEl = document.getElementById('movie-grid');
const movieSearchEl = document.getElementById('movie-search');
const movieSortEl = document.getElementById('movie-sort');
const moviesSummaryEl = document.getElementById('movies-summary');
const moviesEmptyEl = document.getElementById('movies-empty');
@@ -394,12 +393,6 @@ window.addEventListener('DOMContentLoaded', async function () {
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) {
const arr = Array.isArray(list) ? list.slice() : [];
if (mode === 'title') {
@@ -425,18 +418,14 @@ window.addEventListener('DOMContentLoaded', async function () {
}
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 filtered = (Array.isArray(currentModalMovies) ? currentModalMovies : []).filter((m) => movieMatchesQuery(m, q));
const sorted = sortMovies(filtered, sortMode);
const sorted = sortMovies((Array.isArray(currentModalMovies) ? currentModalMovies : []), sortMode);
const total = Array.isArray(currentModalMovies) ? currentModalMovies.length : 0;
moviesSummaryEl.textContent = total
? `${sorted.length} / ${total}`
: '0';
moviesSummaryEl.textContent = total ? `${total} film${total > 1 ? 's' : ''}` : '0 film';
movieGridEl.innerHTML = '';
if (!sorted.length) {
@@ -514,10 +503,11 @@ window.addEventListener('DOMContentLoaded', async function () {
meta.className = 'stats-movie-meta';
if (category) {
const badge = document.createElement('span');
badge.className = 'badge bg-light text-dark border';
badge.textContent = category;
meta.appendChild(badge);
const cat = document.createElement('div');
cat.className = 'stats-movie-category text-muted small';
cat.title = category;
cat.textContent = category;
meta.appendChild(cat);
}
if (rating !== null && rating > 0) {
@@ -559,7 +549,6 @@ window.addEventListener('DOMContentLoaded', async function () {
: `Films regardés (${count})`;
}
if (movieSearchEl) movieSearchEl.value = '';
if (movieSortEl) movieSortEl.value = 'recent';
renderMoviesModal();
@@ -569,15 +558,12 @@ window.addEventListener('DOMContentLoaded', async function () {
}
}
if (movieSearchEl) {
movieSearchEl.addEventListener('input', () => renderMoviesModal());
}
if (movieSortEl) {
movieSortEl.addEventListener('change', () => renderMoviesModal());
}
if (moviesModalEl) {
moviesModalEl.addEventListener('shown.bs.modal', () => {
try { movieSearchEl?.focus(); } catch (_) {}
try { movieSortEl?.focus(); } catch (_) {}
});
}
public/user-stat.html
+1 -5
View File
@@ -173,11 +173,7 @@
</div>
<div class="modal-body">
<div class="d-flex flex-column gap-3">
<div class="d-flex flex-wrap gap-2 align-items-center">
<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>
<div class="d-flex flex-wrap gap-2 align-items-center justify-content-end">
<select id="movie-sort" class="form-select form-select-sm" style="max-width: 240px;">
<option value="recent">Plus récents</option>
<option value="title">Titre (A → Z)</option>