Marown
/
heissepreise
mirror of https://github.com/badlogic/heissepreise.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add mobile table headers, fixes badlogic/heissepreise#89

This commit is contained in:
Christian Tschugg 2023-06-24 19:38:01 +02:00
parent c51c08c1cd
commit 97888f374b
4 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
site/style.css
View File

@ -8,9 +8,9 @@ thead > tr {
}
.item {
@apply mb-3 overflow-hidden;
@apply grid grid-cols-3 col-span-3;
@apply grid grid-cols-3 col-span-3 items-end;
@apply md:table-row;
@apply border border-b rounded-xl;
@apply border border-b md:rounded-xl;
}
.item > td[data-label="Kette"] {
@ -25,14 +25,22 @@ thead > tr {
@apply order-1 col-span-3;
}
.item > td[data-label="Preis"] {
@apply p-1 text-left whitespace-nowrap align-top z-20;
@apply p-1 text-left whitespace-nowrap align-top;
@apply order-3;
}
.item > td:nth-child(4) {
@apply order-4 text-right;
}
.item > td.action {
@apply order-5 flex justify-end p-1;
.item > td[data-label="Aktionen"] {
@apply order-5 p-1;
}
.action {
@apply flex justify-end;
}
.item > td[data-label]::before {
@apply content-label font-bold uppercase block bg-primary text-white px-1 -m-1 mb-1 text-sm;
@apply md:content-none;
}
.item .chevron {
@ -213,7 +221,7 @@ thead > tr {
.wrapper {
@apply flex justify-center items-center;
@apply relative text-center mx-auto my-0 gap-2;
@apply w-full z-[1];
@apply w-full z-[2];
}
.wrapper--search label {
@ -223,7 +231,7 @@ thead > tr {
@apply no-underline;
}
.wrapper--sticky {
@apply flex-col z-[1] p-1 gap-0;
@apply flex-col z-[2] p-1 gap-0;
}
.toggle:not(:checked) ~ .wrapper--sticky,

2
site/views/items-chart.js
View File

@ -14,7 +14,7 @@ class ItemsChart extends View {
this.unitPrice = false;
this.innerHTML = /*html*/ `
<div class="bg-stone-200 p-4 mx-auto md:rounded-none md:mb-0 rounded-xl mb-4w ${settings.stickyChart ? "sticky top-0" : ""}">
<div class="bg-stone-200 p-4 mb-4 mx-auto md:rounded-none md:mb-0 rounded-xl mb-4w ${settings.stickyChart ? "sticky top-0" : ""}">
<div class="w-full h-[calc(100vh*0.50)] md:h-[calc(100vh*0.60)] lg:h-[calc(100vh*0.60)]" style="position: relative;">
<canvas x-id="canvas" class="bg-white rounded-lg"></canvas>
<div x-id="noData" class="hidden flex items-center justify-center h-full">Keine Daten ausgewählt</div>

24
site/views/items-list.js
View File

@ -58,7 +58,7 @@ class ItemsList extends View {
<tr class="bg-primary text-white md:table-row uppercase text-sm">
<th class="text-center">Kette</th>
<th>Name</th>
<th x-id="expandPriceHistories" class="cursor-pointer">Preis +</th>
<th x-id="expandPriceHistories" class="cursor-pointer">Preis ▼</th>
<th></th>
</tr>
</thead>
@ -95,7 +95,7 @@ class ItemsList extends View {
this._showAllPriceHistories = false;
elements.expandPriceHistories.addEventListener("click", () => {
const showAll = (this._showAllPriceHistories = !this._showAllPriceHistories);
elements.expandPriceHistories.innerText = showAll ? "Preis -" : "Preis +";
elements.expandPriceHistories.innerText = showAll ? "Preis ▲" : "Preis ▼";
elements.tableBody.querySelectorAll(".priceinfo").forEach((el) => (showAll ? el.classList.remove("hidden") : el.classList.add("hidden")));
});
@ -227,15 +227,17 @@ class ItemsList extends View {
<span x-id="numPrices"></span>
<span class="chevron">▼</span>
</td>
<td class="action">
<label x-id="chart" class="${this._chart ? "" : "hidden"}">
<input x-id="chartCheckbox" type="checkbox" class="hidden peer">
<span class="peer-checked:bg-blue-700 btn-action">📈</span>
</label>
<input x-id="add" type="button" class="${this._add ? "" : "hidden"} btn-action" value="+">
<input x-id="remove" type="button" class="${this._remove ? "" : "hidden"} btn-action" value="-">
<input x-id="up" type="button" class="${this._updown ? "" : "hidden"} btn-action" value="▲">
<input x-id="down" type="button" class="${this._updown ? "" : "hidden"} btn-action" value="▼">
<td data-label="Aktionen">
<span class="action">
<label x-id="chart" class="${this._chart ? "" : "hidden"}">
<input x-id="chartCheckbox" type="checkbox" class="hidden peer">
<span class="peer-checked:bg-blue-700 btn-action">📈</span>
</label>
<input x-id="add" type="button" class="${this._add ? "" : "hidden"} btn-action" value="+">
<input x-id="remove" type="button" class="${this._remove ? "" : "hidden"} btn-action" value="-">
<input x-id="up" type="button" class="${this._updown ? "" : "hidden"} btn-action" value="▲">
<input x-id="down" type="button" class="${this._updown ? "" : "hidden"} btn-action" value="▼">
</span>
</td>
`
);

4
tailwind.config.js
View File

@ -9,6 +9,10 @@ module.exports = {
scale: {
flip: "-1",
},
content: {
label: "attr(data-label)",
none: "none",
},
},
},
plugins: [],