Layout tweaks

- Changes the "section" class to <section> element
This commit is contained in:
Peter Varaksin 2020-04-29 14:40:55 +03:00
parent 9e4adb8548
commit 5ca3cff551
4 changed files with 30 additions and 30 deletions

View file

@ -29,7 +29,7 @@ $red: red;
padding: 5px;
}
.section {
section {
margin-bottom: 10px;
display: flex;
flex-direction: row;

View file

@ -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;
}

View file

@ -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>

View file

@ -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>