From a5002e55ff22a9e57b725f544d642006f6fc3541 Mon Sep 17 00:00:00 2001
From: Florian Bauer <florian@sbg.at>
Date: Wed, 7 Jun 2023 00:49:03 +0200
Subject: [PATCH] Design fixes on very small handhelds.

---
 site/imprint.html |  2 +-
 site/utils.js     | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/imprint.html b/site/imprint.html
index f6e8334..737e8b7 100644
--- a/site/imprint.html
+++ b/site/imprint.html
@@ -1,6 +1,6 @@
 %%_templates/_header.html%% %%_templates/_menu.html%%
 
-<div class="column" style="max-width: 400px; margin: 0 auto">
+<div class="max-w-lg mx-auto my-8">
     <h1>Impressum</h1>
     <p>
         <strong>Angaben gemäß § 25 Mediengesetz (Österreich)</strong><br /><br />
diff --git a/site/utils.js b/site/utils.js
index bfb93b3..6ab2014 100644
--- a/site/utils.js
+++ b/site/utils.js
@@ -289,7 +289,7 @@ function itemToDOM(item) {
     }
 
     let priceHistory = "";
-    let priceBase = 200 / item.priceHistory[0].price;
+    let priceBase = 150 / item.priceHistory[0].price;
     for (let i = 0; i < item.priceHistory.length; i++) {
         const date = item.priceHistory[i].date;
         const currPrice = item.priceHistory[i].price;
@@ -300,7 +300,7 @@ function itemToDOM(item) {
             <td class="font-medium">${date}</td>
             <td>
                 <div style="width: ${priceBase * currPrice}px" 
-                    class="text-sm text-white px-1 ${increase > 0 ? "bg-red-500" : "bg-green-500"}">
+                    class="text-xs md:text-sm text-white px-1 ${increase > 0 ? "bg-red-500" : "bg-green-500"}">
                     € ${currPrice}
                 </div>
             </td>
@@ -322,11 +322,11 @@ function itemToDOM(item) {
             <div class="flex items-center">${itemToStoreLink(item)} <small class="ml-auto">${
             (item.isWeighted ? "⚖ " : "") + `${quantity} ${unit}`
         }</small></div>
-            <table class="priceinfo hidden text-sm mt-2" aria-hidden="true">
+            <table class="priceinfo hidden text-xs md:text-sm mt-2" aria-hidden="true">
                 ${priceHistory}
             </table>
         </td>
-        <td class="p-1 order-3 text-left whitespace-nowrap align-top" data-label="Preis">
+        <td class="p-1 order-3 text-left whitespace-nowrap align-top z-20" data-label="Preis">
             <span>€ ${Number(item.price).toFixed(2)}</span>
             <span class="${percentageChange > 0 ? "text-red-500" : percentageChange < 0 ? "text-green-500" : "hidden"}">
                 ${percentageChange > 0 ? "+" + percentageChange : percentageChange}%
@@ -568,9 +568,9 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi
             </div>
             
         </div>
-        <div id="result-container-${id}" class="flex hidden px-4 py-2 my-4 justify-between items-center text-sm border rounded-xl md:mt-8 md:rounded-b-none md:mb-0 bg-gray-100 ">
+        <div id="result-container-${id}" class="flex flex-col md:flex-row gap-4 hidden px-4 py-2 my-4 justify-between items-center text-sm border rounded-xl md:mt-8 md:rounded-b-none md:mb-0 bg-gray-100 ">
             <div id="links-${id}" class="results hidden">
-                <div class="flex gap-2 items-center">
+                <div class="flex flex-col md:flex-row gap-2 items-center">
                     <span id="numresults-${id}"></span>
                     <span>
                         <a id="querylink-${id}" class="querylink text-primary font-medium hover:underline">Teilen</a>