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