alu/character-sheet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix some styling

Browse Source
This commit is contained in:
Arthur Lu 2023-04-16 22:24:34 -07:00
parent 5325518dec
commit 7ea0d2f4d1
3 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -19,7 +19,11 @@
</nav>
</header>
<main>
<div class="w3-large w3-bar flex hidden"><a class="w3-bar-item w3-mobile w3-button">&hearts;</a></div>
<div class="w3-large w3-bar flex hidden">
<a class="w3-bar-item w3-mobile w3-button">&hearts;</a>
<a class="w3-bar-item w3-mobile w3-button">&hearts;</a>
<a class="w3-bar-item w3-mobile w3-button">&hearts;</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
View File

@ -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
View File

@ -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 = `=&nbsp;${modifier}`;
document.querySelector("#spellcasting-dc").innerHTML = `=&nbsp;${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 = `=&nbsp;${value(e)}`;
}