diff --git a/table.html b/table.html index 799a5e4..2e06a37 100644 --- a/table.html +++ b/table.html @@ -85,20 +85,19 @@ } /* ================================================================== - Pages — two pages with smooth slide transition + Pages — up to 3 pages with smooth slide transition ================================================================== */ .pages-track { display: flex; - width: 200%; + width: 300%; transition: transform 0.7s cubic-bezier(0.45, 0, 0.15, 1); } - .pages-track.page-2 { - transform: translateX(-50%); - } + .pages-track.page-2 { transform: translateX(-33.333%); } + .pages-track.page-3 { transform: translateX(-66.666%); } .page { - width: 50%; + width: 33.333%; flex-shrink: 0; } @@ -114,7 +113,7 @@ display: grid; grid-template-columns: 1fr 2px 1fr 2px 1fr; align-items: center; - height: 58px; + height: 78px; transition: background 0.2s; } @@ -123,7 +122,7 @@ } .row-player { - font-size: 26px; + font-size: 32px; font-weight: 500; color: var(--white); text-align: center; @@ -134,12 +133,12 @@ display: flex; align-items: center; justify-content: center; - gap: 10px; + gap: 12px; } .row-logo { - width: 28px; - height: 28px; + width: 36px; + height: 36px; object-fit: contain; flex-shrink: 0; } @@ -160,7 +159,7 @@ } .opinion-icon { - font-size: 32px; + font-size: 42px; } /* Upvote */ @@ -244,6 +243,9 @@
+
+
+
@@ -303,7 +305,7 @@ }; // ── Config ─────────────────────────────────────────────── - var ROWS_PER_PAGE = 15; + var ROWS_PER_PAGE = 10; var CSV_URL = "assets/transfers-list.csv"; var players = []; @@ -369,22 +371,23 @@ // ── Render ─────────────────────────────────────────────── function render() { - var page1 = document.getElementById("rows1"); - var page2 = document.getElementById("rows2"); + var pages = [ + document.getElementById("rows1"), + document.getElementById("rows2"), + document.getElementById("rows3"), + ]; - var p1 = players.slice(0, ROWS_PER_PAGE); - var p2 = players.slice(ROWS_PER_PAGE, ROWS_PER_PAGE * 2); - - page1.innerHTML = p1.map(buildRow).join(""); - - if (p2.length > 0) { - page2.innerHTML = p2.map(buildRow).join(""); - totalPages = 2; - } else { - page2.innerHTML = ""; - totalPages = 1; + var count = 0; + for (var p = 0; p < 3; p++) { + var slice = players.slice(p * ROWS_PER_PAGE, (p + 1) * ROWS_PER_PAGE); + if (slice.length > 0) { + pages[p].innerHTML = slice.map(buildRow).join(""); + count = p + 1; + } else { + pages[p].innerHTML = ""; + } } - + totalPages = count; updateCounter(); } @@ -393,9 +396,12 @@ } function goToPage(n) { + if (totalPages > 1 && n > totalPages) n = 1; if (n < 1 || n > totalPages) return; currentPage = n; - document.getElementById("pagesTrack").classList.toggle("page-2", currentPage === 2); + var track = document.getElementById("pagesTrack"); + track.classList.toggle("page-2", currentPage === 2); + track.classList.toggle("page-3", currentPage === 3); updateCounter(); }