From 97888f374b1c726ca7e1c7750729f9eeb68eb524 Mon Sep 17 00:00:00 2001
From: Christian Tschugg <iantsch@gmail.com>
Date: Sat, 24 Jun 2023 19:38:01 +0200
Subject: [PATCH] Add mobile table headers, fixes badlogic/heissepreise#89

---
 site/style.css            | 22 +++++++++++++++-------
 site/views/items-chart.js |  2 +-
 site/views/items-list.js  | 24 +++++++++++++-----------
 tailwind.config.js        |  4 ++++
 4 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/site/style.css b/site/style.css
index 8eff5dd..2442c42 100644
--- a/site/style.css
+++ b/site/style.css
@@ -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,
diff --git a/site/views/items-chart.js b/site/views/items-chart.js
index 3dda53a..fdf9004 100644
--- a/site/views/items-chart.js
+++ b/site/views/items-chart.js
@@ -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>
diff --git a/site/views/items-list.js b/site/views/items-list.js
index cb20dcf..d0fb837 100644
--- a/site/views/items-list.js
+++ b/site/views/items-list.js
@@ -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>
             `
             );
diff --git a/tailwind.config.js b/tailwind.config.js
index c09c21f..1b345f0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,10 @@ module.exports = {
             scale: {
                 flip: "-1",
             },
+            content: {
+                label: "attr(data-label)",
+                none: "none",
+            },
         },
     },
     plugins: [],