champs-libres/responsive-table-fluxbox
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

multiple tables, fix large screen bug

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-20 22:10:03 +02:00
parent dd2097a843
commit a2366d85e0
3 changed files with 221 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
index3.html
View File

@ -13,92 +13,105 @@
</style> </style>
<div class="table" id="my-table"> <div class="table" id="my-table">
<div class="tr header"> <div class="thead">
<div class="td">ID</div>
<div class="td">Column 1</div>
<div class="td">Column 2</div>
<div class="td">Column 3</div>
<div class="td">Action</div>
</div>
<div class="tr"> <div class="tr">
<div class="td">1</div> <div class="td th" scope="col">ID</div>
<div class="td th" scope="col">Column 1</div>
<div class="td th" scope="col">Column 2</div>
<div class="td th" scope="col">Column 3</div>
<div class="td th" scope="col">Action</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td" scope="row">1</div>
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Content Posuere morbi leo urna molestie.</div> <div class="td">Content Posuere morbi leo urna molestie.</div>
<div class="td">show | edit</div> <div class="td">show | edit</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="td">2</div> <div class="td" scope="row">2</div>
<div class="td">Content Posuere morbi leo urna molestie.</div> <div class="td">Content Posuere morbi leo urna molestie.</div>
<div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Dolor sit amet, consectetur adipiscing elit.</div> <div class="td">Dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">show | edit</div> <div class="td">show | edit</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="td">3</div> <div class="td" scope="row">3</div>
<div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">Leo urna molestie.</div> <div class="td">Leo urna molestie.</div>
<div class="td">show | edit</div> <div class="td">show | edit</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="td">4</div> <div class="td" scope="row">4</div>
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="td">Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Content Posuere </div> <div class="td">Content Posuere </div>
<div class="td">show | edit</div> <div class="td">show | edit</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="td">5</div> <div class="td" scope="row">5</div>
<div class="td">Content Posuere morbi leo urna molestie.</div> <div class="td">Content Posuere morbi leo urna molestie.</div>
<div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Dolor sit amet, consectetur adipiscing elit.</div> <div class="td">Dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">show | edit</div> <div class="td">show | edit</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="td">6</div> <div class="td" scope="row">6</div>
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Content Posuere morbi leo urna molestie.</div> <div class="td">Content Posuere morbi leo urna molestie.</div>
<div class="td">show | edit</div> <div class="td">show | edit</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="td">7</div> <div class="td" scope="row">7</div>
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="td">Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Content Posuere </div> <div class="td">Content Posuere </div>
<div class="td">show | edit</div> <div class="td">show | edit</div>
</div> </div>
</div> </div>
</div>
<!-- ajouter une autre <div class="table" id="other-table">
div class="table" id="other-table"> <div class="thead">
<div class="tr header">
<div class="td">ID</div>
<div class="td">Column 1</div>
<div class="td">Column 2</div>
<div class="td">Column 3</div>
<div class="td">Action</div>
</div>
</div>
<div class="tr"> <div class="tr">
<div class="td">6</div> <div class="td th" scope="col">ID</div>
<div class="td">Content</div> <div class="td th" scope="col">Column 1</div>
<div class="td">Content</div> <div class="td th" scope="col">Column 2</div>
<div class="td">Content</div> <div class="td th" scope="col">Column 3</div>
<div class="td th" scope="col">Action</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td" scope="row">1</div>
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Content Posuere morbi leo urna molestie.</div>
<div class="td">show | edit</div> <div class="td">show | edit</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="td">7</div> <div class="td" scope="row">2</div>
<div class="td">Content</div> <div class="td">Content Posuere morbi leo urna molestie.</div>
<div class="td">Content</div> <div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Content</div> <div class="td">Dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">show | edit</div> <div class="td">show | edit</div>
</div> </div>
</div--> <div class="tr">
<div class="td" scope="row">3</div>
<div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">Leo urna molestie.</div>
<div class="td">show | edit</div>
</div>
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
const table = document.querySelector("#my-table"); const tables = [{id: '#my-table'}, {id: '#other-table'}];
</script> </script>
<script src="js/index3.js"></script> <script src="js/index3.js"></script>
</body> </body>

77
js/index3.js
View File

@ -1,11 +1,21 @@
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)");
tables.forEach(t => {
const table = document.querySelector(t.id);
/*
* Récupère le texte des entêtes de colonnes
*/
const theadContent = i => { const theadContent = i => {
const header = table.querySelectorAll(".header .td"); const thead = table.querySelectorAll(".thead .td");
let content; let content;
header.forEach((item, j) => { thead.forEach((item, j) => {
if (i === j) { if (i === j) {
content = item.textContent; content = item.textContent;
} }
@ -13,33 +23,49 @@ const theadContent = i => {
return content; return content;
}; };
const createThead = (cell, i) => { /*
* Ajoute un nouvel élément thead dans une cellule
*/
const createHeadInto = (cell, i) => {
const elem = document.createElement("div"); const elem = document.createElement("div");
elem.classList.add("thead"); elem.classList.add("head");
elem.innerHTML = theadContent(i); elem.innerHTML = theadContent(i);
cell.appendChild(elem); 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 => { const mediumScreen = rule => {
if (rule.matches) { if (rule.matches) {
console.log('medium'); console.log('medium');
const rows = [...table.querySelectorAll(".tr")]; const rows = [...table.querySelectorAll(".tr")];
rows.shift(); rows.shift(); // vire le premier rang
rows.forEach(row => {; rows.forEach(row => {;
const cells = row.querySelectorAll(".td"); const cells = row.querySelectorAll(".td");
cells.forEach((cell, i) => { cells.forEach((cell, i) => {
createThead(cell, i); createHeadInto(cell, i);
}); });
}); });
} else { } else {
console.log('not medium'); console.log('not medium');
const theads = table.querySelectorAll(".thead"); removeHeadsFrom(table);
theads.forEach(element => {
element.parentNode.removeChild(element);
});
} }
}; };
/*
* Règle pour les petits écrans
*/
const smallScreen = (rule) => { const smallScreen = (rule) => {
if (rule.matches) { if (rule.matches) {
console.log('small'); console.log('small');
@ -48,31 +74,30 @@ const smallScreen = (rule) => {
rows.forEach(row => {; rows.forEach(row => {;
const cells = row.querySelectorAll(".td"); const cells = row.querySelectorAll(".td");
cells.forEach((cell, i) => { cells.forEach((cell, i) => {
let thead = cell.querySelector('.thead'); let head = cell.querySelector('.head');
thead.classList.add("td"); head.classList.add("td");
row.insertBefore(thead, cell); row.insertBefore(head, cell);
}); });
}); });
} else { } else {
console.log('not small'); // large is not small, donc il passe ici !! pas normal console.log('not small');
const rows = [...table.querySelectorAll(".tr")]; const rows = [...table.querySelectorAll(".tr")];
rows.shift(); rows.shift();
rows.forEach(row => {; rows.forEach(row => {;
const theads = row.querySelectorAll(".thead"); removeHeadsFrom(row);
theads.forEach((thead) => { if (!minLG.matches) {
thead.classList.remove("td");
thead.parentNode.removeChild(thead);
});
const cells = row.querySelectorAll(".td"); const cells = row.querySelectorAll(".td");
cells.forEach((cell, i) => { cells.forEach((cell, i) => {
createThead(cell, i); createHeadInto(cell, i);
}); });
}
}); });
} }
}; };
mediumScreen(max800); mediumScreen(maxMD);
max800.addListener(mediumScreen); maxMD.addListener(mediumScreen);
smallScreen(max450); smallScreen(maxSM);
max450.addListener(smallScreen); maxSM.addListener(smallScreen);
});

65
scss/styles3.scss
View File

@ -1,20 +1,30 @@
$even-color: #dedede;
$thead-color: #dedede;
div.table { div.table {
display: flex; display: flex;
flex-direction: column; 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 { div.tr {
display: flex; display: flex;
min-height: 50px; min-height: 50px;
&:nth-child(1) {
border-top: 1px solid grey;
}
&:nth-child(odd) {
background: #dedede;
}
div.td { div.td {
display: flex; display: flex;
align-items: center;
flex: 4; flex: 4;
align-items: center;
padding: 5px;
box-sizing: border-box;
border: 1px solid grey; border: 1px solid grey;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
@ -26,20 +36,6 @@ div.table {
&:nth-child(3) { flex: 6; } &:nth-child(3) { flex: 6; }
&:nth-child(4) { flex: 2; } &:nth-child(4) { flex: 2; }
&:last-child { 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;
} }
} }
} }
@ -47,19 +43,21 @@ div.table {
and (max-width: 800px) { and (max-width: 800px) {
div.table { div.table {
margin-right: 0.5em; margin-right: 0.5em;
div.tr { div.thead div.tr {
flex-direction: column;
padding-left: 37%;
&.header {
position: absolute; position: absolute;
top: -9999px; top: -9999px;
left: -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%;
div.td { div.td {
position: relative; position: relative;
border-left: 1px solid grey; border-left: 1px solid grey;
div.thead { // idem l.28 & > div.head {
display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: -57%; left: -57%;
@ -67,25 +65,20 @@ div.table {
padding-right: 10px; padding-right: 10px;
white-space: nowrap; 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 @media only screen
and (max-width: 450px) { and (max-width: 450px) {
div.table { div.table {
div.tbody div.tr:nth-child(1) div.td:nth-child(1) {
border-top: 1px solid grey;
}
div.tr { div.tr {
padding-left: 0; padding-left: 0;
div.td { div.td {
padding-left: 1.5em; padding-left: 1.5em;
&.thead { &.head {
font-weight: bold; font-weight: bold;
padding-left: 0.5em; padding-left: 0.5em;
} }