Make basic info look better.

This commit is contained in:
projectmoon 2021-01-23 14:38:36 +00:00
parent f9ef83cb21
commit 9e5dea8f57
1 changed files with 59 additions and 16 deletions

View File

@ -7,6 +7,39 @@
font-family: Liberation Sans, Arial; font-family: Liberation Sans, Arial;
} }
#basicsBox {
display: flex;
flex-flow: row wrap;
}
.basics-row {
display: block;
}
.basics-entry {
display: flex;
border: 1px solid gray;
margin-left: -1px;
margin-top: -1px;
}
.basics-entry label {
display: inline;
width: 5em;
text-align: right;
vertical-align: text-bottom;
padding: 8px;
margin: 0;
}
.basics-entry input {
display: inline;
padding: 8px;
border: none;
background-color: lightgray;
margin: 0;
}
#attributes { #attributes {
padding: 4px; padding: 4px;
border-collapse: collapse; border-collapse: collapse;
@ -144,33 +177,42 @@
<div> <div>
<div id="basicInfo"> <div id="basicInfo">
<h1> <h1>
<label for="characterName">Name:</label> <label for="characterName">Name</label>
<input type="text" id="characterName" name="characterName" value="{{name}}" /> <input type="text" id="characterName" name="characterName" value="{{name}}" />
</h1> </h1>
<h2>Basics</h2>
<div>System: {{data_type}}</div> <div>System: {{data_type}}</div>
<div> <div id="basicsBox">
<div class="basics-row">
<div class="basics-entry">
<label for="gender">Gender:</label> <label for="gender">Gender:</label>
<input type="text" id="gender" name="gender" value="{{sheet.gender}}" /> <input type="text" id="gender" name="gender" value="{{sheet.gender}}" />
</div> </div>
<div> <div class="basics-entry">
<label for="age">Age:</label> <label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" value="{{sheet.age}}" /> <input type="number" id="age" name="age" min="0" value="{{sheet.age}}" />
</div> </div>
</div>
<div> <div class="basics-row">
<div class="basics-entry">
<label for="concept">Concept:</label> <label for="concept">Concept:</label>
<input type="text" id="concept" name="concept" value="{{sheet.concept}}" /> <input type="text" id="concept" name="concept" value="{{sheet.concept}}" />
</div> </div>
<div> <div class="basics-entry">
<label for="chronicle">Chronicle:</label> <label for="chronicle">Chronicle:</label>
<input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" /> <input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" />
</div> </div>
</div> </div>
</div>
</div>
<div id="attributes"> <div id="attributes">
<h2>Attributes</h2>
<div class="attributes-section" id="mentalAttributes"> <div class="attributes-section" id="mentalAttributes">
{{ macros::attribute(name="Intelligence", value=sheet.intelligence) }} {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
{{ macros::attribute(name="Wits", value=sheet.wits) }} {{ macros::attribute(name="Wits", value=sheet.wits) }}
@ -191,6 +233,7 @@
</div> </div>
<div id="skills"> <div id="skills">
<h2>Skills</h2>
<div class="skills-section" id="mentalSkills"> <div class="skills-section" id="mentalSkills">
{% for skill_name, skill in sheet.mentalSkills %} {% for skill_name, skill in sheet.mentalSkills %}
{{ macros::skill(name=skill_name, value=skill.dots) }} {{ macros::skill(name=skill_name, value=skill.dots) }}