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

169
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="tr">
<div class="td">Column 1</div> <div class="td th" scope="col">ID</div>
<div class="td">Column 2</div> <div class="td th" scope="col">Column 1</div>
<div class="td">Column 3</div> <div class="td th" scope="col">Column 2</div>
<div class="td">Action</div> <div class="td th" scope="col">Column 3</div>
<div class="td th" scope="col">Action</div>
</div>
</div> </div>
<div class="tr"> <div class="tbody">
<div class="td">1</div> <div class="tr">
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="td" scope="row">1</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 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">show | edit</div> <div class="td">Content Posuere morbi leo urna molestie.</div>
</div> <div class="td">show | edit</div>
<div class="tr"> </div>
<div class="td">2</div> <div class="tr">
<div class="td">Content Posuere morbi leo urna molestie.</div> <div class="td" scope="row">2</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">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">show | edit</div> <div class="td">Dolor sit amet, consectetur adipiscing elit.</div>
</div> <div class="td">show | edit</div>
<div class="tr"> </div>
<div class="td">3</div> <div class="tr">
<div class="td">Content sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="td" scope="row">3</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">Leo urna molestie.</div> <div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">show | edit</div> <div class="td">Leo urna molestie.</div>
</div> <div class="td">show | edit</div>
<div class="tr"> </div>
<div class="td">4</div> <div class="tr">
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="td" scope="row">4</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 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">Content Posuere </div> <div class="td">Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">show | edit</div> <div class="td">Content Posuere </div>
</div> <div class="td">show | edit</div>
<div class="tr"> </div>
<div class="td">5</div> <div class="tr">
<div class="td">Content Posuere morbi leo urna molestie.</div> <div class="td" scope="row">5</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">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">show | edit</div> <div class="td">Dolor sit amet, consectetur adipiscing elit.</div>
</div> <div class="td">show | edit</div>
<div class="tr"> </div>
<div class="td">6</div> <div class="tr">
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="td" scope="row">6</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 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">show | edit</div> <div class="td">Content Posuere morbi leo urna molestie.</div>
</div> <div class="td">show | edit</div>
<div class="tr"> </div>
<div class="td">7</div> <div class="tr">
<div class="td">Content Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="td" scope="row">7</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 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">Content Posuere </div> <div class="td">Content morbi leo urna molestie. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="td">show | edit</div> <div class="td">Content Posuere </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="tr">
<div class="td">ID</div> <div class="td th" scope="col">ID</div>
<div class="td">Column 1</div> <div class="td th" scope="col">Column 1</div>
<div class="td">Column 2</div> <div class="td th" scope="col">Column 2</div>
<div class="td">Column 3</div> <div class="td th" scope="col">Column 3</div>
<div class="td">Action</div> <div class="td th" scope="col">Action</div>
</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>
<div class="tr">
<div class="td" scope="row">2</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">Dolor sit amet, consectetur adipiscing elit.</div>
<div class="td">show | edit</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>
<div class="tr"> </div>
<div class="td">6</div>
<div class="td">Content</div>
<div class="td">Content</div>
<div class="td">Content</div>
<div class="td">show | edit</div>
</div>
<div class="tr">
<div class="td">7</div>
<div class="td">Content</div>
<div class="td">Content</div>
<div class="td">Content</div>
<div class="td">show | edit</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>

165
js/index3.js
View File

@ -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 => { tables.forEach(t => {
const header = table.querySelectorAll(".header .td"); const table = document.querySelector(t.id);
let content;
header.forEach((item, j) => { /*
if (i === j) { * Récupère le texte des entêtes de colonnes
content = item.textContent; */
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"); * Règle pour les petits écrans
elem.classList.add("thead"); */
elem.innerHTML = theadContent(i); const smallScreen = (rule) => {
cell.appendChild(elem); if (rule.matches) {
} console.log('small');
const rows = [...table.querySelectorAll(".tr")];
const mediumScreen = rule => { rows.shift();
if (rule.matches) { rows.forEach(row => {;
console.log('medium'); const cells = row.querySelectorAll(".td");
const rows = [...table.querySelectorAll(".tr")]; cells.forEach((cell, i) => {
rows.shift(); let head = cell.querySelector('.head');
rows.forEach(row => {; head.classList.add("td");
const cells = row.querySelectorAll(".td"); row.insertBefore(head, cell);
cells.forEach((cell, i) => { });
createThead(cell, i);
}); });
}); } else {
} else { console.log('not small');
console.log('not medium'); const rows = [...table.querySelectorAll(".tr")];
const theads = table.querySelectorAll(".thead"); rows.shift();
theads.forEach(element => { rows.forEach(row => {;
element.parentNode.removeChild(element); removeHeadsFrom(row);
}); if (!minLG.matches) {
} const cells = row.querySelectorAll(".td");
}; cells.forEach((cell, i) => {
createHeadInto(cell, i);
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'); // 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); mediumScreen(maxMD);
max800.addListener(mediumScreen); maxMD.addListener(mediumScreen);
smallScreen(max450); smallScreen(maxSM);
max450.addListener(smallScreen); maxSM.addListener(smallScreen);
});

67
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.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 { div.tr {
flex-direction: column; flex-direction: column;
padding-left: 37%; padding-left: 37%;
&.header {
position: absolute;
top: -9999px;
left: -9999px;
}
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;
} }