Customization of the character sheet header
- Use of flexboxes - New division of the components - Logo changed
This commit is contained in:
Ender
@@ -28,11 +28,11 @@
|
||||
<thead class="theader">
|
||||
<tr>
|
||||
<th class="title">{{localize "TYPES.Item.item"}}</th>
|
||||
<th class="title center">{{localize "midgard5.equipped"}}</th>
|
||||
<th class="title center">{{localize "midgard5.item-quantity"}}</th>
|
||||
<th class="title center">{{localize "midgard5.item-value"}}</th>
|
||||
<th class="title"></th>
|
||||
<th class="title"></th>
|
||||
<th class="title center"><img src="/icons/svg/shield.svg" class="table-icon"></th>
|
||||
<th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
|
||||
<th class="title"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -43,11 +43,6 @@
|
||||
<td class="padding">
|
||||
<span class="edit-item">{{item.label}}</span>
|
||||
</td>
|
||||
<td>
|
||||
{{#if item.equipped}}
|
||||
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
|
||||
{{/if}}
|
||||
</td>
|
||||
<td>
|
||||
<i class="fa fa-minus-circle quantity-decrease" style="cursor: pointer"></i>
|
||||
<span>{{item.quantity}}</span>
|
||||
@@ -58,6 +53,11 @@
|
||||
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
|
||||
{{/unless}}
|
||||
</td>
|
||||
<td>
|
||||
{{#if item.equipped}}
|
||||
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
|
||||
{{/if}}
|
||||
</td>
|
||||
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
|
||||
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
|
||||
</tr>
|
||||
@@ -75,10 +75,10 @@
|
||||
<thead class="theader">
|
||||
<tr>
|
||||
<th class="title">{{localize "TYPES.Item.container"}}</th>
|
||||
<th class="title center">{{localize "midgard5.equipped"}}</th>
|
||||
<th class="title center">{{localize "midgard5.item-value"}}</th>
|
||||
<th class="title"></th>
|
||||
<th class="title"></th>
|
||||
<th class="title center"><img src="/icons/svg/shield.svg" class="table-icon"></th>
|
||||
<th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
|
||||
<th class="title"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -89,16 +89,16 @@
|
||||
<td class="padding">
|
||||
<span class="edit-item">{{item.label}}</span>
|
||||
</td>
|
||||
<td>
|
||||
{{#if item.equipped}}
|
||||
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
|
||||
{{/if}}
|
||||
</td>
|
||||
<td style="text-align: start">
|
||||
{{#unless (or (eq item.value 0) (eq item.currency ""))}}
|
||||
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
|
||||
{{/unless}}
|
||||
</td>
|
||||
<td>
|
||||
{{#if item.equipped}}
|
||||
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
|
||||
{{/if}}
|
||||
</td>
|
||||
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
|
||||
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
|
||||
</tr>
|
||||
@@ -114,12 +114,11 @@
|
||||
<thead class="theader">
|
||||
<tr>
|
||||
<th class="title">{{localize "TYPES.Item.item"}}</th>
|
||||
<th class="title center">{{localize "midgard5.equipped"}}</th>
|
||||
<th class="title center">{{localize "TYPES.Item.container"}}</th>
|
||||
<th class="title center">{{localize "midgard5.item-quantity"}}</th>
|
||||
<th class="title center">{{localize "midgard5.item-value"}}</th>
|
||||
<th class="title"></th>
|
||||
<th class="title"></th>
|
||||
<th class="title center"><img src="/icons/svg/shield.svg" class="table-icon"></th>
|
||||
<th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
|
||||
<th class="title"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -131,14 +130,6 @@
|
||||
<td class="padding">
|
||||
<span class="edit-item">{{item.label}}</span>
|
||||
</td>
|
||||
<td>
|
||||
{{#if item.equipped}}
|
||||
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
|
||||
{{/if}}
|
||||
</td>
|
||||
<td>
|
||||
{{localize "TYPES.Item.container"}}
|
||||
</td>
|
||||
<td>
|
||||
<i class="fa fa-minus-circle quantity-decrease" style="cursor: pointer"></i>
|
||||
<span>{{item.quantity}}</span>
|
||||
@@ -149,6 +140,11 @@
|
||||
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
|
||||
{{/unless}}
|
||||
</td>
|
||||
<td>
|
||||
{{#if item.equipped}}
|
||||
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
|
||||
{{/if}}
|
||||
</td>
|
||||
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
|
||||
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
|
||||
</tr>
|
||||
|
||||
@@ -1,101 +1,116 @@
|
||||
<form class="actor-sheet {{cssClass}}" autocomplete="off">
|
||||
<header class="sheet-header">
|
||||
<table style="padding: 5px;">
|
||||
<tr height = 5px></tr>
|
||||
<tr>
|
||||
<td style="text-align: left;" colspan="4" rowspan="2"><img style="border: 0px solid black;" src="/systems/midgard5/assets/icons/logo/midgard.webp" alt="Midgard"></td>
|
||||
<td></td>
|
||||
<td colspan="5" style="font-size: x-large; font-weigh: bold;"><input name="name" type="text" value="{{actor.name}}" data-dtype="String" /></td>
|
||||
<td style="font-size: x-large; font-weigh: bold; text-align: center; text-align-vertical: middle;" ><div style="border: 2px solid black; border-radius: 10px; background-color: white;">{{data.calc.level}}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td colspan="5"><b>Name</b></td>
|
||||
<td style="text-align: center;"><b>Grad</b></td>
|
||||
</tr>
|
||||
<tr height = 10px></tr>
|
||||
<tr>
|
||||
<td rowspan="8" width=128><img style="max-width: 128px; height: 128px; border: 0px solid black;" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" /></td>
|
||||
<td></td>
|
||||
<td colspan="3">
|
||||
<input list="races" type="search" name="data.info.race" value="{{data.info.race}}" />
|
||||
<datalist id="races">
|
||||
<option value="Mensch">
|
||||
<option value="Elf">
|
||||
<option value="Gnom">
|
||||
<option value="Halbling">
|
||||
<option value="Zwerg">
|
||||
</datalist>
|
||||
</td>
|
||||
<td colspan="3"><input name="data.info.class" type="text" value="{{data.info.class}}" data-dtype="String" /></td>
|
||||
<td colspan="3"><b><input name="data.info.occupation" type="text" value="{{data.info.occupation}}" data-dtype="String" /></b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td colspan="3"><b>{{localize "midgard5.race"}}</b></td>
|
||||
<td colspan="3"><b>{{localize "midgard5.class"}}</b></td>
|
||||
<td colspan="3"><b>{{localize "midgard5.occupation"}}</b></td>
|
||||
</tr>
|
||||
<tr height = 10px></tr>
|
||||
<tr>
|
||||
<td style="text-align: right"><b>{{localize "midgard5.actor-lp-short"}}</b></td>
|
||||
<td colspan="9">
|
||||
<div class="health-bar">
|
||||
<input name="data.lp.value" type="text" value="{{data.lp.value}}" data-dtype="Number" />
|
||||
{{#times data.lp.max}}
|
||||
{{#if (lt this ../data.lp.value)}}
|
||||
<div class="lp-bar-item update-lp" data-value="{{this}}"></div>
|
||||
{{else}}
|
||||
<div class="lp-bar-item-empty update-lp" data-value="{{this}}"></div>
|
||||
{{/if}}
|
||||
{{/times}}
|
||||
<input name="data.lp.max" type="text" value="{{data.lp.max}}" data-dtype="Number" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: right"><b>{{localize "midgard5.actor-ap-short"}}</b></td>
|
||||
<td colspan="9">
|
||||
<div class="health-bar">
|
||||
<input name="data.ap.value" type="text" value="{{data.ap.value}}" data-dtype="Number" />
|
||||
{{#times data.ap.max}}
|
||||
{{#if (lt this ../data.ap.value)}}
|
||||
<div class="ap-bar-item update-ap" data-value="{{this}}"></div>
|
||||
{{else}}
|
||||
<div class="ap-bar-item-empty update-ap" data-value="{{this}}"></div>
|
||||
{{/if}}
|
||||
{{/times}}
|
||||
<input name="data.ap.max" type="text" value="{{data.ap.max}}" data-dtype="Number" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height = 10px></tr>
|
||||
<tr>
|
||||
<td class="attribute">{{localize "midgard5.actor-st"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-gs"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-gw"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-ko"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-in"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-zt"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-au"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-pa"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-wk"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-git"}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="st" data-value="{{data.calc.attributes.st.value}}">{{data.calc.attributes.st.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="gs" data-value="{{data.calc.attributes.gs.value}}">{{data.calc.attributes.gs.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="gw" data-value="{{data.calc.attributes.gw.value}}">{{data.calc.attributes.gw.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="ko" data-value="{{data.calc.attributes.ko.value}}">{{data.calc.attributes.ko.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="in" data-value="{{data.calc.attributes.in.value}}">{{data.calc.attributes.in.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="zt" data-value="{{data.calc.attributes.zt.value}}">{{data.calc.attributes.zt.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="au" data-value="{{data.calc.attributes.au.value}}">{{data.calc.attributes.au.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="pa" data-value="{{data.calc.attributes.pa.value}}">{{data.calc.attributes.pa.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="wk" data-value="{{data.calc.attributes.wk.value}}">{{data.calc.attributes.wk.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="git" data-value="{{data.calc.stats.poisonResistance.value}}">{{data.calc.stats.poisonResistance.value}}</td>
|
||||
</tr>
|
||||
<tr height = 5px></tr>
|
||||
</table>
|
||||
<header class="flexbox" style="background-color: beige; padding: 5px; border: 2px solid black;">
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="flexcolumn-5" style="height: 200px;">
|
||||
<img class="profile-img" src="/systems/midgard5/assets/icons/backgrounds/bg1.webp" alt="Midgard">
|
||||
</div>
|
||||
|
||||
<!-- Name, Class, Level, Race, Occupation -->
|
||||
<div class="flexcolumn-2" style="margin:0px 5px 0px 5px;">
|
||||
<table class="bordered">
|
||||
<tr>
|
||||
<td >{{localize "midgard5.actor-name"}}</td>
|
||||
<td colspan="3"><input name="name" type="text" value="{{actor.name}}" data-dtype="String" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td >{{localize "midgard5.class"}}</td>
|
||||
<td><input name="data.info.class" type="text" value="{{data.info.class}}" data-dtype="String" /></td>
|
||||
<td >{{localize "midgard5.level"}}</td>
|
||||
<td>{{data.calc.level}}</td>
|
||||
</table>
|
||||
|
||||
<table style="font-weight: bold;">
|
||||
<tr height = 10px></tr>
|
||||
<tr>
|
||||
<td >
|
||||
<input list="races" type="search" name="data.info.race" value="{{data.info.race}}" />
|
||||
<datalist id="races">
|
||||
<option value="Mensch">
|
||||
<option value="Elf">
|
||||
<option value="Gnom">
|
||||
<option value="Halbling">
|
||||
<option value="Zwerg">
|
||||
</datalist>
|
||||
</td>
|
||||
<td ><input name="data.info.occupation" type="text" value="{{data.info.occupation}}" data-dtype="String" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: center; font-size: small">{{localize "midgard5.race"}}</td>
|
||||
<td style="text-align: center; font-size: small">{{localize "midgard5.occupation"}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td class="attribute">{{localize "midgard5.actor-st"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-gs"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-gw"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-ko"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-in"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-zt"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-au"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-pa"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-wk"}}</td>
|
||||
<td class="attribute">{{localize "midgard5.actor-git"}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="st" data-value="{{data.calc.attributes.st.value}}">{{data.calc.attributes.st.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="gs" data-value="{{data.calc.attributes.gs.value}}">{{data.calc.attributes.gs.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="gw" data-value="{{data.calc.attributes.gw.value}}">{{data.calc.attributes.gw.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="ko" data-value="{{data.calc.attributes.ko.value}}">{{data.calc.attributes.ko.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="in" data-value="{{data.calc.attributes.in.value}}">{{data.calc.attributes.in.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="zt" data-value="{{data.calc.attributes.zt.value}}">{{data.calc.attributes.zt.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="au" data-value="{{data.calc.attributes.au.value}}">{{data.calc.attributes.au.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="pa" data-value="{{data.calc.attributes.pa.value}}">{{data.calc.attributes.pa.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="wk" data-value="{{data.calc.attributes.wk.value}}">{{data.calc.attributes.wk.value}}</td>
|
||||
<td class="attribute-value roll-attribute-button" data-attribute="git" data-value="{{data.calc.stats.poisonResistance.value}}">{{data.calc.stats.poisonResistance.value}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Profilbild -->
|
||||
<div class="flexcolumn-5" style="height: 200px;text-align: center;" >
|
||||
<img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" />
|
||||
</div>
|
||||
|
||||
<!-- LP + AP -->
|
||||
<div class="flexcolumn-1">
|
||||
<table>
|
||||
<tr>
|
||||
<td><b>{{localize "midgard5.actor-lp-short"}}</b></td>
|
||||
<td colspan="9">
|
||||
<div class="health-bar">
|
||||
<input name="data.lp.value" type="text" value="{{data.lp.value}}" data-dtype="Number" />
|
||||
{{#times data.lp.max}}
|
||||
{{#if (lt this ../data.lp.value)}}
|
||||
<div class="lp-bar-item update-lp" data-value="{{this}}"></div>
|
||||
{{else}}
|
||||
<div class="lp-bar-item-empty update-lp" data-value="{{this}}"></div>
|
||||
{{/if}}
|
||||
{{/times}}
|
||||
<input name="data.lp.max" type="text" value="{{data.lp.max}}" data-dtype="Number" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>{{localize "midgard5.actor-ap-short"}}</b></td>
|
||||
<td colspan="9">
|
||||
<div class="health-bar">
|
||||
<input name="data.ap.value" type="text" value="{{data.ap.value}}" data-dtype="Number" />
|
||||
{{#times data.ap.max}}
|
||||
{{#if (lt this ../data.ap.value)}}
|
||||
<div class="ap-bar-item update-ap" data-value="{{this}}"></div>
|
||||
{{else}}
|
||||
<div class="ap-bar-item-empty update-ap" data-value="{{this}}"></div>
|
||||
{{/if}}
|
||||
{{/times}}
|
||||
<input name="data.ap.max" type="text" value="{{data.ap.max}}" data-dtype="Number" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{!-- Character Sheet Navigation --}}
|
||||
|
||||
Reference in New Issue
Block a user