Marown/heissepreise
1
0
Fork 0
mirror of https://github.com/badlogic/heissepreise.git synced 2024-06-24 09:25:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add responsive tables

Browse Source
This commit is contained in:
Christian Tschugg 2023-05-26 14:09:15 +02:00
parent 4d7645efaf
commit 0788e7cd53
7 changed files with 70 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/aktionen.js
View File

@ -65,8 +65,8 @@ function showResults(items, today) {
const table = document.querySelector("#result");
table.innerHTML = "";
const header = dom("tr", `
<th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th>
const header = dom("thead", `
<tr><th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th></tr>
`)
const showHideAll = header.querySelectorAll('th:nth-child(4)')[0];
showHideAll.style["cursor"] = "pointer";

2
site/cart.js
View File

@ -167,7 +167,7 @@ function showCart(cart, lookup) {
const itemTable = document.querySelector("#cartitems");
itemTable.innerHTML = "";
const header = dom("tr", `<th>Kette</th><th>Name</th><th>Menge</th><th>Preis</th><th></th>`);
const header = dom("thead", `<tr><th>Kette</th><th>Name</th><th>Menge</th><th>Preis</th><th></th></tr>`);
itemTable.append(header);
cart.items.forEach((cartItem, idx) => {

12
site/carts.js
View File

@ -32,11 +32,13 @@ async function load() {
function showCarts(lookup) {
const cartsTable = document.querySelector("#carts");
cartsTable.innerHTML = "";
cartsTable.appendChild(dom("tr", `
<th>Name</th>
<th>Produkte</th>
<th>Preis</th>
<th></th>
cartsTable.appendChild(dom("thead", `
<tr>
<th>Name</th>
<th>Produkte</th>
<th>Preis</th>
<th></th>
</tr>
`));
carts.forEach(cart => {

4
site/changes.js
View File

@ -66,8 +66,8 @@ function showResults(items, today) {
const table = document.querySelector("#result");
table.innerHTML = "";
const header = dom("tr", `
<th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th>
const header = dom("thead", `
<tr><th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th></tr>
`)
const showHideAll = header.querySelectorAll('th:nth-child(4)')[0];
showHideAll.style["cursor"] = "pointer";

2
site/main.js
View File

@ -9,7 +9,7 @@ async function load() {
},
null,
(header) => {
header = dom("tr", `<th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th><th></th>`)
header = dom("thead", `<tr><th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th><th></th></tr>`)
const showHideAll = header.querySelectorAll('th:nth-child(4)')[0];
showHideAll.style["cursor"] = "pointer";
showHideAll.showAll = true;

53
site/style.css
View File

@ -76,4 +76,55 @@ th {
.hide {
display: none;
}
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
padding-left: calc(65px + 1.2em);
position: relative;
display: block;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
background-color: #aaa;
border: 1px solid;
position: absolute;
padding: .2em .4em;
width: 65px;
height: calc(100% - .4em);
left: -1px;
top: -1px;
text-align: right;
font-weight: bold;
}
table td:last-child {
border-bottom: 0;
}
}

6
site/utils.js
View File

@ -107,8 +107,11 @@ function itemToStoreLink(item) {
function itemToDOM(item) {
let storeDom = dom("td", item.store);
storeDom.setAttribute("data-label", "Kette");
let nameDom = dom("td", `<div class="itemname">${itemToStoreLink(item)}</div>`);
nameDom.setAttribute("data-label", "Name");
let unitDom = dom("td", item.unit ? item.unit : "");
unitDom.setAttribute("data-label", "Menge");
let increase = "";
if (item.priceHistory.length > 1) {
let percentageChange = Math.round((item.priceHistory[0].price - item.priceHistory[1].price) / item.priceHistory[1].price * 100);
@ -128,6 +131,7 @@ function itemToDOM(item) {
if (i != item.priceHistory.length - 1) pricesText += "<br>";
}
let priceDom = dom("td", `${priceDomText}<div class="priceinfo hide">${pricesText}</div>`);
priceDom.setAttribute("data-label", "Preis");
if (item.priceHistory.length > 1) {
priceDom.style["cursor"] = "pointer";
priceDom.addEventListener("click", () => {
@ -289,7 +293,7 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi
}
if (query.trim().charAt(0) != "!") hits.sort((a, b) => a.price - b.price);
let header = dom("tr", `<th>Kette</th><th>Name</th><th>Menge</th><th>Preis</th>`);
let header = dom("thead", `<tr><th>Kette</th><th>Name</th><th>Menge</th><th>Preis</th></tr>`);
if (headerModifier) header = headerModifier(header);
table.appendChild(header);