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

Styling changes - make things line up nicer

Browse source
This commit is contained in:
b 2021-01-10 19:58:04 -06:00
parent 1df9848ef9
commit e5e67585e2
3 changed files with 70 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
index.html
View file

@ -15,7 +15,7 @@
Wynn build calculator
</div>
<div class="summary">
<div class="equipment" style="grid-column:1/span 3;grid-row:1">
<div class="equipment" style="grid-column:1;grid-row:1">
<div style="grid-column:1/span 2;grid-row:1">
<table>
<tr>
@ -27,67 +27,119 @@
</th>
</tr>
<tr>
<td class="right">
<td class="left">
<label for="helmet-choice">Helmet:</label>
<input list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/>
<datalist id="helmet-items">
</datalist>
</td>
<td class="right">
<td class="left">
<label id="helmet-slots" for="helmet-powder">X slots</label>
<input type="text" id="helmet-powder" name="helmet-powder" placeholder="Example: t6t6"/>
</td>
</tr>
<tr>
<td class="right">
<td class="left">
<label for="chestplate-choice">Chestplate:</label>
<input list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate" />
<datalist id="chestplate-items">
</datalist>
</td>
<td class="right">
<td class="left">
<label id="chestplate-slots" for="chestplate-powder">X slots</label>
<input type="text" id="chestplate-powder" name="chestplate-powder" />
</td>
</tr>
<tr>
<td class="right">
<td class="left">
<label for="leggings-choice">Leggings:</label>
<input list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" />
<datalist id="leggings-items">
</datalist>
</td>
<td class="right">
<td class="left">
<label id="leggings-slots" for="leggings-powder">X slots</label>
<input type="text" id="leggings-powder" name="leggings-powder" />
</td>
</tr>
<tr>
<td class="right">
<td class="left">
<label for="boots-choice">Boots:</label>
<input list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" />
<datalist id="boots-items">
</datalist>
</td>
<td class="right">
<td class="left">
<label id="boots-slots" for="boots-powder">X slots</label>
<input type="text" id="boots-powder" name="boots-powder" />
</td>
</tr>
<tr>
<td class="right">
<td class="left">
<br>
<label for="weapon-choice">Weapon:</label>
<input list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value=""/>
<datalist id="weapon-items">
</datalist>
</td>
<td class="right">
<td class="left">
<br>
<label id="weapon-slots" for="weapon-powder">X slots</label>
<input type="text" id="weapon-powder" name="weapon-powder" />
</td>
</tr>
</table>
</div>
<div style="grid-column:3/span 1;grid-row:1">
<table>
<tr>
<th class="center title">
<label>Accessories</label>
</th>
</tr>
<tr>
<td class="left">
<label for="ring1-choice">Ring 1:</label>
<input list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1"/>
<datalist id="ring1-items">
</datalist>
</td>
</tr>
<tr>
<td class="left">
<label for="ring2-choice">Ring 2:</label>
<input list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2" />
<datalist id="ring2-items">
</datalist>
</td>
</tr>
<tr>
<td class="left">
<label for="bracelet-choice">Bracelet:</label>
<input list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet" />
<datalist id="bracelet-items">
</datalist>
</td>
</tr>
<tr>
<td class="left">
<label for="necklace-choice">Necklace:</label>
<input list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/>
<datalist id="necklace-items">
</datalist>
</td>
</tr>
<tr>
<td class="left">
<br/>
<label for="level-choice">Level:</label>
<input id="level-choice" name="level-choice" placeholder="106" value=""/>
</td>
</tr>
</table>
</div>
<div class="center" style="grid-column:1/span 3;grid-row:2">
<table>
<tr>
<td>
<br/>
@ -104,68 +156,20 @@
</tr>
</table>
</div>
<div style="grid-column:3/span 1;grid-row:1">
<table>
<tr>
<th class="center title">
<label>Accessories</label>
</th>
</tr>
<tr>
<td class="right">
<label for="ring1-choice">Ring 1:</label>
<input list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1"/>
<datalist id="ring1-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<label for="ring2-choice">Ring 2:</label>
<input list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2" />
<datalist id="ring2-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<label for="bracelet-choice">Bracelet:</label>
<input list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet" />
<datalist id="bracelet-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<label for="necklace-choice">Necklace:</label>
<input list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/>
<datalist id="necklace-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="level-choice">Level:</label>
<input id="level-choice" name="level-choice" placeholder="106" value=""/>
</td>
</tr>
</table>
</div>
<div class="center" style="grid-column:1/span 3;grid-row:2">
<div class="center" style="grid-column:1/span 3;grid-row:3">
<br><br>
<div class="center" id="summary-box">
Summary:
</div>
</div>
</div>
<div class="center" style="grid-column:4">
<div class="center" style="grid-column:2">
<div class = "center build-overall" id = "build-overall">
<br/>
<div class = "center" id = "build-overall-stats"></div>
</div>
</div>
<div class="center" style="grid-column:5;">
<div class="center" style="grid-column:3;">
<div class="spell-info">
<div class="center" id="build-melee-statsAvg">melee</div>
</div>

6
styles.css
View file

@ -19,7 +19,7 @@ th, td {
.summary {
padding: 2% 4% 4%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-columns: 2.5fr 1fr 1fr;
gap: 5px;
grid-auto-rows: minmax(60px, auto);
}
@ -31,9 +31,9 @@ div {
.equipment {
padding: 0%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: min-content min-content min-content;
gap: 5px;
grid-template-rows: min-content auto;
grid-template-rows: min-content min-content auto;
}
.skillpoints {

2
test.js
View file

@ -11,7 +11,7 @@ console.log(url_tag);
* END testing section
*/
const BUILD_VERSION = "5.1";
const BUILD_VERSION = "5.2";
document.getElementById("header").textContent = "Wynn build calculator "+BUILD_VERSION+" (db version "+DB_VERSION+")";