Add mobile table headers, fixes badlogic/heissepreise#89

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 {
+.item > td[data-label="Aktionen"] {
-    @apply order-5 flex justify-end p-1;
+    @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,

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>

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">
+                <td data-label="Aktionen">
-                    <label x-id="chart" class="${this._chart ? "" : "hidden"}">
+                    <span class="action">
-                        <input x-id="chartCheckbox" type="checkbox" class="hidden peer">
+                        <label x-id="chart" class="${this._chart ? "" : "hidden"}">
-                        <span class="peer-checked:bg-blue-700 btn-action">📈</span>
+                            <input x-id="chartCheckbox" type="checkbox" class="hidden peer">
-                    </label>
+                            <span class="peer-checked:bg-blue-700 btn-action">📈</span>
-                    <input x-id="add" type="button" class="${this._add ? "" : "hidden"} btn-action" value="+">
+                        </label>
-                    <input x-id="remove" type="button" class="${this._remove ? "" : "hidden"} btn-action" value="-">
+                        <input x-id="add" type="button" class="${this._add ? "" : "hidden"} btn-action" value="+">
-                    <input x-id="up" type="button" class="${this._updown ? "" : "hidden"} btn-action" value="▲">
+                        <input x-id="remove" type="button" class="${this._remove ? "" : "hidden"} btn-action" value="-">
-                    <input x-id="down" type="button" class="${this._updown ? "" : "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>
             `
             );

tailwind.config.js

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