Make attributes flexible.

This commit is contained in:
projectmoon 2021-01-23 14:45:51 +00:00
parent 9e5dea8f57
commit ab58f0b971
1 changed files with 26 additions and 27 deletions

View File

@ -7,7 +7,7 @@
font-family: Liberation Sans, Arial; font-family: Liberation Sans, Arial;
} }
#basicsBox { #basics .flex-container {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} }
@ -40,15 +40,15 @@
margin: 0; margin: 0;
} }
#attributes { #attributes .flex-container {
padding: 4px; display: flex;
border-collapse: collapse; flex-flow: row wrap;
} }
#attributes .attributes-section { #attributes .attributes-section {
border: 1px solid gray; border: 1px solid gray;
border-collapse: collapse; margin-left: -1px;
display: table-cell; margin-top: -1px;
} }
.attribute { .attribute {
@ -58,10 +58,8 @@
} }
.attribute label { .attribute label {
display: inline-block;
float: left;
clear: left;
width: 10em; width: 10em;
display: inline;
text-align: right; text-align: right;
vertical-align: text-bottom; vertical-align: text-bottom;
padding: 8px; padding: 8px;
@ -70,8 +68,7 @@
.attribute input { .attribute input {
max-width: 4em; max-width: 4em;
display: inline-block; display: inline;
float: left;
padding: 8px; padding: 8px;
border: none; border: none;
background-color: lightgray; background-color: lightgray;
@ -175,7 +172,7 @@
<h1>Core Sheet</h1> <h1>Core Sheet</h1>
<div> <div>
<div id="basicInfo"> <div id="basics">
<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}}" />
@ -184,7 +181,7 @@
<h2>Basics</h2> <h2>Basics</h2>
<div>System: {{data_type}}</div> <div>System: {{data_type}}</div>
<div id="basicsBox"> <div class="flex-container">
<div class="basics-row"> <div class="basics-row">
<div class="basics-entry"> <div class="basics-entry">
<label for="gender">Gender:</label> <label for="gender">Gender:</label>
@ -213,6 +210,7 @@
<div id="attributes"> <div id="attributes">
<h2>Attributes</h2> <h2>Attributes</h2>
<div class="flex-container">
<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) }}
@ -231,6 +229,7 @@
{{ macros::attribute(name="Composure", value=sheet.composure) }} {{ macros::attribute(name="Composure", value=sheet.composure) }}
</div> </div>
</div> </div>
</div>
<div id="skills"> <div id="skills">
<h2>Skills</h2> <h2>Skills</h2>