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

View file

@ -46,13 +46,13 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
</div>
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
@ -75,13 +75,13 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
</div>
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
@ -104,13 +104,13 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
</div>
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
@ -133,13 +133,13 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
</div>
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
@ -162,13 +162,13 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
</div>
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
@ -191,13 +191,13 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
</div>
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
@ -220,13 +220,13 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
</div>
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
@ -249,13 +249,13 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
</div>
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
@ -278,13 +278,13 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
</div>
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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>
@ -307,11 +307,11 @@
</div>
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col">
<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"/>
<div class="col d-flex justify-content-end">
<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 class="col">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font" type="text" placeholder="Load from local" tabindex="2"/>
<div class="col d-flex justify-content-end">
<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>
@ -454,29 +454,29 @@
<div id="drag-full-eqs" 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 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 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 id="drag-full-spells" 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-info">Spell 1</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-info">Spell 2</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-info">Spell 3</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-info">Spell 4</div>
</div>

View file

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