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>
<div class="table" id="my-table">
<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 class="thead">
<div class="tr">
<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="tr">
<div class="td">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">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">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 class="tr">
<div class="td">4</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 Posuere </div>
<div class="td">show | edit</div>
</div>
<div class="tr">
<div class="td">5</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">6</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">7</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 Posuere </div>
<div class="td">show | edit</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 class="tr">
<div class="td" scope="row">4</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 Posuere </div>
<div class="td">show | edit</div>
</div>
<div class="tr">
<div class="td" scope="row">5</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">6</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">7</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 Posuere </div>
<div class="td">show | edit</div>
</div>
</div>
</div>
<!-- ajouter une autre
div class="table" id="other-table">
<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 class="table" id="other-table">
<div class="thead">
<div class="tr">
<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 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 class="tr">
<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-->
</div>
<script type="text/javascript">
const table = document.querySelector("#my-table");
const tables = [{id: '#my-table'}, {id: '#other-table'}];
</script>
<script src="js/index3.js"></script>
</body>

171
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 => {
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);
});

71
scss/styles3.scss
View File

@ -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;
}