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

Merge pull request #27 from iantsch/responsive-tables

Browse Source 
Add responsive tables
This commit is contained in:
Mario Zechner 2023-05-26 15:49:24 +02:00 committed by GitHub
commit bf47a1d268
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 84 additions and 17 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) => {

28
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 => {
@ -51,14 +53,22 @@ function showCarts(lookup) {
const increase = Math.round((currPrice - oldPrice) / oldPrice * 100);
const row = dom("tr", ``);
row.appendChild(dom("td", `<a href="cart.html?name=${cart.name}">${cart.name}</a>`));
row.appendChild(dom("td", cart.items.length));
row.appendChild(dom("td", `<span style="color: ${currPrice > oldPrice ? "red" : "green"}">${currPrice.toFixed(2)}`));
const nameDom = dom("td", `<a href="cart.html?name=${cart.name}">${cart.name}</a>`);
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", `<span style="color: ${currPrice > oldPrice ? "red" : "green"}">${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);

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

8
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", () => {
@ -291,7 +295,9 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi
let header = dom("tr", `<th>Kette</th><th>Name</th><th>Menge</th><th>Preis</th>`);
if (headerModifier) header = headerModifier(header);
table.appendChild(header);
const thead = dom("thead", ``);
thead.appendChild(header);
table.appendChild(thead);
let num = 0;
hits.forEach(hit => {