ENH: Layout

master
U~man 2020-07-11 18:52:01 +02:00
parent 96c1cb023e
commit 6ff7192ba6
8 changed files with 252 additions and 205 deletions

View File

@ -13,6 +13,7 @@
"OSE.Formula": "Formula",
"OSE.SitMod": "Situational Modifier",
"OSE.Modifier": "Modifier",
"OSE.Modifiers": "Modifiers",
"OSE.RollMode": "Roll Mode",
"OSE.RollExample": "e.g. +1d4",

View File

@ -336,7 +336,7 @@ export class OseActorSheetCharacter extends OseActorSheet {
}
});
html.find("button[data-action='modifiers']").click((ev) => {
html.find("a[data-action='modifiers']").click((ev) => {
this._onShowModifiers(ev);
});

View File

@ -111,13 +111,16 @@
.sheet-body {
padding: 5px 0;
height: calc(100% - 140px);
.tab {
height: 100%;
}
.attributes {
list-style: none;
margin: 0;
padding: 0;
justify-content: space-evenly;
.attribute {
position: relative;
margin: 8px;
border: 1px solid $colorTan;
box-shadow: 0 0 2px $colorTan;
.attribute-name {
@ -128,9 +131,6 @@
background: $darkBackground;
text-align: center;
}
&.attribute-secondaries {
margin: 10px 5px;
}
&.ability-score {
height: 40px;
.attribute-value {
@ -145,31 +145,15 @@
line-height: 24px;
}
}
.attribute-mod {
position: absolute;
color: $colorFaint;
text-shadow: 0 0 2px black;
right: 1px;
top: 1px;
line-height: 10px;
font-size: 8px;
}
.attribute-bonuses {
display: none;
position: absolute;
background: #222;
padding: 2px;
font-size: 10px;
color: whitesmoke;
width: 100%;
height: 100%;
}
}
}
.attribute-group {
flex: 0 0 105px;
margin: auto 0;
flex: 0 0 88px;
.attributes {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%;
.attribute {
display: flex;
flex-direction: row;

View File

@ -25,6 +25,29 @@
/* Sheet Body */
/* ----------------------------------------- */
.sheet-body {
.tab {
height: 100%;
}
.attributes-tab{
justify-content: space-between;
height: 100%;
}
.resources {
margin: 20px;
display: flex;
justify-content: space-around;
flex-direction: column;
.modifiers-btn {
width: 30px;
}
.attribute {
flex: 0 0 55px;
&.attribute-secondaries {
flex: 0 0 40px;
margin-bottom: 5px
}
}
}
.notes-tab {
.inventory {
.languages {
@ -79,7 +102,6 @@
font-size: 18px;
}
}
margin: 10px 0;
height: 70px;
position: relative;
.health-value {

View File

@ -16,8 +16,25 @@
.editor {
height: 300px;
}
.attributes .attribute.health {
min-width: 75px;
.attributes-tab {
display: flex;
justify-content: space-around;
flex-direction: column;
height: 100%;
.attribute-row {
.attribute-group {
margin: 5px;
}
}
.attributes .attribute {
flex: 0 0 60px;
&.health {
flex: 0 0 85px;
}
&.saving-throw {
flex: 1;
}
}
}
}
.attributes {

View File

@ -32,8 +32,10 @@
<div class="tab" data-group="primary" data-tab="notes">
<div class="inventory">
<div class="item-titles">{{localize "OSE.category.notes"}}</div>
{{editor content=data.details.biography target="data.details.biography"
button=true owner=owner editable=editable}}
<div class="resizable-editor" data-editor-size="320">
{{editor content=data.details.biography target="data.details.biography"
button=true owner=owner editable=editable}}
</div>
</div>
</div>
</section>

View File

@ -1,4 +1,4 @@
<section class="flexrow">
<section class="attributes-tab flexrow">
{{!-- Scores --}}
<div class="attribute-group">
<ul class="attributes">
@ -61,13 +61,13 @@
</div>
</li>
{{/if}}
<li>
<button type="button" data-action="modifiers" title="{{localize 'OSE.Modifiers'}}"><i class="fas fa-book"></i></button>
</li>
</ul>
</div>
{{!-- Resource Tracking --}}
<div class="flex2">
<div class="resources">
<div class="modifiers-btn">
<a data-action="modifiers" title="{{localize 'OSE.Modifiers'}}"><i class="fas fa-book"></i></a>
</div>
<div class="flexrow">
<div class="health">
<input class="health-value health-top" name="data.hp.value" type="text" value="{{data.hp.value}}"

View File

@ -1,182 +1,203 @@
<section class="flexrow">
<ul class="attributes flexrow">
<li class="attribute health">
<h4 class="attribute-name box-title" title="{{localize 'OSE.Health'}}">{{ localize "OSE.HealthShort" }} <a class="hp-roll"><i class="fas fa-dice"></i></a></h4>
<div class="attribute-value flexrow">
<input name="data.hp.value" type="text" value="{{data.hp.value}}" data-dtype="Number" placeholder="0" />
<span class="sep"> / </span>
<input name="data.hp.max" type="text" value="{{data.hp.max}}" data-dtype="Number" placeholder="0" />
</div>
</li>
<li class="attribute hit-dice">
<h4 class="attribute-name box-title" title="{{localize 'OSE.HitDice'}}"><a>{{ localize "OSE.HitDiceShort" }}</a>
</h4>
<div class="attribute-value">
<input name="data.hp.hd" type="text" value="{{data.hp.hd}}" data-dtype="String" />
</div>
</li>
<li class="attribute">
{{#if config.ascendingAC}}
<h4 class="attribute-name box-title" title="{{ localize 'OSE.ArmorClass' }}">
{{ localize "OSE.AscArmorClassShort" }}</h4>
<div class="attribute-value">
<input name="data.aac.value" type="text" value="{{data.aac.value}}" data-dtype="Number" placeholder="10"
data-dtype="Number" />
</div>
{{else}}
<h4 class="attribute-name box-title" title="{{ localize 'OSE.ArmorClass' }}">
{{ localize "OSE.ArmorClassShort" }}</h4>
<div class="attribute-value">
<input name="data.ac.value" type="text" value="{{data.ac.value}}" data-dtype="Number" placeholder="9"
data-dtype="Number" />
</div>
{{/if}}
</li>
<li class="attribute attack">
{{#if config.ascendingAC}}
<h4 class="attribute-name box-title" title="{{localize 'OSE.AB'}}"><a>{{ localize "OSE.ABShort" }}</a></h4>
<div class="attribute-value">
<input name="data.thac0.bba" type="text" value="{{data.thac0.bba}}" placeholder="0"
data-dtype="Number" />
</div>
{{else}}
<h4 class="attribute-name box-title" title="{{localize 'OSE.Thac0'}}"><a>{{ localize "OSE.Thac0" }}</a></h4>
<div class="attribute-value">
<input name="data.thac0.value" type="text" value="{{data.thac0.value}}" placeholder="0"
data-dtype="Number" />
</div>
{{/if}}
</li>
{{#if data.retainer.enabled}}
<li class="attribute">
<h4 class="attribute-name box-title" title="{{ localize 'OSE.Loyalty' }}">{{ localize "OSE.LoyaltyShort" }}
</h4>
<div class="attribute-value">
<input name="data.retainer.loyalty" type="text" value="{{data.retainer.loyalty}}" placeholder="0"
data-dtype="Number" />
</div>
</li>
{{/if}}
<li class="attribute">
<h4 class="attribute-name box-title" title="{{localize 'OSE.Movement'}}">{{ localize "OSE.MovementShort" }}
</h4>
<div class="attribute-value">
<input name="data.movement.base" type="text" value="{{data.movement.base}}" placeholder="0"
data-dtype="Number" />
</div>
</li>
</ul>
</section>
<section class="flexrow attribute-row">
{{!-- Skills and abilities --}}
<div class="flex3 panel inventory abilities">
<div>
<li class="item-titles flexrow panel-title">
<div class="item-name">{{localize 'OSE.panel.abilities'}} & {{localize 'OSE.panel.equipment'}}</div>
<div class="item-controls">
{{#if owner}}
<a class="item-control item-reset" title='{{localize "OSE.items.resetAttacks"}}'><i class="fas fa-sync"></i></a>
<a class="item-control item-create" title='{{localize "OSE.Add"}}' data-type="choice"
data-choices="weapon,ability,armor,item"><i class="fas fa-plus"></i></a>
{{/if}}
<section class="attributes-tab">
<section class="flexrow">
<ul class="attributes flexrow">
<li class="attribute health">
<h4 class="attribute-name box-title" title="{{localize 'OSE.Health'}}">{{ localize "OSE.HealthShort" }}
<a class="hp-roll"><i class="fas fa-dice"></i></a></h4>
<div class="attribute-value flexrow">
<input name="data.hp.value" type="text" value="{{data.hp.value}}" data-dtype="Number"
placeholder="0" />
<span class="sep"> / </span>
<input name="data.hp.max" type="text" value="{{data.hp.max}}" data-dtype="Number" placeholder="0" />
</div>
</li>
<ol class="item-list resizable" data-base-size="240">
{{#each abilities as |item|}}
<li class="item-entry">
<div class="item flexrow" data-item-id="{{item._id}}">
<div class="item-name {{#if item.data.roll}}item-rollable{{/if}} flexrow">
<div class="item-image" style="background-image: url({{item.img}})"></div>
<h4 title="{{item.name}}">
{{item.name~}}
</h4>
</div>
<div class="item-controls">
{{#if ../owner}}
<a class="item-control item-show" title='{{localize "OSE.Show"}}'><i
class="fas fa-eye"></i></a>
<a class="item-control item-edit" title='{{localize "OSE.Edit"}}'><i
class="fas fa-edit"></i></a>
<a class="item-control item-delete" title='{{localize "OSE.Delete"}}'><i
class="fas fa-trash"></i></a>
{{/if}}
</div>
</div>
</li>
{{/each}}
{{#each owned as |section| }}
{{#each section as |item|}}
<li class="item-entry">
<div class="item flexrow" data-item-id="{{item._id}}">
<div class="item-name {{#if (eq item.type 'weapon')}}item-rollable{{/if}} flexrow">
<div class="item-image" style="background-image: url({{item.img}})"></div>
<h4 title="{{item.name}}">
{{item.name~}}
</h4>
</div>
{{#if (eq item.type 'weapon')}}
<div class="field-long counter flexrow">
<input type="text" value="{{item.data.counter.value}}" data-dtype="Number" placeholder="0" data-field="value" title="{{localize 'OSE.items.roundAttacks'}}">
/
<input type="text" value="{{item.data.counter.max}}" data-field="max" data-dtype="Number" placeholder="0" title="{{localize 'OSE.items.roundAttacksMax'}}"></div>
{{/if}}
<div class="item-controls">
{{#if ../../owner}}
<a class="item-control item-edit" title='{{localize "OSE.Edit"}}'><i
class="fas fa-edit"></i></a>
<a class="item-control item-delete" title='{{localize "OSE.Delete"}}'><i
class="fas fa-trash"></i></a>
{{/if}}
</div>
</div>
</li>
{{/each}}
{{/each}}
</ol>
</div>
</div>
{{!-- Saving throws --}}
<div class="attribute-group">
<div class="attacks-description">
<label>{{ localize "OSE.MovementDetails" }}</label>
<input name="data.movement.value" type="text" value="{{data.movement.value}}" data-dtype="String" />
</div>
<ul class="attributes">
<li class="attribute saving-throw" data-save="death">
<h4 class="attribute-name box-title" title="{{ localize 'OSE.saves.death.long' }}">
<a>{{ localize "OSE.saves.death.long" }}</a></h4>
<li class="attribute hit-dice">
<h4 class="attribute-name box-title" title="{{localize 'OSE.HitDice'}}">
<a>{{ localize "OSE.HitDiceShort" }}</a>
</h4>
<div class="attribute-value">
<input name="data.saves.death.value" type="text" value="{{data.saves.death.value}}" placeholder="0"
<input name="data.hp.hd" type="text" value="{{data.hp.hd}}" data-dtype="String" />
</div>
</li>
<li class="attribute">
{{#if config.ascendingAC}}
<h4 class="attribute-name box-title" title="{{ localize 'OSE.ArmorClass' }}">
{{ localize "OSE.AscArmorClassShort" }}</h4>
<div class="attribute-value">
<input name="data.aac.value" type="text" value="{{data.aac.value}}" data-dtype="Number"
placeholder="10" data-dtype="Number" />
</div>
{{else}}
<h4 class="attribute-name box-title" title="{{ localize 'OSE.ArmorClass' }}">
{{ localize "OSE.ArmorClassShort" }}</h4>
<div class="attribute-value">
<input name="data.ac.value" type="text" value="{{data.ac.value}}" data-dtype="Number"
placeholder="9" data-dtype="Number" />
</div>
{{/if}}
</li>
<li class="attribute attack">
{{#if config.ascendingAC}}
<h4 class="attribute-name box-title" title="{{localize 'OSE.AB'}}"><a>{{ localize "OSE.ABShort" }}</a>
</h4>
<div class="attribute-value">
<input name="data.thac0.bba" type="text" value="{{data.thac0.bba}}" placeholder="0"
data-dtype="Number" />
</li>
<li class="attribute saving-throw" data-save="wand">
<h4 class="attribute-name box-title" title="{{ localize 'OSE.saves.wand.long' }}">
<a>{{ localize "OSE.saves.wand.long" }}</a></h4>
</div>
{{else}}
<h4 class="attribute-name box-title" title="{{localize 'OSE.Thac0'}}"><a>{{ localize "OSE.Thac0" }}</a>
</h4>
<div class="attribute-value">
<input name="data.saves.wand.value" type="text" value="{{data.saves.wand.value}}" placeholder="0"
<input name="data.thac0.value" type="text" value="{{data.thac0.value}}" placeholder="0"
data-dtype="Number" />
</div>
{{/if}}
</li>
<li class="attribute saving-throw" data-save="paralysis">
<h4 class="attribute-name box-title" title="{{ localize 'OSE.saves.paralysis.long' }}">
<a>{{ localize "OSE.saves.paralysis.long" }}</a></h4>
{{#if data.retainer.enabled}}
<li class="attribute">
<h4 class="attribute-name box-title" title="{{ localize 'OSE.Loyalty' }}">
{{ localize "OSE.LoyaltyShort" }}
</h4>
<div class="attribute-value">
<input name="data.saves.paralysis.value" type="text" value="{{data.saves.paralysis.value}}"
placeholder="0" data-dtype="Number" />
<input name="data.retainer.loyalty" type="text" value="{{data.retainer.loyalty}}" placeholder="0"
data-dtype="Number" />
</div>
</li>
<li class="attribute saving-throw" data-save="breath">
<h4 class="attribute-name box-title" title="{{ localize 'OSE.saves.breath.long' }}">
<a>{{ localize "OSE.saves.breath.long" }}</a></h4>
{{/if}}
<li class="attribute">
<h4 class="attribute-name box-title" title="{{localize 'OSE.Movement'}}">
{{ localize "OSE.MovementShort" }}
</h4>
<div class="attribute-value">
<input name="data.saves.breath.value" type="text" value="{{data.saves.breath.value}}"
placeholder="0" data-dtype="Number" />
</li>
<li class="attribute saving-throw" data-save="spell">
<h4 class="attribute-name box-title" title="{{ localize 'OSE.saves.spell.long' }}">
<a>{{ localize "OSE.saves.spell.long" }}</a></h4>
<div class="attribute-value">
<input name="data.saves.spell.value" type="text" value="{{data.saves.spell.value}}"
placeholder="0" />
<input name="data.movement.base" type="text" value="{{data.movement.base}}" placeholder="0"
data-dtype="Number" />
</div>
</li>
</ul>
</div>
</section>
<section class="flexrow attribute-row">
{{!-- Skills and abilities --}}
<div class="flex3 panel inventory abilities">
<div>
<li class="item-titles flexrow panel-title">
<div class="item-name">{{localize 'OSE.panel.abilities'}} & {{localize 'OSE.panel.equipment'}}</div>
<div class="item-controls">
{{#if owner}}
<a class="item-control item-reset" title='{{localize "OSE.items.resetAttacks"}}'><i
class="fas fa-sync"></i></a>
<a class="item-control item-create" title='{{localize "OSE.Add"}}' data-type="choice"
data-choices="weapon,ability,armor,item"><i class="fas fa-plus"></i></a>
{{/if}}
</div>
</li>
<ol class="item-list resizable" data-base-size="240">
{{#each abilities as |item|}}
<li class="item-entry">
<div class="item flexrow" data-item-id="{{item._id}}">
<div class="item-name {{#if item.data.roll}}item-rollable{{/if}} flexrow">
<div class="item-image" style="background-image: url({{item.img}})"></div>
<h4 title="{{item.name}}">
{{item.name~}}
</h4>
</div>
<div class="item-controls">
{{#if ../owner}}
<a class="item-control item-show" title='{{localize "OSE.Show"}}'><i
class="fas fa-eye"></i></a>
<a class="item-control item-edit" title='{{localize "OSE.Edit"}}'><i
class="fas fa-edit"></i></a>
<a class="item-control item-delete" title='{{localize "OSE.Delete"}}'><i
class="fas fa-trash"></i></a>
{{/if}}
</div>
</div>
</li>
{{/each}}
{{#each owned as |section| }}
{{#each section as |item|}}
<li class="item-entry">
<div class="item flexrow" data-item-id="{{item._id}}">
<div class="item-name {{#if (eq item.type 'weapon')}}item-rollable{{/if}} flexrow">
<div class="item-image" style="background-image: url({{item.img}})"></div>
<h4 title="{{item.name}}">
{{item.name~}}
</h4>
</div>
{{#if (eq item.type 'weapon')}}
<div class="field-long counter flexrow">
<input type="text" value="{{item.data.counter.value}}" data-dtype="Number"
placeholder="0" data-field="value" title="{{localize 'OSE.items.roundAttacks'}}">
/
<input type="text" value="{{item.data.counter.max}}" data-field="max"
data-dtype="Number" placeholder="0"
title="{{localize 'OSE.items.roundAttacksMax'}}"></div>
{{/if}}
<div class="item-controls">
{{#if ../../owner}}
<a class="item-control item-edit" title='{{localize "OSE.Edit"}}'><i
class="fas fa-edit"></i></a>
<a class="item-control item-delete" title='{{localize "OSE.Delete"}}'><i
class="fas fa-trash"></i></a>
{{/if}}
</div>
</div>
</li>
{{/each}}
{{/each}}
</ol>
</div>
</div>
{{!-- Saving throws --}}
<div class="attribute-group">
<ul class="attributes">
<li class="attacks-description">
<label>{{ localize "OSE.MovementDetails" }}</label>
<input name="data.movement.value" type="text" value="{{data.movement.value}}" data-dtype="String" />
</li>
<li class="attribute saving-throw" data-save="death">
<h4 class="attribute-name box-title">
<a>{{ localize "OSE.saves.death.long" }}</a></h4>
<div class="attribute-value">
<input name="data.saves.death.value" type="text" value="{{data.saves.death.value}}"
placeholder="0" data-dtype="Number" />
</li>
<li class="attribute saving-throw" data-save="wand">
<h4 class="attribute-name box-title">
<a>{{ localize "OSE.saves.wand.long" }}</a></h4>
<div class="attribute-value">
<input name="data.saves.wand.value" type="text" value="{{data.saves.wand.value}}"
placeholder="0" data-dtype="Number" />
</li>
<li class="attribute saving-throw" data-save="paralysis">
<h4 class="attribute-name box-title">
<a>{{ localize "OSE.saves.paralysis.long" }}</a></h4>
<div class="attribute-value">
<input name="data.saves.paralysis.value" type="text" value="{{data.saves.paralysis.value}}"
placeholder="0" data-dtype="Number" />
</li>
<li class="attribute saving-throw" data-save="breath">
<h4 class="attribute-name box-title">
<a>{{ localize "OSE.saves.breath.long" }}</a></h4>
<div class="attribute-value">
<input name="data.saves.breath.value" type="text" value="{{data.saves.breath.value}}"
placeholder="0" data-dtype="Number" />
</li>
<li class="attribute saving-throw" data-save="spell">
<h4 class="attribute-name box-title">
<a>{{ localize "OSE.saves.spell.long" }}</a></h4>
<div class="attribute-value">
<input name="data.saves.spell.value" type="text" value="{{data.saves.spell.value}}"
placeholder="0" />
</li>
<li class="attribute saving-throw">
<h4 class="attribute-name box-title" title="{{ localize 'OSE.saves.magic.long' }}">
{{ localize "OSE.saves.magic.long"}}</h4>
<div class="attribute-value flat"
title="{{localize 'OSE.scores.wis.long'}}({{data.scores.wis.mod}})">
{{data.scores.wis.mod}}
</div>
</li>
</ul>
</div>
</section>
</section>