dburr/SIFTools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix text fields so they don't look so dorky

Browse source 
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.
This commit is contained in:
Donald Burr 2015-10-17 22:54:12 -07:00
parent c07d35921a
commit 84d80ef4db
2 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web_app/css/sif-tools.css
View file

@ -21,3 +21,7 @@ strong {
table { table {
table-layout: fixed; table-layout: fixed;
} }
input[type=number]{
width: 80px;
}

18
web_app/sif_tools.html
View file

@ -34,11 +34,11 @@
<div id="tab-rank"> <div id="tab-rank">
<div id="the-form" align="center"> <div id="the-form" align="center">
<h1>Rank Calculator</h1> <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 /> <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 /> <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 /> <br />
Game Version:&nbsp;&nbsp;&nbsp; Game Version:&nbsp;&nbsp;&nbsp;
<select id="game_version" name="game_version"> <select id="game_version" name="game_version">
@ -63,7 +63,7 @@
</div> </div>
<div id="tab-love-gem"> <div id="tab-love-gem">
<div id="love-gem-form" align="center"> <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 /> <br /><br />
Mode:<br /> Mode:<br />
<input type="radio" name="gem-mode" id="gem-mode" value="DATE" checked />Number of gems on date?<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="" /> 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>
<div id="gem-desired-gems-area"> <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> </div>
<br /><br /> <br /><br />
<input type="checkbox" name="gems_verbose" id="gems_verbose" value="YES" />Verbose Mode<br /> <input type="checkbox" name="gems_verbose" id="gems_verbose" value="YES" />Verbose Mode<br />
@ -100,18 +100,18 @@
<option value="UR">UR</option> <option value="UR">UR</option>
</select> </select>
<br /> <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 /> <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 /> <br /><br />
Mode:<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="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 /> <input type="radio" name="card-mode" id="card-mode" value="EXP" />Level reached after feeding EXP?<br /><br />
<div id="card-level-area"> <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>
<div id="card-exp-area"> <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> </div>
<br /><br /> <br /><br />
<div id="button-calculate-card">Calculate</div> <div id="button-calculate-card">Calculate</div>