From 84d80ef4db4dee7ce811b6665eaa66aba2b499f4 Mon Sep 17 00:00:00 2001
From: Donald Burr <dburr@borg-cube.com>
Date: Sat, 17 Oct 2015 22:54:12 -0700
Subject: [PATCH] Fix text fields so they don't look so dorky

Now using <input type="number" pattern="\d*" step="1"> so that
the text field will pop up the numeric keyboard on both iOS and
Android. However this makes the "size=<blah>" no longer function.
So we set a fixed size for all <input type="number"> text fields
using CSS. Kinda hackish, but it works.
---
 web_app/css/sif-tools.css |  4 ++++
 web_app/sif_tools.html    | 18 +++++++++---------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/web_app/css/sif-tools.css b/web_app/css/sif-tools.css
index 63a3455..2b6f95b 100644
--- a/web_app/css/sif-tools.css
+++ b/web_app/css/sif-tools.css
@@ -21,3 +21,7 @@ strong {
 table {
   table-layout: fixed;
 }
+
+input[type=number]{
+    width: 80px;
+}
\ No newline at end of file
diff --git a/web_app/sif_tools.html b/web_app/sif_tools.html
index 22efb81..313a0a4 100644
--- a/web_app/sif_tools.html
+++ b/web_app/sif_tools.html
@@ -34,11 +34,11 @@
         <div id="tab-rank">
             <div id="the-form" align="center">
                 <h1>Rank Calculator</h1>
-                Current Rank:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="current_rank" name="current_rank" placeholder="rank" value="" />
+                Current Rank:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="current_rank" name="current_rank" placeholder="rank" value="" />
                 <br />
-                Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="current_exp" name="current_exp" placeholder="exp" value="" />
+                Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="current_exp" name="current_exp" placeholder="exp" value="" />
                 <br />
-                Desired Rank:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="desired_rank" name="desired_rank" placeholder="rank" value="" />
+                Desired Rank:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="desired_rank" name="desired_rank" placeholder="rank" value="" />
                 <br />
                 Game Version:&nbsp;&nbsp;&nbsp;
                 <select id="game_version" name="game_version">
@@ -63,7 +63,7 @@
       </div>
       <div id="tab-love-gem">
           <div id="love-gem-form" align="center">
-          Current Love Gems (optional):&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="current_gems" name="current_gems" placeholder="gems" value="" />
+          Current Love Gems (optional):&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="current_gems" name="current_gems" placeholder="gems" value="" />
             <br /><br />
             Mode:<br />
             <input type="radio" name="gem-mode" id="gem-mode" value="DATE" checked />Number of gems on date?<br />
@@ -72,7 +72,7 @@
                 Date:&nbsp;&nbsp;&nbsp;<input type="text" size="10" id="gem_desired_date" name="gem_desired_date" readonly="true" placeholder="MM/DD/YYYY" value="" />
             </div>
             <div id="gem-desired-gems-area">
-                Number of gems desired:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="gem_desired_gems" name="gem_desired_gems" placeholder="gems" value="" />
+                Number of gems desired:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="gem_desired_gems" name="gem_desired_gems" placeholder="gems" value="" />
             </div>
             <br /><br />
             <input type="checkbox" name="gems_verbose" id="gems_verbose" value="YES" />Verbose Mode<br />
@@ -100,18 +100,18 @@
       <option value="UR">UR</option>
   </select>
   <br />
-  Current Level:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_current_level" name="card_current_level" placeholder="level" value="" />
+  Current Level:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="card_current_level" name="card_current_level" placeholder="level" value="" />
   <br />
-  Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_current_exp" name="card_current_exp" placeholder="exp" value="" />
+  Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="card_current_exp" name="card_current_exp" placeholder="exp" value="" />
   <br /><br />
   Mode:<br />
   <input type="radio" name="card-mode" id="card-mode" value="LEVEL" checked />EXP needed to get to a level?<br />
   <input type="radio" name="card-mode" id="card-mode" value="EXP" />Level reached after feeding EXP?<br /><br />
   <div id="card-level-area">
-    Desired level:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_desired_level" name="card_desired_level" placeholder="level" value="" />
+    Desired level:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="card_desired_level" name="card_desired_level" placeholder="level" value="" />
 </div>
 <div id="card-exp-area">
-    EXP:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_feed_exp" name="card_feed_exp" placeholder="exp" value="" />
+    EXP:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="card_feed_exp" name="card_feed_exp" placeholder="exp" value="" />
 </div>
 <br /><br />
 <div id="button-calculate-card">Calculate</div>