From ca08dbd780149c08acf734b1c35b298a69c509b9 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Thu, 18 Feb 2021 22:12:07 -0700
Subject: [PATCH] Add inputtype=numeric to ZIP code and street number inputs,
 fix iOS display bug

---
 www/assets/js/add.js              | 2 ++
 www/pages/add.html                | 8 +++++---
 www/pages/myroute/editnote.html   | 2 +-
 www/pages/toolbox/addrlookup.html | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/www/assets/js/add.js b/www/assets/js/add.js
index 261fc11..0eadc79 100644
--- a/www/assets/js/add.js
+++ b/www/assets/js/add.js
@@ -125,11 +125,13 @@ function toggleLettersInAddressNumber() {
         $("#address-has-letters-checkbox").prop("checked", false);
         $("#housenumberinput").attr("type", "number");
         $("#housenumberinput").attr("placeholder", "1234");
+        $("#housenumberinput").attr("inputmode", "numeric");
     } else {
         // allow
         $("#address-has-letters-checkbox").prop("checked", true);
         $("#housenumberinput").attr("type", "text");
         $("#housenumberinput").attr("placeholder", "1A2B3");
+        $("#housenumberinput").attr("inputmode", "text");
     }
 }
 
diff --git a/www/pages/add.html b/www/pages/add.html
index c0d0f44..b624b2b 100644
--- a/www/pages/add.html
+++ b/www/pages/add.html
@@ -68,7 +68,7 @@
                     </div>
                 </div>
                 <div class="page-content row justify-content-center margin-top-tablet padding-bottom-tablet">
-                    <div class="list no-margin-top col-100 medium-80 large-50 elevation-tablet">
+                    <div class="list no-hairlines no-margin-top col-100 medium-80 large-50 elevation-tablet">
                         <ul>
                             <li class="item-divider">Address</li>
                             <li>
@@ -77,7 +77,7 @@
                                         <div class="item-inner">
                                             <div class="item-title item-label">Number</div>
                                             <div class="item-input-wrap">
-                                                <input type="number" name="number" id="housenumberinput" placeholder="1234" value="" autocomplete="off" autocorrect="off">
+                                                <input type="number" name="number" id="housenumberinput" placeholder="1234" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
                                             </div>
                                         </div>
                                     </div>
@@ -114,7 +114,7 @@
                                         <div class="item-inner no-padding-right">
                                             <div class="item-title item-label">ZIP</div>
                                             <div class="item-input-wrap">
-                                                <input type="text" name="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off">
+                                                <input type="text" name="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
                                             </div>
                                         </div>
                                     </div>
@@ -132,6 +132,8 @@
                                 </label>
                             </li>
                             {{/each}}
+                            <!-- Extra hidden element for padding because the last list entry likes to hide under the bottom bar on iOS -->
+                            <li style="visibility: hidden;"><span class="item-content">&nbsp;</span></li>
                         </ul>
                     </div>
                 </div>
diff --git a/www/pages/myroute/editnote.html b/www/pages/myroute/editnote.html
index f5a28ee..f3064ba 100644
--- a/www/pages/myroute/editnote.html
+++ b/www/pages/myroute/editnote.html
@@ -52,7 +52,7 @@
                             <div class="item-inner">
                                 <div class="item-title item-label">ZIP</div>
                                 <div class="item-input-wrap">
-                                    <input type="number" value="{{note.zipcode}}" name="zipcode" id="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off">
+                                    <input type="number" value="{{note.zipcode}}" name="zipcode" id="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
                                 </div>
                             </div>
                         </div>
diff --git a/www/pages/toolbox/addrlookup.html b/www/pages/toolbox/addrlookup.html
index f8ab7d5..3def9b1 100644
--- a/www/pages/toolbox/addrlookup.html
+++ b/www/pages/toolbox/addrlookup.html
@@ -57,7 +57,7 @@
                                     <div class="item-inner no-padding-right">
                                         <div class="item-title item-label">ZIP</div>
                                         <div class="item-input-wrap">
-                                            <input type="text" id="zipcodeinput" placeholder="12345" value="" autocomplete="off" autocorrect="off">
+                                            <input type="text" id="zipcodeinput" placeholder="12345" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
                                             <span class="input-clear-button"></span>
                                         </div>
                                     </div>