From 97e0a5e785240d370d0705ca986d480ed121d0b9 Mon Sep 17 00:00:00 2001 From: JeremGaming <98130953+JeremGamingYT@users.noreply.github.com> Date: Tue, 24 Dec 2024 02:22:57 -0500 Subject: [PATCH] Update: Design / Style --- popup.css | 82 +++++++++++++++++++++++++++++++++++------------------- popup.html | 2 +- popup.js | 70 +++++++++++++++++++++++++++------------------- 3 files changed, 96 insertions(+), 58 deletions(-) diff --git a/popup.css b/popup.css index 63328e7..546d4f0 100755 --- 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,14 +83,34 @@ 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; @@ -97,10 +118,9 @@ table { 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; } \ No newline at end of file diff --git a/popup.html b/popup.html index 1265c11..7555385 100755 --- a/popup.html +++ b/popup.html @@ -24,7 +24,7 @@ -
+
diff --git a/popup.js b/popup.js index 3d216b2..5e6972d 100755 --- a/popup.js +++ b/popup.js @@ -317,16 +317,12 @@ function handleError(error) { // ================== UPDATE IMAGES =================== function updateImages() { - display.innerHTML = ""; - 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)); @@ -334,11 +330,20 @@ function updateImages() { 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 = ` `; let decrement = ` - + + `; + let text = ` + ${mediaList.progress}/${totalEpisodes || "?"} `; - let totalEpisodes = (displayedType === "MANGA") - ? (mediaList.media.chapters || "") - : (mediaList.media.episodes || ""); - let text = `${mediaList.progress}/${totalEpisodes || "?"}`; let increment = ` - + `; let span = `
${decrement} ${text} ${increment}
`; - let cellHtmlString = `${imgHtmlString} ${span}`; - newRowHtmlString += cellHtmlString; - if ((displayedList.length - 1 - i) % COLUMNS === COLUMNS - 1) { - newRowHtmlString = "" + newRowHtmlString + ""; - displayBody.innerHTML += newRowHtmlString; - newRowHtmlString = ""; - } - } - if (newRowHtmlString !== "") { - newRowHtmlString = "" + newRowHtmlString + ""; - 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"); }); } }