From ba3d62a4c030005e0ce60be8a92ea8ee4b8f7807 Mon Sep 17 00:00:00 2001
From: Hlars <larshjordt@me.com>
Date: Mon, 8 May 2023 21:24:03 +0200
Subject: [PATCH] changes

---
 index.html      |   4 +-
 script.js       | 141 +++++++++++++++++++++++++++++-------------------
 scss/style.scss | 117 +++++++++++++++++++++++++++-------------
 style.css       |  58 +++++++++++++++-----
 style.css.map   |   2 +-
 5 files changed, 215 insertions(+), 107 deletions(-)

diff --git a/index.html b/index.html
index efd3ffb..04e383d 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
 
     <div id="tracking">
         <div class="table">
-            <div></div>
+            <div class="header">&nbsp;</div>
             <div class="header">H1</div>
             <div class="header">H2</div>
             <div class="header">H3</div>
@@ -38,7 +38,7 @@
             <div>dfjaldfjaf</div>
         </div>
 
-        <div>
+        <div class="page-navigation">
             <div class="pagination"></div>
             <div>
                 <select class="items-per-page">
diff --git a/script.js b/script.js
index e018df5..7b9c1f9 100644
--- a/script.js
+++ b/script.js
@@ -1,23 +1,23 @@
 console.log("HI ME");
 
 let data = [
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
-    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
+    { h1: "bla", h2: "üh", h3: "ah", h4: "bah" },
 ]
 
 for (i = 0; i < 1000; i++) {
     data[i] = {
-        h1: `bla ${i}`, h2: `uh ${i}`, h3: `ah ${i}`, h4: `bah ${i}`
+        h1: `bla ${i}`, h2: `üh ${i}`, h3: `ah ${i}`, h4: `bah ${i}`
     };
 }
 
@@ -29,7 +29,21 @@ addItemsPerPageEventListener();
 
 function addItemsPerPageEventListener() {
     document.querySelector("#tracking .items-per-page").addEventListener('change', (evt) => {
-        console.log(evt.target.value);
+        let table = document.querySelector("#tracking .table");
+        let firstRowOfPage = itemsPerPage * currentPage - itemsPerPage;
+        itemsPerPage = parseInt(evt.target.value);
+
+        // reassign page to row
+        table.querySelectorAll('[data-row]').forEach((rowItem, index) => {
+            let row = rowItem.dataset.row;
+            let page = Math.floor((row - 1) / itemsPerPage) + 1;
+
+            rowItem.dataset.page = page;
+        });
+
+        createPagination();
+        // console.log(firstRowOfPage, Math.floor((firstRowOfPage) / itemsPerPage) + 1);
+        activatePage(Math.floor((firstRowOfPage) / itemsPerPage) + 1);
     });
 }
 
@@ -48,16 +62,21 @@ function drawData() {
         let row = index + 1;
         let page = Math.floor((row - 1) / itemsPerPage) + 1;
 
+        let rowContainer = document.createElement('div');
+        rowContainer.classList.add("row");
+
         let moreButton = document.createElement('div');
         moreButton.dataset.row = row;
         moreButton.dataset.page = page;
+        moreButton.innerHTML = "&nbsp;";
         moreButton.classList.add("open-button");
 
         let details = document.createElement('div');
         details.dataset.row = row;
         details.dataset.page = page;
         details.classList.add("details");
-        details.innerText = "A LOT OF DETAILS";
+        // details.innerText = "A LOT OF DETAILS";
+        details.innerHTML = "<div>A LOT OF DETAILS</div>"
 
         let h1 = document.createElement('div');
         h1.dataset.row = row;
@@ -84,12 +103,14 @@ function drawData() {
             h4.classList.add("hidden")
             details.classList.add("hidden")
         }
-        table.append(moreButton);
-        table.append(h1);
-        table.append(h2);
-        table.append(h3);
-        table.append(h4);
-        table.append(details);
+        rowContainer.append(moreButton);
+        rowContainer.append(h1);
+        rowContainer.append(h2);
+        rowContainer.append(h3);
+        rowContainer.append(h4);
+        rowContainer.append(details);
+
+        table.append(rowContainer);
     }
 
     addDetailEventListeners();
@@ -97,16 +118,17 @@ function drawData() {
 }
 
 function addDetailEventListeners() {
-    document.querySelectorAll("#tracking .open-button").forEach(item => {
+    document.querySelectorAll("#tracking .row").forEach(item => {
         item.addEventListener('click', (evt) => {
             item.classList.toggle("open");
-            const details = document.evaluate("following-sibling::div[contains(@class, 'details')]", item, null,
-                XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;
+            // const details = document.evaluate("following-sibling::div[contains(@class, 'details')]", item, null,
+            //     XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;
+            const details = item.querySelector(".details");
             // toggle details panel
             if (details.style.maxHeight) {
                 details.style.maxHeight = null;
             } else {
-                details.style.maxHeight = details.scrollHeight + "px";
+                details.style.maxHeight = details.scrollHeight + 18 + "px";
             }
         });
     });
@@ -114,46 +136,53 @@ function addDetailEventListeners() {
 
 function createPagination() {
     let container = document.querySelector("#tracking .pagination");
+    let paginator = [];
 
-    let left = document.createElement('div');
-    left.innerHTML = "&laquo";
-    left.addEventListener('click', (evt) => {
-        let activatedPage = parseInt(currentPage);
-        if (activatedPage > 1)
-            activatePage(activatedPage - 1);
-    });
-    let right = document.createElement('div');
-    right.addEventListener('click', (evt) => {
-        let activatedPage = parseInt(currentPage);
-        if (activatedPage < data.length / itemsPerPage)
-            activatePage(activatedPage + 1);
-    });
-    right.innerHTML = "&raquo;";
+    // only create pagination if necessary 
+    if (data.length > itemsPerPage) {
+        let left = document.createElement('div');
+        left.innerHTML = "&laquo";
+        left.addEventListener('click', (evt) => {
+            let activatedPage = parseInt(currentPage);
+            if (activatedPage > 1)
+                activatePage(activatedPage - 1);
+        });
+        let right = document.createElement('div');
+        right.addEventListener('click', (evt) => {
+            let activatedPage = parseInt(currentPage);
+            if (activatedPage < data.length / itemsPerPage)
+                activatePage(activatedPage + 1);
+        });
+        right.innerHTML = "&raquo;";
 
-    container.append(left);
-    for (i = 1; i <= data.length / itemsPerPage; i++) {
-        let mark = document.createElement('div');
-        mark.innerText = i;
-        mark.dataset.pagination = i;
-        container.append(mark);
+        paginator.push(left);
+        for (i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
+            let mark = document.createElement('div');
+            mark.innerText = i;
+            mark.dataset.pagination = i;
+            paginator.push(mark);
 
-        mark.addEventListener('click', (evt) => {
-            activatePage(evt.target.innerText);
-        })
+            mark.addEventListener('click', (evt) => {
+                activatePage(evt.target.innerText);
+            })
+        }
+        paginator.push(right);
     }
-    container.append(right);
-
+    container.replaceChildren(...paginator);
 }
 
 function activatePage(page) {
     let table = document.querySelector('#tracking .table');
+    let paginator = document.querySelector('#tracking .pagination');
 
-    // change active state
-    document.querySelectorAll("#tracking .pagination div").forEach(item => {
-        item.classList.remove('active');
-    });
-    document.querySelector(`#tracking .pagination div[data-pagination="${page}"]`).classList.add('active');
-    currentPage = page;
+    // change active state (only if paginator is not empty)
+    if (paginator.hasChildNodes()) {
+        paginator.childNodes.forEach(item => {
+            item.classList.remove('active');
+        });
+        paginator.querySelector(`div[data-pagination="${page}"]`).classList.add('active');
+        currentPage = page;
+    }
 
     // hide all rows
     table.querySelectorAll('[data-row]').forEach((rowItem) => {
diff --git a/scss/style.scss b/scss/style.scss
index c7f49ab..8f07b4d 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -4,60 +4,105 @@
         grid-template-columns: 2rem repeat(4, auto);
         align-items: center;
 
+        .row {
+            display: contents;
+
+            &:hover div {
+                cursor: pointer;
+            }
+
+            &:not(.open):hover div {
+                background: whitesmoke;
+            }
+
+            &.open {
+                .open-button::after {
+                    // content: "\25BC";
+                    content: "\02796";
+                }
+            }
+
+            .open-button {
+                &::after {
+                    // content: "\25B6";
+                    content: "\02795";
+                    font-size: 13px;
+                    color: #000;
+                    float: right;
+                    margin-right: 0.35rem;
+                }
+            }
+        }
+
+        div {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: 0.5rem 0;
+
+            &.header {
+                font-weight: bold;
+
+                border-bottom-width: 1px;
+                border-bottom-style: solid;
+                border-bottom-color: #0000001f;
+            }
+        }
+
         .hidden {
             display: none;
         }
 
-        .open-button {
-            &::after {
-                // content: "\25B6";
-                content: "\02795";
-                font-size: 13px;
-                color: #000;
-                float: right;
-                margin-right: 0.35rem;
-            }
-
-            &.open::after {
-                // content: "\25BC";
-                content: "\02796";
-            }
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
         .details {
             grid-column: 1 / 6;
+            box-sizing: border-box;
 
-            padding: 0 18px;
+            // padding: 0 18px;
+            // padding: 0.4rem 0;
+            padding: 0;
             background-color: white;
             max-height: 0;
             overflow: hidden;
             transition: max-height 0.2s ease-out;
+
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
+            border-bottom-color: #0000001f;
+
+            div {
+                padding: 2rem;
+            }
         }
     }
 
-    .pagination {
-        div {
-            color: black;
-            float: left;
-            padding: 8px 16px;
-            text-decoration: none;
-            transition: background-color 0.3s;
+    .page-navigation {
+        display: flex;
+        margin-top: 3rem;
+        justify-content: flex-end;
+        align-items: center;
 
-            &:hover {
-                cursor: pointer;
+        .pagination {
+            margin-right: 2rem;
 
-                &:not(.active) {
-                    background-color: #ddd;
+            div {
+                color: black;
+                float: left;
+                padding: 8px 16px;
+                text-decoration: none;
+                transition: background-color 0.3s;
+
+                &:hover {
+                    cursor: pointer;
+
+                    &:not(.active) {
+                        background-color: #ddd;
+                    }
                 }
-            }
 
-            &.active {
-                background-color: #4caf50;
-                color: white;
+                &.active {
+                    background-color: #4caf50;
+                    color: white;
+                }
             }
         }
     }
diff --git a/style.css b/style.css
index fdc249c..c500b5d 100644
--- a/style.css
+++ b/style.css
@@ -4,44 +4,78 @@
   grid-template-columns: 2rem repeat(4, auto);
   align-items: center;
 }
-#tracking .table .hidden {
-  display: none;
+#tracking .table .row {
+  display: contents;
 }
-#tracking .table .open-button::after {
+#tracking .table .row:hover div {
+  cursor: pointer;
+}
+#tracking .table .row:not(.open):hover div {
+  background: whitesmoke;
+}
+#tracking .table .row.open .open-button::after {
+  content: "➖";
+}
+#tracking .table .row .open-button::after {
   content: "➕";
   font-size: 13px;
   color: #000;
   float: right;
   margin-right: 0.35rem;
 }
-#tracking .table .open-button.open::after {
-  content: "➖";
+#tracking .table div {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0;
 }
-#tracking .table .open-button:hover {
-  cursor: pointer;
+#tracking .table div.header {
+  font-weight: bold;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: rgba(0, 0, 0, 0.1215686275);
+}
+#tracking .table .hidden {
+  display: none;
 }
 #tracking .table .details {
   grid-column: 1/6;
-  padding: 0 18px;
+  box-sizing: border-box;
+  padding: 0;
   background-color: white;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: rgba(0, 0, 0, 0.1215686275);
 }
-#tracking .pagination div {
+#tracking .table .details div {
+  padding: 2rem;
+}
+#tracking .page-navigation {
+  display: flex;
+  margin-top: 3rem;
+  justify-content: flex-end;
+  align-items: center;
+}
+#tracking .page-navigation .pagination {
+  margin-right: 2rem;
+}
+#tracking .page-navigation .pagination div {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
   transition: background-color 0.3s;
 }
-#tracking .pagination div:hover {
+#tracking .page-navigation .pagination div:hover {
   cursor: pointer;
 }
-#tracking .pagination div:hover:not(.active) {
+#tracking .page-navigation .pagination div:hover:not(.active) {
   background-color: #ddd;
 }
-#tracking .pagination div.active {
+#tracking .page-navigation .pagination div.active {
   background-color: #4caf50;
   color: white;
 }
diff --git a/style.css.map b/style.css.map
index 1cce80f..74b8d65 100644
--- a/style.css.map
+++ b/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["scss/style.scss"],"names":[],"mappings":";AACI;EACI;EACA;EACA;;AAEA;EACI;;AAIA;EAEI;EACA;EACA;EACA;EACA;;AAGJ;EAEI;;AAGJ;EACI;;AAIR;EACI;EAEA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAIR;EACI;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["scss/style.scss"],"names":[],"mappings":";AACI;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIA;EAEI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI;EAEA;EACA;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;EAIA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAIR;EACI;EACA","file":"style.css"}
\ No newline at end of file