jkrauss/sigl
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update Text Sizing to avoid Zoom-In on iOS

Browse Source
This commit is contained in:
Jonathan Krauss
2023-01-05 17:05:51 -08:00
parent 8818219c83
commit a1f8bc791d
3 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
sigl/templates/lists/addItem.html.j2
View File

@@ -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>