Layout tweaks
- Changes the "section" class to <section> element
This commit is contained in:
parent
9e4adb8548
commit
5ca3cff551
4 changed files with 30 additions and 30 deletions
|
@ -29,7 +29,7 @@ $red: red;
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
.section {
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
@ -40,25 +40,25 @@
|
|||
* td {
|
||||
padding: 5px;
|
||||
}
|
||||
* .section {
|
||||
* section {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
* .section > * {
|
||||
* section > * {
|
||||
margin-right: 10px;
|
||||
}
|
||||
* .section > *:last-child {
|
||||
* section > *:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
* .section .grow-one {
|
||||
* section .grow-one {
|
||||
flex-grow: 1;
|
||||
}
|
||||
* .section .grow-two {
|
||||
* section .grow-two {
|
||||
flex-grow: 2;
|
||||
}
|
||||
* .section.experience {
|
||||
* section.experience {
|
||||
margin-bottom: 0px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<form class="{{cssClass}} actor-sheet" autocomplete="off">
|
||||
|
||||
<div id="name-alias" class="section">
|
||||
<section id="name-alias">
|
||||
|
||||
<div class="grow-two">
|
||||
<div id="name">
|
||||
|
@ -75,11 +75,11 @@
|
|||
{{> "systems/blades-in-the-dark/templates/parts/coins.html"}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{!-- Experience --}}
|
||||
<div class="section experience">
|
||||
</div>
|
||||
<section class="experience">
|
||||
</section>
|
||||
{{!-- Stress and Trauma --}}
|
||||
<div id="stress-trauma" class="section big-teeth-section">
|
||||
<div id="character-stress" class="big-teeth">
|
||||
|
@ -166,7 +166,7 @@
|
|||
</div>
|
||||
|
||||
{{!-- Harm, Healing and Armor --}}
|
||||
<div id="harm-armor" class="section">
|
||||
<section id="harm-armor">
|
||||
<div id="character-harm">
|
||||
<table>
|
||||
<thead>
|
||||
|
@ -234,10 +234,10 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{!-- Attributes --}}
|
||||
<div class="section">
|
||||
<section>
|
||||
|
||||
<div class="flex-vertical grow-two">
|
||||
<div id="abilities" class="flex-vertical">
|
||||
|
@ -307,6 +307,6 @@
|
|||
|
||||
{{!-- Attributes --}}
|
||||
{{> "systems/blades-in-the-dark/templates/parts/attributes.html"}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</form>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<form class="{{cssClass}} actor-sheet" autocomplete="off">
|
||||
|
||||
<div class="section">
|
||||
<section>
|
||||
|
||||
<div id="name-alias" class="grow-two flex-column">
|
||||
<div id="name">
|
||||
|
@ -68,10 +68,10 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<section>
|
||||
<div id="crew-reputation">
|
||||
{{#multiboxes data.reputation}}
|
||||
{{#repturf data.turfs_amount}}
|
||||
|
@ -194,9 +194,9 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="section">
|
||||
<section>
|
||||
|
||||
<div class="flex-vertical">
|
||||
|
||||
|
@ -208,9 +208,9 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
<nav class="tabs flex-horizontal">
|
||||
<a class="item" data-tab="turfs">Turfs</a>
|
||||
<a class="item" data-tab="upgrades">Upgrades</a>
|
||||
<a class="item" data-tab="abilities">Abilities</a>
|
||||
<a class="item" data-tab="tab1">Turfs</a>
|
||||
<a class="item" data-tab="tab2">Upgrades</a>
|
||||
<a class="item" data-tab="tab3">Abilities</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
@ -238,10 +238,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{!-- Crew Type --}}
|
||||
<div class="section tab-content" data-tab="turfs">
|
||||
<section class="tab-content" data-tab="tab1">
|
||||
{{#each actor.items as |item id|}}
|
||||
{{#eq item.type "crew_type"}}
|
||||
<div class="item" data-item-id="{{item._id}}">
|
||||
|
@ -249,9 +249,9 @@
|
|||
</div>
|
||||
{{/eq}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="section tab-content" data-tab="upgrades">
|
||||
<section class="tab-content" data-tab="tab2">
|
||||
|
||||
{{!-- Crew Upgrades --}}
|
||||
<div id="crew-upgrades" class="grow-two flex-vertical">
|
||||
|
@ -271,9 +271,9 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="section tab-content" data-tab="abilities">
|
||||
<section class="tab-content" data-tab="tab3">
|
||||
|
||||
{{!-- Crew Upgrades --}}
|
||||
<div id="crew-abilities" class="grow-two flex-vertical">
|
||||
|
@ -293,6 +293,6 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</form>
|
||||
|
|
Reference in a new issue