style: enabled form control & soft error handler

This commit is contained in:
reschan 2021-10-21 22:47:14 +07:00
parent 3ecf5c21e7
commit b85f91e50e
3 changed files with 67 additions and 58 deletions

View file

@ -71,32 +71,31 @@
} }
.Normal { .Normal {
color: #FFFFFF; color: #FFFFFF !important;
} }
.Unique { .Unique {
color: #FFFF55; color: #FFFF55 !important;
} }
.Rare { .Rare {
color: #FF55FF; color: #FF55FF !important;
} }
.Legendary { .Legendary {
color: #55FFFF; color: #55FFFF !important;
} }
.Fabled { .Fabled {
color: #FF5555; color: #FF5555 !important;
} }
.Mythic { .Mythic {
color: #AA00AA; color: #AA00AA !important;
} }
.Set { .Set {
display: inline; color: #5f5 !important;
color: #5f5;
} }
.eDam, .Earth, .Earth_powder { .eDam, .Earth, .Earth_powder {
@ -146,6 +145,11 @@
} }
/* equipment field specifics */ /* equipment field specifics */
.form-control {
transition: none !important;
box-shadow: none !important;
width: 95% !important;
}
.text-right { .text-right {
float: right; float: right;

View file

@ -46,13 +46,13 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/>
<datalist id="helmet-items"> <datalist id="helmet-items">
</datalist> </datalist>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/>
</div> </div>
</div> </div>
</div> </div>
@ -75,13 +75,13 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
<datalist id="ring1-items"> <datalist id="ring1-items">
</datalist> </datalist>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" id="ring1-powder" name="ring1-powder" placeholder="powders" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="ring1-powder" name="ring1-powder" placeholder="powders" tabindex="2"/>
</div> </div>
</div> </div>
</div> </div>
@ -104,13 +104,13 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/>
<datalist id="chestplate-items"> <datalist id="chestplate-items">
</datalist> </datalist>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/>
</div> </div>
</div> </div>
</div> </div>
@ -133,13 +133,13 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/>
<datalist id="ring2-items"> <datalist id="ring2-items">
</datalist> </datalist>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" id="ring2-powder" name="ring2-powder" placeholder="powders" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="ring2-powder" name="ring2-powder" placeholder="powders" tabindex="2"/>
</div> </div>
</div> </div>
</div> </div>
@ -162,13 +162,13 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/>
<datalist id="leggings-items"> <datalist id="leggings-items">
</datalist> </datalist>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders" tabindex="1"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders" tabindex="1"/>
</div> </div>
</div> </div>
</div> </div>
@ -191,13 +191,13 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/>
<datalist id="bracelet-items"> <datalist id="bracelet-items">
</datalist> </datalist>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" id="bracelet-powder" name="bracelet-powder" placeholder="powders" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="bracelet-powder" name="bracelet-powder" placeholder="powders" tabindex="2"/>
</div> </div>
</div> </div>
</div> </div>
@ -220,13 +220,13 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" list="boots-items" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="boots-items" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/>
<datalist id="boots-items"> <datalist id="boots-items">
</datalist> </datalist>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/>
</div> </div>
</div> </div>
</div> </div>
@ -249,13 +249,13 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/>
<datalist id="necklace-items"> <datalist id="necklace-items">
</datalist> </datalist>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" id="necklace-powder" name="necklace-powder" placeholder="powders" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="necklace-powder" name="necklace-powder" placeholder="powders" tabindex="2"/>
</div> </div>
</div> </div>
</div> </div>
@ -278,13 +278,13 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/>
<datalist id="weapon-items"> <datalist id="weapon-items">
</datalist> </datalist>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/>
</div> </div>
</div> </div>
</div> </div>
@ -307,11 +307,11 @@
</div> </div>
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
</div> </div>
<div class="col"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" placeholder="Load from local" tabindex="2"/> <input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" placeholder="Load from local" tabindex="2"/>
</div> </div>
</div> </div>
</div> </div>
@ -454,29 +454,29 @@
<div id="drag-full-eqs" style="display: none;"> <div id="drag-full-eqs" style="display: none;">
<div class = "build hide-container-grid" style="display: none;"> <div class = "build hide-container-grid" style="display: none;">
<div class = "center build-order" id = "build-order" style = "grid-item-10"> <div class = "center build-order" id = "build-order">
</div> </div>
<div class = "center build-melee-stats" id = "build-melee-stats" style = "grid-item-11"> <div class = "center build-melee-stats" id = "build-melee-stats">
</div> </div>
<div class = "center build-defense-stats" id = "build-defense-stats" style = "grid-item-12"> <div class = "center build-defense-stats" id = "build-defense-stats">
</div> </div>
</div> </div>
</div> </div>
<div id="drag-full-spells" style="display: none;"> <div id="drag-full-spells" style="display: none;">
<div class = "spells hide-container-grid" style="display: none;"> <div class = "spells hide-container-grid" style="display: none;">
<div class = "center spell-info" id = "spell0" style = "grid-item-1"> <div class = "center spell-info" id = "spell0">
<!--div class = "center" id = "spell0-name">Spell 1</div--> <!--div class = "center" id = "spell0-name">Spell 1</div-->
<div class = "center" id = "spell0-info">Spell 1</div> <div class = "center" id = "spell0-info">Spell 1</div>
</div> </div>
<div class = "center spell-info" id = "spell1" style = "grid-item-2"> <div class = "center spell-info" id = "spell1">
<!--div class = "center" id = "spell1-name">Spell 2</div--> <!--div class = "center" id = "spell1-name">Spell 2</div-->
<div class = "center" id = "spell1-info">Spell 2</div> <div class = "center" id = "spell1-info">Spell 2</div>
</div> </div>
<div class = "center spell-info" id = "spell2" style = "grid-item-3"> <div class = "center spell-info" id = "spell2">
<!--div class = "center" id = "spell2-name">Spell 3</div--> <!--div class = "center" id = "spell2-name">Spell 3</div-->
<div class = "center" id = "spell2-info">Spell 3</div> <div class = "center" id = "spell2-info">Spell 3</div>
</div> </div>
<div class = "center spell-info" id = "spell3" style = "grid-item-4"> <div class = "center spell-info" id = "spell3">
<!--div class = "center" id = "spell3-name">Spell 4</div--> <!--div class = "center" id = "spell3-name">Spell 4</div-->
<div class = "center" id = "spell3-info">Spell 4</div> <div class = "center" id = "spell3-info">Spell 4</div>
</div> </div>

View file

@ -1,4 +1,6 @@
$().ready(function(){ $().ready(function(){
// test
// sp fields // sp fields
jQuery(document).on("input", '.skp-update', function(){ jQuery(document).on("input", '.skp-update', function(){
updateStatSchedule(); updateStatSchedule();
@ -136,12 +138,15 @@ function update_fields(type, alt="") {
let item = itemMap.get($("#"+type+"-choice").val()); let item = itemMap.get($("#"+type+"-choice").val());
if (item) { if (item) {
$("#"+type+"-powder").attr("placeholder", item["slots"]+" slots"+alt); $("#"+type+"-powder").attr("placeholder", item["slots"]+" slots"+alt);
$("#"+type+"-choice").removeClass("text-light").addClass(item.tier); $("#"+type+"-choice").removeClass("text-light is-invalid").addClass(item.tier);
if (type == 'weapon') { if (type == 'weapon') {
$("#"+type+"-img").attr('src', 'media/items/new/generic-'+item.type+'.png'); $("#"+type+"-img").attr('src', 'media/items/new/generic-'+item.type+'.png');
} }
} else { } else if ($("#"+type+"-choice").val() == '') {
$("#"+type+"-choice").removeClass('Normal Unique Rare Legendary Fabled Mythic Set').addClass("text-light"); $("#"+type+"-choice").removeClass("is-invalid");
}
else {
$("#"+type+"-choice").removeClass('Normal Unique Rare Legendary Fabled Mythic Set').addClass("text-light is-invalid");
} }
} }