From a2366d85e08b2ae1eed9ea42edefcd2865421789 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Thu, 20 May 2021 22:10:03 +0200 Subject: [PATCH] multiple tables, fix large screen bug --- index3.html | 169 ++++++++++++++++++++++++--------------------- js/index3.js | 171 ++++++++++++++++++++++++++-------------------- scss/styles3.scss | 71 +++++++++---------- 3 files changed, 221 insertions(+), 190 deletions(-) diff --git a/index3.html b/index3.html index ae34ae4..e83df32 100644 --- a/index3.html +++ b/index3.html @@ -13,92 +13,105 @@
-
-
ID
-
Column 1
-
Column 2
-
Column 3
-
Action
+
+
+
ID
+
Column 1
+
Column 2
+
Column 3
+
Action
+
-
-
1
-
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Content Posuere morbi leo urna molestie.
-
show | edit
-
-
-
2
-
Content Posuere morbi leo urna molestie.
-
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Dolor sit amet, consectetur adipiscing elit.
-
show | edit
-
-
-
3
-
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Leo urna molestie.
-
show | edit
-
-
-
4
-
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Content Posuere
-
show | edit
-
-
-
5
-
Content Posuere morbi leo urna molestie.
-
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Dolor sit amet, consectetur adipiscing elit.
-
show | edit
-
-
-
6
-
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Content Posuere morbi leo urna molestie.
-
show | edit
-
-
-
7
-
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Content Posuere
-
show | edit
+
+
+
1
+
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Content Posuere morbi leo urna molestie.
+
show | edit
+
+
+
2
+
Content Posuere morbi leo urna molestie.
+
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Dolor sit amet, consectetur adipiscing elit.
+
show | edit
+
+
+
3
+
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
Leo urna molestie.
+
show | edit
+
+
+
4
+
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Content Posuere
+
show | edit
+
+
+
5
+
Content Posuere morbi leo urna molestie.
+
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Dolor sit amet, consectetur adipiscing elit.
+
show | edit
+
+
+
6
+
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Content Posuere morbi leo urna molestie.
+
show | edit
+
+
+
7
+
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Content Posuere
+
show | edit
+
- +
diff --git a/js/index3.js b/js/index3.js index 7a19d0a..52372d9 100644 --- a/js/index3.js +++ b/js/index3.js @@ -1,78 +1,103 @@ -const max800 = window.matchMedia("(max-width: 800px)"); -const max450 = window.matchMedia("(max-width: 450px)"); +/* +* Limites de basculements +*/ +const minLG = window.matchMedia("(min-width: 801px)"); +const maxMD = window.matchMedia("(max-width: 800px)"); +const maxSM = window.matchMedia("(max-width: 450px)"); -const theadContent = i => { - const header = table.querySelectorAll(".header .td"); - let content; - header.forEach((item, j) => { - if (i === j) { - content = item.textContent; +tables.forEach(t => { + const table = document.querySelector(t.id); + + /* + * Récupère le texte des entêtes de colonnes + */ + const theadContent = i => { + const thead = table.querySelectorAll(".thead .td"); + let content; + thead.forEach((item, j) => { + if (i === j) { + content = item.textContent; + } + }, i); + return content; + }; + + /* + * Ajoute un nouvel élément thead dans une cellule + */ + const createHeadInto = (cell, i) => { + const elem = document.createElement("div"); + elem.classList.add("head"); + elem.innerHTML = theadContent(i); + cell.appendChild(elem); + } + + /* + * Remove heads from element + */ + const removeHeadsFrom = (element) => { + const heads = element.querySelectorAll(".head"); + heads.forEach(head => { + head.parentNode.removeChild(head); + }); + }; + + /* + * Règle pour les écrans moyens + */ + const mediumScreen = rule => { + if (rule.matches) { + console.log('medium'); + const rows = [...table.querySelectorAll(".tr")]; + rows.shift(); // vire le premier rang + rows.forEach(row => {; + const cells = row.querySelectorAll(".td"); + cells.forEach((cell, i) => { + createHeadInto(cell, i); + }); + }); + } else { + console.log('not medium'); + removeHeadsFrom(table); } - }, i); - return content; -}; - -const createThead = (cell, i) => { - const elem = document.createElement("div"); - elem.classList.add("thead"); - elem.innerHTML = theadContent(i); - cell.appendChild(elem); -} - -const mediumScreen = rule => { - if (rule.matches) { - console.log('medium'); - const rows = [...table.querySelectorAll(".tr")]; - rows.shift(); - rows.forEach(row => {; - const cells = row.querySelectorAll(".td"); - cells.forEach((cell, i) => { - createThead(cell, i); + }; + + /* + * Règle pour les petits écrans + */ + const smallScreen = (rule) => { + if (rule.matches) { + console.log('small'); + const rows = [...table.querySelectorAll(".tr")]; + rows.shift(); + rows.forEach(row => {; + const cells = row.querySelectorAll(".td"); + cells.forEach((cell, i) => { + let head = cell.querySelector('.head'); + head.classList.add("td"); + row.insertBefore(head, cell); + }); }); - }); - } else { - console.log('not medium'); - const theads = table.querySelectorAll(".thead"); - theads.forEach(element => { - element.parentNode.removeChild(element); - }); - } -}; - -const smallScreen = (rule) => { - if (rule.matches) { - console.log('small'); - const rows = [...table.querySelectorAll(".tr")]; - rows.shift(); - rows.forEach(row => {; - const cells = row.querySelectorAll(".td"); - cells.forEach((cell, i) => { - let thead = cell.querySelector('.thead'); - thead.classList.add("td"); - row.insertBefore(thead, cell); + } else { + console.log('not small'); + const rows = [...table.querySelectorAll(".tr")]; + rows.shift(); + rows.forEach(row => {; + removeHeadsFrom(row); + if (!minLG.matches) { + const cells = row.querySelectorAll(".td"); + cells.forEach((cell, i) => { + createHeadInto(cell, i); + }); + } }); - }); - } else { - console.log('not small'); // large is not small, donc il passe ici !! pas normal - const rows = [...table.querySelectorAll(".tr")]; - rows.shift(); - rows.forEach(row => {; - const theads = row.querySelectorAll(".thead"); - theads.forEach((thead) => { - thead.classList.remove("td"); - thead.parentNode.removeChild(thead); - }); - const cells = row.querySelectorAll(".td"); - cells.forEach((cell, i) => { - createThead(cell, i); - }); - }); - } -}; - -mediumScreen(max800); -max800.addListener(mediumScreen); - -smallScreen(max450); -max450.addListener(smallScreen); + } + }; + + mediumScreen(maxMD); + maxMD.addListener(mediumScreen); + + smallScreen(maxSM); + maxSM.addListener(smallScreen); +}); diff --git a/scss/styles3.scss b/scss/styles3.scss index 60b6dff..b179a36 100644 --- a/scss/styles3.scss +++ b/scss/styles3.scss @@ -1,20 +1,30 @@ +$even-color: #dedede; +$thead-color: #dedede; div.table { display: flex; flex-direction: column; + margin-bottom: 5em; + div.tr:nth-child(even) { + background: $even-color; + } + div.thead div.tr { + border-top: 1px solid grey; + background: $thead-color; + div.td { + justify-content: center; + font-weight: bold; + } + } div.tr { display: flex; min-height: 50px; - &:nth-child(1) { - border-top: 1px solid grey; - } - &:nth-child(odd) { - background: #dedede; - } div.td { display: flex; - align-items: center; flex: 4; + align-items: center; + padding: 5px; + box-sizing: border-box; border: 1px solid grey; border-top: 0; border-left: 0; @@ -26,40 +36,28 @@ div.table { &:nth-child(3) { flex: 6; } &:nth-child(4) { flex: 2; } &:last-child { flex: 2; } - div.thead { // TODO affiché par erreur en grand écran, - // car le script applique ici la l.57 du script js - // commenter pour voir le problème - display: none; - } - } - &.header div.td { - justify-content: center; - font-weight: bold; - } - div.td, - div.thead { - padding: 5px; - box-sizing: border-box; } } } @media only screen - and (max-width: 800px) { + and (max-width: 800px) { div.table { margin-right: 0.5em; + div.thead div.tr { + position: absolute; + top: -9999px; + left: -9999px; + } + div.tbody div.tr:nth-child(1) div.td:nth-child(1) { + border-top: 1px solid grey; + } div.tr { flex-direction: column; - padding-left: 37%; - &.header { - position: absolute; - top: -9999px; - left: -9999px; - } + padding-left: 37%; div.td { position: relative; border-left: 1px solid grey; - div.thead { // idem l.28 - display: block; + & > div.head { position: absolute; top: 0; left: -57%; @@ -67,25 +65,20 @@ div.table { padding-right: 10px; white-space: nowrap; } - &:nth-child(1) { - //border-left: 0; - } - } - &:nth-child(2) { - div.td:nth-child(1) { - border-top: 1px solid grey; - } } } } @media only screen and (max-width: 450px) { div.table { + div.tbody div.tr:nth-child(1) div.td:nth-child(1) { + border-top: 1px solid grey; + } div.tr { padding-left: 0; div.td { padding-left: 1.5em; - &.thead { + &.head { font-weight: bold; padding-left: 0.5em; }