endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

style: make things scalable to smaller resolution

Browse source
This commit is contained in:
reschan 2021-10-18 18:54:47 +07:00
parent 1ddf4d8983
commit 3996da1a5c
3 changed files with 102 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
sq2.css
View file

@ -85,30 +85,19 @@ table {
}
.full-border, .box {
border: 5px solid rgb(45, 45, 45);
}
.top-half-border {
border-top: 5px solid rgb(45, 45, 45);
border-left: 5px solid rgb(45, 45, 45);
border-right: 5px solid rgb(45, 45, 45);
}
.bot-half-border {
border-bottom: 5px solid rgb(45, 45, 45);
border-left: 5px solid rgb(45, 45, 45);
border-right: 5px solid rgb(45, 45, 45);
border: .3vw solid rgb(45, 45, 45);
}
.se-border {
border-left: 5px solid rgb(45, 45, 45);
border-right: 5px solid rgb(45, 45, 45);
border-left: .3vw solid rgb(45, 45, 45);
border-right: .3vw solid rgb(45, 45, 45);
}
td {
padding: 0;
margin: 0;
white-space: nowrap;
font-size: .8vw;
}
p {
@ -120,20 +109,23 @@ p {
input {
background-color: rgb(40, 40, 40);
border-top: 2px solid rgb(25, 25, 25) !important;
border-left: 2px solid rgb(25, 25, 25) !important;
border-bottom: 2px solid rgb(45, 45, 45) !important;
border-right: 2px solid rgb(45, 45, 45) !important;
border-top: .15vw solid rgb(25, 25, 25) !important;
border-left: .15vw solid rgb(25, 25, 25) !important;
border-bottom: .15vw solid rgb(45, 45, 45) !important;
border-right: .15vw solid rgb(45, 45, 45) !important;
box-sizing: border-box !important;
color: rgb(240, 240, 240);
min-width: 0;
min-height: 0;
font-size: .8vw;
box-sizing: none;
}
input.item-name {
text-align: center;
font-weight: bold;
width: 13em;
width: 10vw;
height: 1.2vw;
}
input.search-field {
@ -159,6 +151,8 @@ input.search-field {
}
.skp-container {
width: 38vw;
height: 10vw;
display: inline-flex;
flex-direction: column;
background-color: rgb(30, 30, 30);
@ -169,7 +163,7 @@ td.mono-font {
}
td.damage-size {
width: 7em;
width: 5vw;
user-select: none;
}
@ -183,8 +177,8 @@ td.damage-size {
}
.skp-input {
width: 7em;
height: 1.5em;
width: 6vw;
height: 1.2vw;
text-align: center;
}
@ -198,11 +192,20 @@ td.damage-size {
text-align: center;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
width: 13em;
width: 10vw;
height: 1.2vw;
}
.skp-tooltip {
font-size: 0.7rem;
font-size: .6vw;
}
.spell-container {
display: inline-flex;
vertical-align: top;
background-color: rgb(30, 30, 30);
width: 18vw;
height: 24.5vw;
}
.draggable {
@ -254,11 +257,7 @@ p.Damage {
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid rgb(30, 30, 30);
border-bottom: 1px solid rgb(45, 45, 45)
/*
border-top: 1px solid rgb(30, 30, 30);
border-bottom: 1px solid rgb(45, 45, 45);*/
}
.spacer-table {
@ -270,8 +269,8 @@ p.Damage {
flex-direction: column;
vertical-align: top;
background-color: rgb(30, 30, 30);
width: 20.5rem;
height: 29.65rem;
width: 18vw;
height: 24.5vw;
}
.nDam {
@ -382,8 +381,8 @@ button {
}
.item-margin {
margin-top: 1em;
margin-bottom: 1em;
margin-top: .8vw;
margin-bottom: .8vw;
}
.item-tooltip {
@ -404,6 +403,7 @@ button {
display: flex;
cursor: move;
background-color: rgb(45, 45, 45);
font-size: .8vw;
}
.search-result-container {
@ -412,10 +412,8 @@ button {
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
flex-basis: 40em;
max-width: 20em;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 30vw;
max-width: 14.4vw;
}
.button-boost {
@ -426,9 +424,17 @@ button {
button.toggleOn{
background-color:#0a0;
border: 3 px solid rgb(0, 70, 0);
border: 3px solid rgb(0, 70, 0);
}
.damageSubtitle {
text-align: center;
}
.itemp {
font-size: .8vw;
}
/*
div:not(.item-tooltip) {
font-size: .8vw;
}*/

112
sq2.html
View file

@ -304,21 +304,21 @@
<div id="left" class="column">
<div class="bottom">
<ul>
<li><button onclick="$('#overall-window').toggle()"><img src="media/items/new/generic-scroll.png" alt="" title="Overall Build Stats"></button></li>
<li><button onclick="$('#search-container').toggle()"><img src="media/icons/new/searcher.png" alt="" title="Item Search" style="width: 64px"></button></li>
<li><button onclick="$('#boost-container').toggle()"><img src="media/icons/new/custom.png" alt="" title="Active boosts" style="width: 64px"></button></li>
<li><a href="https://wynnbuilder.github.io/"><img src="media/icons/new/atlas64.png" alt="place" title="WynnBuilder" style="width: 64px;"></a></li>
<li><button onclick="$('#overall-window').toggle()"><img src="media/items/new/generic-scroll.png" alt="" title="Overall Build Stats" style="width: 3vw"></button></li>
<li><button onclick="$('#search-container').toggle()"><img src="media/icons/new/searcher.png" alt="" title="Item Search" style="width: 3vw"></button></li>
<li><button onclick="$('#boost-container').toggle()"><img src="media/icons/new/custom.png" alt="" title="Active boosts" style="width: 3vw"></button></li>
<li><a href="https://wynnbuilder.github.io/"><img src="media/icons/new/atlas64.png" alt="place" title="WynnBuilder" style="width: 3vw;"></a></li>
</ul>
</div>
</div>
<div id="right" class="column">
<div class="bottom">
<div class="all-equipment" id="column1">
<div class="weapon-container" style="width: 46rem;">
<table style="width: 46em; border-collapse: collapse;" class="full-border">
<div class="weapon-container" style="width: 38vw;">
<table style="width: 100%; border-collapse: collapse;" class="full-border">
<tr>
<td id="weapon-img-loc" style="border: none;">
<img id="weapon-img" src="media/items/new/generic-dagger.png" style="display: flex; width: 2.8em;" class="item-icon">
<img id="weapon-img" src="media/items/new/generic-dagger.png" style="display: flex; width: 2.2vw;" class="item-icon">
</td>
<td style="border: none;">
<table style="font-size: 15px; text-align: center; border-collapse: collapse;">
@ -354,16 +354,16 @@
</table>
</div>
<div style="display: inline-flex; flex-direction: row;" >
<div class="equipment-container" style="width: 23rem;">
<div class="equipment-container" style="width: 19vw;">
<table class="full-border" style="border-collapse: collapse;">
<tr>
<td id="helmet-img-loc" style="border: none; width: 0.1%;">
<img src="media/items/new/generic-helmet.png" style="display: flex; width: 2.8em;" class="item-icon">
<img src="media/items/new/generic-helmet.png" style="display: flex; width: 2.2vw;" class="item-icon">
</td>
<td style="border: none; justify-content: left; width: 100%;">
<table style="font-size: 15px; text-align: center; border-collapse: collapse;">
<tr>
<td id='helmet-health' class="se-border Health"></td>
<td id='helmet-health' style="width: 6vw;" class="se-border Health"></td>
<td class="se-border">
<input class="item-name" list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/>
<datalist id="helmet-items">
@ -371,7 +371,7 @@
</td>
</tr>
<tr>
<td id='helmet-lv' style="width: 100%;" class="se-border lvl"></td>
<td id='helmet-lv' style="width: 6vw;" class="se-border lvl"></td>
<td class="se-border">
<input class="powders powder-input" type="text" id="helmet-powder" name="helmet-powder" placeholder="Example: t6t6"/>
</td>
@ -383,12 +383,12 @@
<table class="full-border" style="border-collapse: collapse;">
<tr>
<td id="chestplate-img-loc" style="border: none; width: 0.1%;">
<img src="media/items/new/generic-chestplate.png" style="display: flex; width: 2.8em;" class="item-icon">
<img src="media/items/new/generic-chestplate.png" style="display: flex; width: 2.2vw;" class="item-icon">
</td>
<td style="border: none;">
<table style="font-size: 15px; text-align: center; border-collapse: collapse;">
<tr>
<td id='chestplate-health' style="width: 100%;" class="Health se-border"></td>
<td id='chestplate-health' style="width: 6vw;" class="Health se-border"></td>
<td class="se-border">
<input class="item-name" list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate"/>
<datalist id="chestplate-items">
@ -396,7 +396,7 @@
</td>
</tr>
<tr>
<td id='chestplate-lv' style="width: 100%;" class="se-border lvl"></td>
<td id='chestplate-lv' style="width: 6vw;" class="se-border lvl"></td>
<td class="se-border">
<input class="powders powder-input" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders"/>
</td>
@ -408,12 +408,12 @@
<table class="full-border" style="border-collapse: collapse;">
<tr>
<td id="leggings-img-loc" style="border: none; width: 0.1%;">
<img src="media/items/new/generic-leggings.png" style="display: flex; width: 2.8em;" class="item-icon">
<img src="media/items/new/generic-leggings.png" style="display: flex; width: 2.2vw;" class="item-icon">
</td>
<td style="border: none;">
<table style="font-size: 15px; text-align: center; border-collapse: collapse;">
<tr>
<td id='leggings-health' style="width: 100%;" class="Health se-border"></td>
<td id='leggings-health' style="width: 6vw;" class="Health se-border"></td>
<td class="se-border">
<input class="item-name" list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings"/>
<datalist id="leggings-items">
@ -421,7 +421,7 @@
</td>
</tr>
<tr>
<td id='leggings-lv' style="width: 100%;" class="se-border lvl"></td>
<td id='leggings-lv' style="width: 6vw;" class="se-border lvl"></td>
<td class="se-border">
<input class="powders powder-input" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders"/>
</td>
@ -433,12 +433,12 @@
<table class="full-border" style="border-collapse: collapse;">
<tr>
<td id="boots-img-loc" style="border: none; width: 0.1%;">
<img src="media/items/new/generic-boots.png" style="display: flex; width: 2.8em;" class="item-icon">
<img src="media/items/new/generic-boots.png" style="display: flex; width: 2.2vw;" class="item-icon">
</td>
<td style="border: none;">
<table style="font-size: 15px; text-align: center; border-collapse: collapse;">
<tr>
<td id='boots-health' style="width: 100%;" class="Health se-border"></td>
<td id='boots-health' style="width: 6vw;" class="Health se-border"></td>
<td class="se-border">
<input class="item-name" list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots"/>
<datalist id="boots-items">
@ -446,7 +446,7 @@
</td>
</tr>
<tr>
<td id='boots-lv' style="width: 100%;" class="se-border lvl"></td>
<td id='boots-lv' style="width: 6vw;" class="se-border lvl"></td>
<td class="se-border">
<input class="powders powder-input" type="text" id="boots-powder" name="boots-powder" placeholder="powders"/>
</td>
@ -456,16 +456,16 @@
</tr>
</table>
</div>
<div class="equipment-container" style="width: 23rem;">
<div class="equipment-container" style="width: 19vw;">
<table class="full-border" style="border-collapse: collapse;">
<tr>
<td id="ring1-img-loc" style="border: none; width: 0.1%;">
<img src="media/items/new/generic-ring.png" style="display: flex; width: 2.8em;" class="item-icon">
<img src="media/items/new/generic-ring.png" style="display: flex; width: 2.2vw;" class="item-icon">
</td>
<td style="border: none;">
<table style="font-size: 15px; text-align: center; border-collapse: collapse;">
<tr>
<td id='ring1-health' style="width: 100%;" class="Health se-border"></td>
<td id='ring1-health' style="width: 6vw;" class="Health se-border"></td>
<td class="se-border">
<input class="item-name" list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1" />
<datalist id="ring1-items">
@ -473,9 +473,9 @@
</td>
</tr>
<tr>
<td id='ring1-lv' style="width: 100%;" class="se-border lvl"></td>
<td id='ring1-lv' style="width: 6vw;" class="se-border lvl"></td>
<td class="se-border">
<input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="no" style="text-align: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; width: 13em;">
<input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="no">
</td>
</tr>
</table>
@ -485,12 +485,12 @@
<table class="full-border" style="border-collapse: collapse;">
<tr>
<td id="ring2-img-loc" style="border: none; width: 0.1%;">
<img src="media/items/new/generic-ring.png" style="display: flex; width: 2.8em;" class="item-icon">
<img src="media/items/new/generic-ring.png" style="display: flex; width: 2.2vw;" class="item-icon">
</td>
<td style="border: none;">
<table style="font-size: 15px; text-align: center; border-collapse: collapse;">
<tr>
<td id='ring2-health' style="width: 100%;" class="Health se-border"></td>
<td id='ring2-health' style="width: 6vw;" class="Health se-border"></td>
<td class="se-border">
<input class="item-name" list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2"/>
<datalist id="ring2-items">
@ -498,9 +498,9 @@
</td>
</tr>
<tr>
<td id='ring2-lv' style="width: 100%;" class="se-border lvl"></td>
<td id='ring2-lv' style="width: 6vw;" class="se-border lvl"></td>
<td class="se-border">
<input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="powders" style="text-align: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; width: 13em;">
<input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="powders">
</td>
</tr>
</table>
@ -510,12 +510,12 @@
<table class="full-border" style="border-collapse: collapse;">
<tr>
<td id="bracelet-img-loc" style="border: none; width: 0.1%;">
<img src="media/items/new/generic-bracelet.png" style="display: flex; width: 2.8em;" class="item-icon">
<img src="media/items/new/generic-bracelet.png" style="display: flex; width: 2.2vw;" class="item-icon">
</td>
<td style="border: none;">
<table style="font-size: 15px; text-align: center; border-collapse: collapse;">
<tr>
<td id='bracelet-health' style="width: 100%;" class="Health se-border"> </td>
<td id='bracelet-health' style="width: 6vw;" class="Health se-border"> </td>
<td class="se-border">
<input class="item-name" list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet"/>
<datalist id="bracelet-items">
@ -523,9 +523,9 @@
</td>
</tr>
<tr>
<td id='bracelet-lv' style="width: 100%;" class="se-border lvl"></td>
<td id='bracelet-lv' style="width: 6vw;" class="se-border lvl"></td>
<td class="se-border">
<input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="on" style="text-align: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; width: 13em;">
<input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="on">
</td>
</tr>
</table>
@ -535,12 +535,12 @@
<table class="full-border" style="border-collapse: collapse;">
<tr>
<td id="necklace-img-loc" style="border: none; width: 0.1%;">
<img src="media/items/new/generic-necklace.png" style="display: flex; width: 2.8em;" class="item-icon">
<img src="media/items/new/generic-necklace.png" style="display: flex; width: 2.2vw;" class="item-icon">
</td>
<td style="border: none;">
<table style="font-size: 15px; text-align: center; border-collapse: collapse;">
<tr>
<td id='necklace-health' style="width: 100%;" class="Health se-border"></td>
<td id='necklace-health' style="width: 6vw;" class="Health se-border"></td>
<td class="se-border">
<input class="item-name" list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/>
<datalist id="necklace-items">
@ -548,9 +548,9 @@
</td>
</tr>
<tr>
<td id='necklace-lv' style="width: 100%;" class="se-border lvl"></td>
<td id='necklace-lv' style="width: 6vw;" class="se-border lvl"></td>
<td class="se-border">
<input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="accs" style="text-align: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; width: 13em;">
<input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="accs">
</td>
</tr>
</table>
@ -560,10 +560,10 @@
</div>
</div>
<div class="skp-container">
<table style="width: 46rem; height: 11.15em;" class="full-border">
<table style="width: 100%; height: 100%;" class="full-border">
<tr>
<td class="skp-text" style="text-align: center;">
<p class="eDam" style="font-weight: bold;">✤Strength</p>
<p class="eDam" style="font-weight: bold; font-size: .8vw;">✤Strength</p>
<input type="string" id="str-skp" name="str-skp" value="0" class="skp-input"/>
<div id="str-skp-assign" class="skp-tooltip">
Manually Assigned: 0
@ -575,7 +575,7 @@
</div>
</td>
<td class="skp-text" style="text-align: center;">
<p class="tDam" style="font-weight: bold;">✦Dexterity</p>
<p class="tDam" style="font-weight: bold; font-size: .8vw;">✦Dexterity</p>
<input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-input"/>
<div id="dex-skp-assign" class="skp-tooltip">
Manually Assigned: 0
@ -587,7 +587,7 @@
</div>
</td>
<td class="skp-text" style="text-align: center;">
<p class="wDam" style="font-weight: bold;">❉Intelligence</p>
<p class="wDam" style="font-weight: bold; font-size: .8vw;">❉Intelligence</p>
<input type="string" id="int-skp" name="int-skp" value="0" class="skp-input"/>
<div id="int-skp-assign" class="skp-tooltip">
Manually Assigned: 0
@ -599,7 +599,7 @@
</div>
</td>
<td class="skp-text" style="text-align: center;">
<p class="fDam" style="font-weight: bold;">✹Defense</p>
<p class="fDam" style="font-weight: bold; font-size: .8vw;">✹Defense</p>
<input type="string" id="def-skp" name="def-skp" value="0" class="skp-input"/>
<div id="def-skp-assign" class="skp-tooltip">
Manually Assigned: 0
@ -611,7 +611,7 @@
</div>
</td>
<td class="skp-text" style="text-align: center;">
<p class="aDam" style="font-weight: bold;">❋Agility</p>
<p class="aDam" style="font-weight: bold; font-size: .8vw;">❋Agility</p>
<input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-input"/>
<div id="agi-skp-assign" class="skp-tooltip">
Manually Assigned: 0
@ -623,9 +623,9 @@
</div>
</td>
</tr>
<tr>
<td colspan="5" style="text-align: center; height: 100%;">
<div class="nomargin" id="summary-box"></div>
<tr style="height: 60%;">
<td colspan="5" style="text-align: center;">
<div id="summary-box"></div>
<div id="str-warnings" class="center"></div>
<div id="dex-warnings" class="center"></div>
<div id="int-warnings" class="center"></div>
@ -639,43 +639,43 @@
<div id="column2" class="minimal-stats-container">
<table style="text-align: center; border: 5px solid rgb(45, 45, 45); border-bottom: none;">
<tr>
<td id="basic-stats-btn" class="clickable" style="width: 7em; background-color: rgb(30, 30, 30);">Basic</td>
<td id="off-stats-btn" class="clickable" style="width: 7em; background-color: rgb(45, 45, 45);">Offensive</td>
<td id="def-stats-btn" class="clickable" style="width: 7em; background-color: rgb(45, 45, 45);">Defensive</td>
<td id="basic-stats-btn" class="clickable" style="width: 33%; background-color: rgb(30, 30, 30);">Basic</td>
<td id="off-stats-btn" class="clickable" style="width: 33%; background-color: rgb(45, 45, 45);">Offensive</td>
<td id="def-stats-btn" class="clickable" style="width: 33%; background-color: rgb(45, 45, 45);">Defensive</td>
</tr>
</table>
<div style="display: none; overflow: auto;" id="minimal-offensive-stats" class="minimal-stats-container"></div>
<div style="display: none; overflow: auto;" id="minimal-defensive-stats" class="minimal-stats-container"></div>
<div style="overflow: auto;" id="minimal-stats" class="minimal-stats-container"></div>
</div>
<div id="column3" style="display: inline-flex; vertical-align: top; background-color: rgb(30, 30, 30); width: 20.5em; height: 29.65rem;">
<div id="column3" class="spell-container">
<table style="width: 100%;">
<tr style="height: 6em;">
<tr style="height: 20%;">
<td class="full-border" style="text-align: center; vertical-align: middle;">
<div id="build-melee-statsAvg">melee</div>
</td>
</tr>
<tr style="height: 3em;">
<tr style="height: 10%;">
<td class="full-border" style="text-align: center; vertical-align: middle;">
<div class="center" id="build-poison-stats">poison</div>
</td>
</tr>
<tr style="height: 3.65em;">
<tr style="height: 15%;">
<td class="full-border" style="text-align: center; vertical-align: middle;">
<div id="spell0-infoAvg">spell1</div>
</td>
</tr>
<tr style="height: 3.65em;">
<tr style="height: 15%;">
<td class="full-border" style="text-align: center; vertical-align: middle;">
<div id="spell1-infoAvg">spell2</div>
</td>
</tr>
<tr style="height: 3.65em;">
<tr style="height: 15%;">
<td class="full-border" style="text-align: center; vertical-align: middle;">
<div id="spell2-infoAvg">spell3</div>
</td>
</tr>
<tr style="height: 3.65em;">
<tr style="height: 15%;">
<td class="full-border" style="text-align: center; vertical-align: middle;">
<div id="spell3-infoAvg">spell4</div>
</td>

1
sq2display.js
View file

@ -210,6 +210,7 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
}
if (id === "slots") {
let p_elem = document.createElement("p");
p_elem.classList.add('itemp')
// PROPER POWDER DISPLAYING
let numerals = new Map([[1, "I"], [2, "II"], [3, "III"], [4, "IV"], [5, "V"], [6, "VI"]]);