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> </nav>
</header> </header>
<main> <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;"> <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
View File

@ -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;
@ -147,4 +155,8 @@ h1 {
font: inherit; font: inherit;
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
View File

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