From a1f8bc791d55325b90b605931669b8a1e1e5eab3 Mon Sep 17 00:00:00 2001
From: "J.P. Krauss" <jkrauss@asymworks.com>
Date: Thu, 5 Jan 2023 17:05:51 -0800
Subject: [PATCH] Update Text Sizing to avoid Zoom-In on iOS

---
 Makefile                             |  4 ++--
 pyproject.toml                       |  2 +-
 sigl/templates/lists/addItem.html.j2 | 33 +++++++++++++---------------
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/Makefile b/Makefile
index c3bbb81..cb16b4d 100644
--- a/Makefile
+++ b/Makefile
@@ -25,10 +25,10 @@ db-downgrade :
 	poetry run flask db downgrade
 
 docker :
-	docker buildx build --platform=linux/amd64,linux/arm64 . -t asymworks/sigl:latest
+	docker buildx build --platform=linux/amd64,linux/arm64 . -t asymworks/sigl:latest -t asymworks/sigl:$(shell poetry version -s)
 
 docker-deploy:
-	docker buildx build --platform=linux/amd64,linux/arm64 . -t asymworks/sigl:latest --push
+	docker buildx build --platform=linux/amd64,linux/arm64 . -t asymworks/sigl:latest -t asymworks/sigl:$(shell poetry version -s) --push
 
 lint :
 	poetry run flake8
diff --git a/pyproject.toml b/pyproject.toml
index 253ef27..7987a7c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "sigl"
-version = "0.1.3"
+version = "0.1.4"
 description = "Simple Grocery List"
 authors = ["Jonathan Krauss <jkrauss@asymworks.com>"]
 license = "BSD-3-Clause"
diff --git a/sigl/templates/lists/addItem.html.j2 b/sigl/templates/lists/addItem.html.j2
index 92fae52..c427e4d 100644
--- a/sigl/templates/lists/addItem.html.j2
+++ b/sigl/templates/lists/addItem.html.j2
@@ -2,14 +2,11 @@
 {% block title %}{{ list.name }} | Sigl{% endblock %}
 {% block header %}
 <div class="flex justify-between items-center py-1">
-    <div class="text-sm font-bold text-gray-800">Add Item to {{ list.name }}</div>
+    <div class="font-bold text-gray-800">Add Item to {{ list.name }}</div>
 </div>
 {% endblock %}
 {% block head_scripts %}
-<script type="module">
-import JtAutocomplete from "https://unpkg.com/@jadetree/ui/dist/components/autocomplete.js";
-JtAutocomplete.register();
-</script>
+<script src="https://unpkg.com/@jadetree/ui/dist/components/autocomplete.iife.min.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/@jadetree/ui/css/index.css" />
 {% endblock %}
 {% block main %}
@@ -18,38 +15,38 @@ JtAutocomplete.register();
         <fieldset class="flex flex-col" x-data="{productName:'',newProduct:false}">
             <legend class="sr-only">Select Product to Add</legend>
             <div class="flex flex-col pb-4">
-                <label for="product" class="py-1 text-xs text-gray-700 font-semibold">Product:</label>
+                <label for="product" class="py-1 text-sm text-gray-700 font-semibold">Product:</label>
                 <jt-autocomplete clearable>
-                    <input id="product" name="productName" class="p-1 text-sm border border-gray-200 rounded" list="product-list" x-model="productName" @blur="newProduct=!isExistingProduct(productName)" />
+                    <input id="product" name="productName" class="p-1 border border-gray-200 rounded" list="product-list" x-model="productName" @blur="newProduct=!isExistingProduct(productName)" />
                 </jt-autocomplete>
-                <span class="text-xs text-blue-300" x-show="newProduct">New Product</span>
+                <span class="text-sm text-blue-300" x-show="newProduct">New Product</span>
             </div>
             <div class="flex flex-row align-center justify-start gap-2 pb-4" x-show="newProduct">
-                <input type="checkbox" id="rememberProduct" name="remember" class="appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 bg-no-repeat bg-center bg-contain cursor-pointer" />
-                <label for="rememberProduct" class="text-xs text-gray-700 font-semibold">Remember Product</label>
+                <input type="checkbox" id="rememberProduct" name="remember" checked />
+                <label for="rememberProduct" class="text-sm text-gray-700 font-semibold">Remember Product</label>
             </div>
             <div class="flex flex-col sm:flex-row sm:justify-between" x-show="newProduct">
                 <div class="w-full flex flex-col pb-4">
-                    <label for="productCategory" class="py-1 text-xs text-gray-700 font-semibold">Category:</label>
-                    <input type="text" id="productCategory" name="productCategory" class="p-1 text-sm border border-gray-200 rounded" />
+                    <label for="productCategory" class="py-1 text-sm text-gray-700 font-semibold">Category:</label>
+                    <input type="text" id="productCategory" name="productCategory" class="p-1 border border-gray-200 rounded" />
                 </div>
             </div>
         </fieldset>
         <div class="flex flex-col pb-4">
-            <label for="quantity" class="py-1 text-xs text-gray-700 font-semibold">Quantity:</label>
-            <input type="text" name="quantity" id="quantity" class="p-1 text-sm border border-gray-200 rounded" />
+            <label for="quantity" class="py-1 text-sm text-gray-700 font-semibold">Quantity:</label>
+            <input type="text" name="quantity" id="quantity" class="p-1 border border-gray-200 rounded" />
         </div>
         <div class="flex flex-col pb-4">
-            <label for="notes" class="py-1 text-xs text-gray-700 font-semibold">Notes:</label>
-            <textarea name="notes" id="notes" class="p-1 text-sm border border-gray-200 rounded"></textarea>
+            <label for="notes" class="py-1 text-sm text-gray-700 font-semibold">Notes:</label>
+            <textarea name="notes" id="notes" class="p-1 border border-gray-200 rounded"></textarea>
         </div>
         <div class="flex items-center justify-between">
             <div class="flex justify-start items-start">
-                <a href="{{ url_for('lists.detail', id=list.id) }}" class="px-2 py-1 text-sm text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
+                <a href="{{ url_for('lists.detail', id=list.id) }}" class="px-2 py-1 text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
                     Cancel
                 </a>
             </div>
-            <button type="submit" class="px-2 py-1 border rounded text-sm text-white bg-blue-600 hover:bg-blue-700">Add Item</button>
+            <button type="submit" class="px-2 py-1 border rounded text-white bg-blue-600 hover:bg-blue-700">Add Item</button>
         </div>
     </div>
 </form>