fix some styling
This commit is contained in:
parent
5325518dec
commit
7ea0d2f4d1
10
index.html
10
index.html
@ -19,7 +19,11 @@
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="w3-large w3-bar flex hidden"><a class="w3-bar-item w3-mobile w3-button">♥</a></div>
|
||||
<div class="w3-large w3-bar flex hidden">
|
||||
<a class="w3-bar-item w3-mobile w3-button">♥</a>
|
||||
<a class="w3-bar-item w3-mobile w3-button">♥</a>
|
||||
<a class="w3-bar-item w3-mobile w3-button">♥</a>
|
||||
</div>
|
||||
<form id="character-data" style="display: contents;">
|
||||
<div class="page w3-container w3-card-4 w3-padding-16">
|
||||
<h1 class="w3-center">Songs of the Second Age: Character Sheet</h1>
|
||||
@ -77,7 +81,7 @@
|
||||
</div>
|
||||
<div class="page w3-container w3-card-4 w3-padding-16">
|
||||
<h2 class="w3-center">Character Features</h2>
|
||||
<section class="grid" id="features" style="grid-template-columns: auto auto 1fr; column-gap: 20px; padding: 0px 16px;"></section>
|
||||
<section class="mobile grid" id="features" style="grid-template-columns: auto auto 1fr; column-gap: 20px; padding: 0px 16px;"></section>
|
||||
</div>
|
||||
<div class="page w3-container w3-card-4 w3-padding-16" style="padding-left: 32px; padding-right: 32px;">
|
||||
<h2 class="w3-center">Character Inventory</h2>
|
||||
@ -161,7 +165,7 @@
|
||||
<output class="w3-center" id="spellcasting-dc"></output>
|
||||
</div>
|
||||
</section>
|
||||
<section id="spellcasting-spells" class="grid mobile" style="grid-template-columns: auto 1fr;">
|
||||
<section id="spellcasting-spells" class="grid" style="grid-template-columns: auto 1fr;">
|
||||
<p>Prep</p>
|
||||
<p>Spell Name & Description</p>
|
||||
</section>
|
||||
|
12
sheet.css
12
sheet.css
@ -102,6 +102,7 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
||||
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
min-width: 2ch;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
@ -130,6 +131,13 @@ h1 {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grow-wrap {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.grow-wrap::after {
|
||||
content: attr(data-replicated-value) " ";
|
||||
white-space: pre-wrap;
|
||||
@ -148,3 +156,7 @@ h1 {
|
||||
background-color: var(--page-color);
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
|
||||
output {
|
||||
min-width: 4ch;
|
||||
}
|
10
songs.js
10
songs.js
@ -70,8 +70,8 @@ function buildFeatures (container) {
|
||||
for (let i in features) {
|
||||
let feature = features[i];
|
||||
area.innerHTML += `
|
||||
<p>${feature.name}</p>
|
||||
<p>${feature.level}</p>
|
||||
<p class="w3-hide-small">${feature.name}</p>
|
||||
<p class="w3-hide-small">${feature.level}</p>
|
||||
<div class="grow-wrap">
|
||||
<textarea id="features-${i}" name="features-${i}" placeholder="Feature Name & Description" onInput="this.parentNode.dataset.replicatedValue = this.value" rows="1"></textarea>
|
||||
</div>
|
||||
@ -110,8 +110,8 @@ function calculateSpellCasting () {
|
||||
let mb = Number(document.querySelector("#spellcasting-mb").checked);
|
||||
let mastery = Number(document.querySelector("#mastery").value);
|
||||
let modifier = baseVal + training + (mb * mastery);
|
||||
document.querySelector("#spellcasting-modifier").innerText = ` = ${modifier}`;
|
||||
document.querySelector("#spellcasting-dc").innerText = ` = ${8 + modifier}`;
|
||||
document.querySelector("#spellcasting-modifier").innerHTML = `= ${modifier}`;
|
||||
document.querySelector("#spellcasting-dc").innerHTML = `= ${8 + modifier}`;
|
||||
}
|
||||
|
||||
function setModifierVal (category, name, value) {
|
||||
@ -125,5 +125,5 @@ function setModifierVal (category, name, value) {
|
||||
e.training = Number(document.querySelector(`#${category}-${name}-training`).value);
|
||||
e.mb = Number(document.querySelector(`#${category}-${name}-mb`).checked);
|
||||
e.mastery = Number(document.querySelector("#mastery").value);
|
||||
document.querySelector(`#${category}-${name}-result`).innerText = ` = ${value(e)}`;
|
||||
document.querySelector(`#${category}-${name}-result`).innerHTML = `= ${value(e)}`;
|
||||
}
|
Loading…
Reference in New Issue
Block a user