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", `
-
Kette | Name | Menge | Preis π |
+ const header = dom("thead", `
+ Kette | Name | Menge | Preis π |
`)
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", `Kette | Name | Menge | Preis | | `);
+ const header = dom("thead", `Kette | Name | Menge | Preis | |
`);
itemTable.append(header);
cart.items.forEach((cartItem, idx) => {
diff --git a/site/carts.js b/site/carts.js
index 974fe3e..8028800 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 => {
@@ -51,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);
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", `
- Kette | Name | Menge | Preis π |
+ const header = dom("thead", `
+ Kette | Name | Menge | Preis π |
`)
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", `Kette | Name | Menge | Preis π | | `)
+ header = dom("thead", `Kette | Name | Menge | Preis π | |
`)
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 c21b495..d672e1a 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", () => {
@@ -291,7 +295,9 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi
let header = dom("tr", `Kette | Name | Menge | Preis | `);
if (headerModifier) header = headerModifier(header);
- table.appendChild(header);
+ const thead = dom("thead", ``);
+ thead.appendChild(header);
+ table.appendChild(thead);
let num = 0;
hits.forEach(hit => {