projectmoon
/
tenebrous-sheets
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make skill list flexible.

This commit is contained in:
projectmoon 2021-01-23 14:52:02 +00:00
parent ab58f0b971
commit 42ebfa4a54
2 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/scripts/characters/edit.ts
View File

@ -87,7 +87,7 @@ import * as api from "../api";
console.log("got a response back", resp); console.log("got a response back", resp);
} }
const inputs = document.querySelectorAll("#basicInfo input"); const inputs = document.querySelectorAll("#basics input");
inputs.forEach(input => { inputs.forEach(input => {
console.log('got an input', input); console.log('got an input', input);

52
src/frontend/templates/characters/edit_character.html.tera
View File

@ -52,8 +52,6 @@
} }
.attribute { .attribute {
margin: 0;
padding: 0;
display: flex; display: flex;
} }
@ -76,26 +74,25 @@
} }
#skills { #skills {
padding: 4px;
border-collapse: collapse; }
#skills .flex-container {
display: flex;
flex-flow: row wrap;
} }
#skills .skills-section { #skills .skills-section {
border: 1px solid gray; border: 1px solid gray;
border-collapse: collapse; margin-top: -1px;
display: table-cell; margin-left: -1px;
} }
.skill { .skill {
margin: 0;
padding: 0;
display: flex; display: flex;
} }
.skill label { .skill label {
display: inline-block;
float: left;
clear: left;
width: 10em; width: 10em;
text-align: right; text-align: right;
vertical-align: text-bottom; vertical-align: text-bottom;
@ -105,8 +102,6 @@
.skill input { .skill input {
max-width: 4em; max-width: 4em;
display: inline-block;
float: left;
padding: 8px; padding: 8px;
border: none; border: none;
background-color: lightgray; background-color: lightgray;
@ -233,22 +228,25 @@
<div id="skills"> <div id="skills">
<h2>Skills</h2> <h2>Skills</h2>
<div class="skills-section" id="mentalSkills">
{% for skill_name, skill in sheet.mentalSkills %}
{{ macros::skill(name=skill_name, value=skill.dots) }}
{% endfor %}
</div>
<div class="skills-section" id="physicalSkills"> <div class="flex-container">
{% for skill_name, skill in sheet.physicalSkills %} <div class="skills-section" id="mentalSkills">
{{ macros::skill(name=skill_name, value=skill.dots) }} {% for skill_name, skill in sheet.mentalSkills %}
{% endfor %} {{ macros::skill(name=skill_name, value=skill.dots) }}
</div> {% endfor %}
</div>
<div class="skills-section" id="socialSkills"> <div class="skills-section" id="physicalSkills">
{% for skill_name, skill in sheet.socialSkills %} {% for skill_name, skill in sheet.physicalSkills %}
{{ macros::skill(name=skill_name, value=skill.dots) }} {{ macros::skill(name=skill_name, value=skill.dots) }}
{% endfor %} {% endfor %}
</div>
<div class="skills-section" id="socialSkills">
{% for skill_name, skill in sheet.socialSkills %}
{{ macros::skill(name=skill_name, value=skill.dots) }}
{% endfor %}
</div>
</div> </div>
</div> </div>