Refactor movie display and styling for better UI

Co-authored-by: mathieumoran1 <[email protected]>

public/css/app.css

@@ -164,4 +164,21 @@ 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

@@ -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">
+          <div class="card h-100 shadow-sm">
-            ${isChecked ? '<div class="watched-banner">VISIONNÉ</div>' : ''}
+            ${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">
+            <a href="${playerUrl}" target="_self" rel="noopener noreferrer" class="text-decoration-none">
-              <img src="${movie.poster}" class="card-img-top" alt="${movie.title}" style="width: 75%; display: block; margin: 0 auto; padding: 10px;">
+              <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">
+            <div class="card-body d-flex flex-column">
-              <h5 class="card-title d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-start gap-2">
-                <a href="${playerUrl}" target="_self" rel="noopener noreferrer" class="text-decoration-none text-dark">${movie.title}</a>
+                <h5 class="card-title mb-1 flex-grow-1">
-                <span>⭐ ${movie.rating} <a href="https://www.imdb.com/title/${movie.imdb_id}/"><img src="/img/imdb.png"></a></span>
+                  <a href="${playerUrl}" target="_self" rel="noopener noreferrer" class="text-decoration-none text-dark">${movie.title}</a>
-              </h5>
+                </h5>
-              <p class="fw-bold fst-italic card-text" style="font-size: 0.75rem;">${movie.category}</p>
+                <div class="text-nowrap small text-muted">
-              <p class="card-text">${movie.description}</p>
+                  ⭐ ${movie.rating}
-              ${isChecked ? `<p class="card-text"><strong>Regardé le:</strong> ${watchedDate}</p>` : ''}
+                  <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

@@ -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>
-    <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>
+
+      <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 class="text-muted small">Clique sur l’affiche ou le titre pour ouvrir le lecteur.</div>
+      </div>
+    </div>
   </div>
 
-  <!-- Displaying last updated vod_links -->
+  <div id="movies-list" class="row g-3 mt-1">
-  <div class="alert alert-warning fade show" role="alert">
+    <div class="col-12">
-    Dernière mise à jour des films: <strong id="movies-last-updated">—</strong>
+      <div class="text-center py-4 text-muted" aria-live="polite" aria-busy="true">Chargement…</div>
-  </div>
+    </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">
-    <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>
 </div>