Update: Design / Style

JeremGamingYT · Dec 24, 2024 · 97e0a5e · 97e0a5e
1 parent ddb42f7
commit 97e0a5e
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 58 deletions.
diff --git a/popup.css b/popup.css
@@ -13,13 +13,13 @@
 }
 
 body {
-  vertical-align: middle;
   background-color: var(--primary-bg);
   width: 420px;
   color: var(--text-color);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   margin: 0;
   padding: 16px;
+  box-sizing: border-box;
 }
 
 /* Barre du haut */
@@ -59,6 +59,7 @@ form {
   display: flex;
   gap: 8px;
   flex-grow: 1;
+  min-width: 0;
 }
 
 input {
@@ -82,25 +83,44 @@ input::placeholder {
   opacity: 0.6;
 }
 
-/* Grille des animes */
+/* Barre d'icônes (notifications, stats, etc.) */
+.iconContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.iconContainer i {
+  font-size: 1.4em;
+  color: var(--accent-color);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.iconContainer i:hover {
+  color: var(--button-hover);
+}
+
+/* Table pour lister les animes */
 table {
   border-collapse: separate;
   border-spacing: 8px;
   width: 100%;
+  margin-bottom: 16px; /* léger espace en bas */
 }
 
-/* Cellules individuelles */
+/* Cellules */
 .cell {
   display: table-cell;
   height: 150px;
   width: 100px;
   border: 2px solid var(--border-color);
   border-radius: 8px;
   background-color: var(--secondary-bg);
-  padding: 4px;
   position: relative;
-  transition: all 0.2s ease;
   overflow: hidden;
+  transition: all 0.2s ease;
 }
 
 .cell:hover {
@@ -109,7 +129,6 @@ table {
   border-color: var(--accent-color);
 }
 
-/* Images */
 img {
   display: block;
   width: 100%;
@@ -124,7 +143,7 @@ img {
   opacity: 1;
 }
 
-/* Bandeau au bas de l'image */
+/* Bandeau au bas de l'image (pour + / -) */
 .centerText {
   width: 100%;
   text-align: center;
@@ -138,9 +157,8 @@ img {
   border-bottom-right-radius: 6px;
 }
 
-/* Boutons + / - */
 .centerText button {
-  padding: 2px 7px;
+  padding: 4px 10px;
   font-size: 14px;
   background-color: var(--secondary-bg);
   color: var(--text-color);
@@ -153,7 +171,7 @@ img {
   background-color: var(--hover-color);
 }
 
-/* Titre "ANIME / MANGA" */
+/* Indicateur: ANIME / MANGA */
 .textDisplay {
   display: inline-block;
   font-weight: bold;
@@ -180,25 +198,7 @@ img {
   background: var(--accent-color);
 }
 
-.iconContainer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 16px;
-  margin-bottom: 12px;
-}
-
-.iconContainer i {
-  font-size: 1.4em;
-  color: var(--accent-color);
-  cursor: pointer;
-  transition: color 0.2s ease;
-}
-
-.iconContainer i:hover {
-  color: var(--button-hover);
-}
-
-/* Petites popups ou modals */
+/* Overlay panel pour stats, notifs, etc. */
 #overlayPanel {
   position: fixed;
   top: 10%;
@@ -211,4 +211,28 @@ img {
   box-shadow: 0 4px 16px rgba(0,0,0,0.5);
   display: none; /* caché par défaut */
   z-index: 9999;
+  max-height: 70%;
+  overflow-y: auto;
+}
+
+/* Animation d'apparition */
+#overlayPanel.animate-in {
+  animation: fadeInScale 0.3s forwards;
+}
+
+@keyframes fadeInScale {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animeGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 8px;
 }
diff --git a/popup.html b/popup.html
@@ -24,7 +24,7 @@
     <i id="statsIcon" class="fa-solid fa-chart-bar"></i>
   </div>
 
-  <table id="display" class="table"></table>
+  <div id="display" class="animeGrid"></div>
 
   <!-- Petit overlay pour afficher Stats ou Notifs -->
   <div id="overlayPanel"></div>

diff --git a/popup.js b/popup.js
@@ -317,28 +317,33 @@ function handleError(error) {
 
 // ================== UPDATE IMAGES ===================
 function updateImages() {
-  display.innerHTML = "<tbody></tbody>";
-  let displayBody = display.tBodies[0];
+  // On vide d’abord le container
+  display.innerHTML = "";
 
-  if (!Array.isArray(displayedList)) {
-    displayedList = [];
-  }
-
-  if (displayedList.length === 0) {
+  if (!Array.isArray(displayedList) || displayedList.length === 0) {
     let noItems = doc.createElement("H5");
-    let textString = token
+    let textString = token 
       ? "Doesn't look like there's anything here..."
       : "Doesn't look like you're logged in yet";
     noItems.appendChild(doc.createTextNode(textString));
     display.appendChild(noItems);
     return;
   }
 
-  let newRowHtmlString = "";
-
+  // On construit un "cell" par anime
   for (let i = displayedList.length - 1; i >= 0; i--) {
     let mediaList = displayedList[i];
+
+    // On crée un conteneur .cell
+    let cellDiv = document.createElement("div");
+    cellDiv.className = "cell";
+
+    // Construire l’HTML interne
     let aniListUrl = `https://anilist.co/anime/${mediaList.mediaId}`;
+    let totalEpisodes = (displayedType === "MANGA")
+      ? (mediaList.media.chapters || "")
+      : (mediaList.media.episodes || "");
+
     let imgHtmlString = `
       <a href="${aniListUrl}" target="_blank" style="text-decoration:none;">
         <img
@@ -351,31 +356,34 @@ function updateImages() {
       </a>
     `;
     let decrement = `
-      <button id="dec-${mediaList.id}" style="float:left" height="1" width="1">-</button>
+      <button
+        id="dec-${mediaList.id}"
+        style="float:left;"
+        height="1"
+        width="1"
+      >-</button>
+    `;
+    let text = `
+      <span id="prog-${mediaList.id}">${mediaList.progress}/${totalEpisodes || "?"}</span>
     `;
-    let totalEpisodes = (displayedType === "MANGA")
-      ? (mediaList.media.chapters || "")
-      : (mediaList.media.episodes || "");
-    let text = `<span id="prog-${mediaList.id}">${mediaList.progress}/${totalEpisodes || "?"}</span>`;
     let increment = `
-      <button id="inc-${mediaList.id}" style="float:right" height="1" width="1">+</button>
+      <button
+        id="inc-${mediaList.id}"
+        style="float:right;"
+        height="1"
+        width="1"
+      >+</button>
     `;
     let span = `<div class="centerText">${decrement} ${text} ${increment}</div>`;
-    let cellHtmlString = `<td class="cell">${imgHtmlString} ${span}</td>`;
-    newRowHtmlString += cellHtmlString;
 
-    if ((displayedList.length - 1 - i) % COLUMNS === COLUMNS - 1) {
-      newRowHtmlString = "<tr>" + newRowHtmlString + "</tr>";
-      displayBody.innerHTML += newRowHtmlString;
-      newRowHtmlString = "";
-    }
-  }
-  if (newRowHtmlString !== "") {
-    newRowHtmlString = "<tr>" + newRowHtmlString + "</tr>";
-    displayBody.innerHTML += newRowHtmlString;
+    // On assemble
+    cellDiv.innerHTML = imgHtmlString + span;
+
+    // On ajoute la div .cell dans #display
+    display.appendChild(cellDiv);
   }
 
-  // On ajoute les listeners +/-
+  // Maintenant qu’on a ajouté toutes les cells, on place les listeners +/-
   for (let i = displayedList.length - 1; i >= 0; i--) {
     let mediaList = displayedList[i];
     doc.getElementById(`dec-${mediaList.id}`).addEventListener("click", mediaClick(mediaList, -1));
@@ -529,10 +537,16 @@ var overlayPanel = doc.getElementById("overlayPanel");
 function showPanel(innerHtml) {
   overlayPanel.innerHTML = innerHtml;
   overlayPanel.style.display = "block";
+  // on ajoute la classe pour animer
+  overlayPanel.classList.remove("animate-in");
+  void overlayPanel.offsetWidth; // trigger reflow
+  overlayPanel.classList.add("animate-in");
+
   let closeBtn = overlayPanel.querySelector("#closePanel");
   if (closeBtn) {
     closeBtn.addEventListener("click", () => {
       overlayPanel.style.display = "none";
+      overlayPanel.classList.remove("animate-in");
     });
   }
 }