From 0788e7cd53bcc10a3dd46a60e863f34ec6d5a71a Mon Sep 17 00:00:00 2001 From: Christian Tschugg Date: Fri, 26 May 2023 14:09:15 +0200 Subject: [PATCH 1/3] Add responsive tables --- site/aktionen.js | 4 ++-- site/cart.js | 2 +- site/carts.js | 12 ++++++----- site/changes.js | 4 ++-- site/main.js | 2 +- site/style.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++- site/utils.js | 6 +++++- 7 files changed, 70 insertions(+), 13 deletions(-) diff --git a/site/aktionen.js b/site/aktionen.js index 47ae75e..d41fca1 100644 --- a/site/aktionen.js +++ b/site/aktionen.js @@ -65,8 +65,8 @@ function showResults(items, today) { const table = document.querySelector("#result"); table.innerHTML = ""; - const header = dom("tr", ` - KetteNameMengePreis πŸ“ˆ + const header = dom("thead", ` + KetteNameMengePreis πŸ“ˆ `) const showHideAll = header.querySelectorAll('th:nth-child(4)')[0]; showHideAll.style["cursor"] = "pointer"; diff --git a/site/cart.js b/site/cart.js index 15bf552..76e4d20 100644 --- a/site/cart.js +++ b/site/cart.js @@ -167,7 +167,7 @@ function showCart(cart, lookup) { const itemTable = document.querySelector("#cartitems"); itemTable.innerHTML = ""; - const header = dom("tr", `KetteNameMengePreis`); + const header = dom("thead", `KetteNameMengePreis`); itemTable.append(header); cart.items.forEach((cartItem, idx) => { diff --git a/site/carts.js b/site/carts.js index 974fe3e..53d635c 100644 --- a/site/carts.js +++ b/site/carts.js @@ -32,11 +32,13 @@ async function load() { function showCarts(lookup) { const cartsTable = document.querySelector("#carts"); cartsTable.innerHTML = ""; - cartsTable.appendChild(dom("tr", ` - Name - Produkte - Preis - + cartsTable.appendChild(dom("thead", ` + + Name + Produkte + Preis + + `)); carts.forEach(cart => { diff --git a/site/changes.js b/site/changes.js index ab99f88..b708ae2 100644 --- a/site/changes.js +++ b/site/changes.js @@ -66,8 +66,8 @@ function showResults(items, today) { const table = document.querySelector("#result"); table.innerHTML = ""; - const header = dom("tr", ` - KetteNameMengePreis πŸ“ˆ + const header = dom("thead", ` + KetteNameMengePreis πŸ“ˆ `) const showHideAll = header.querySelectorAll('th:nth-child(4)')[0]; showHideAll.style["cursor"] = "pointer"; diff --git a/site/main.js b/site/main.js index 86970c0..aa88d63 100644 --- a/site/main.js +++ b/site/main.js @@ -9,7 +9,7 @@ async function load() { }, null, (header) => { - header = dom("tr", `KetteNameMengePreis πŸ“ˆ`) + header = dom("thead", `KetteNameMengePreis πŸ“ˆ`) const showHideAll = header.querySelectorAll('th:nth-child(4)')[0]; showHideAll.style["cursor"] = "pointer"; showHideAll.showAll = true; diff --git a/site/style.css b/site/style.css index 2efdea5..70923be 100644 --- a/site/style.css +++ b/site/style.css @@ -76,4 +76,55 @@ th { .hide { display: none; -} \ No newline at end of file +} + +@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; + } + } \ No newline at end of file diff --git a/site/utils.js b/site/utils.js index 0a8584d..79f7b3a 100644 --- a/site/utils.js +++ b/site/utils.js @@ -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", `
${itemToStoreLink(item)}
`); + 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 += "
"; } let priceDom = dom("td", `${priceDomText}
${pricesText}
`); + 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", `KetteNameMengePreis`); + let header = dom("thead", `KetteNameMengePreis`); if (headerModifier) header = headerModifier(header); table.appendChild(header); From f1a4c8ce6c574e2021a840fa20cd2c8d656269f9 Mon Sep 17 00:00:00 2001 From: Christian Tschugg Date: Fri, 26 May 2023 14:21:17 +0200 Subject: [PATCH 2/3] Fix responsive tables for carts --- site/carts.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/site/carts.js b/site/carts.js index 53d635c..8028800 100644 --- a/site/carts.js +++ b/site/carts.js @@ -53,14 +53,22 @@ function showCarts(lookup) { const increase = Math.round((currPrice - oldPrice) / oldPrice * 100); const row = dom("tr", ``); - row.appendChild(dom("td", `${cart.name}`)); - row.appendChild(dom("td", cart.items.length)); - row.appendChild(dom("td", `${currPrice.toFixed(2)}`)); + const nameDom = dom("td", `${cart.name}`); + nameDom.setAttribute("data-label", "Name"); + row.appendChild(nameDom); + const itemsDom = dom("td", cart.items.length); + itemsDom.setAttribute("data-label", "Produkte"); + row.appendChild(itemsDom); + const priceDom = dom("td", `${currPrice.toFixed(2)}`); + priceDom.setAttribute("data-label", "Preis"); + row.appendChild(priceDom); if (cart.name != "Momentum Eigenmarken Vergleich") { let deleteButton = dom("input"); deleteButton.setAttribute("type", "button"); deleteButton.setAttribute("value", "LΓΆschen"); - row.appendChild(deleteButton); + const deleteDom = dom("td", ``); + deleteDom.appendChild(deleteButton); + row.appendChild(deleteDom); deleteButton.addEventListener("click", () => { removeCart(cart.name); From d427d72174c6b4d00c3467df7f5daab65c9dd1e9 Mon Sep 17 00:00:00 2001 From: Christian Tschugg Date: Fri, 26 May 2023 14:35:21 +0200 Subject: [PATCH 3/3] Fix headerModifier --- site/utils.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/utils.js b/site/utils.js index 79f7b3a..55913ed 100644 --- a/site/utils.js +++ b/site/utils.js @@ -293,9 +293,11 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi } if (query.trim().charAt(0) != "!") hits.sort((a, b) => a.price - b.price); - let header = dom("thead", `KetteNameMengePreis`); + let header = dom("tr", `KetteNameMengePreis`); if (headerModifier) header = headerModifier(header); - table.appendChild(header); + const thead = dom("thead", ``); + thead.appendChild(header); + table.appendChild(thead); let num = 0; hits.forEach(hit => {