#73 Layout Wiederherstellung im Ausrüstungstab

This commit is contained in:
Ender 2024-02-26 14:41:43 +01:00
parent 881ae94013
commit b7bd39e004
5 changed files with 101 additions and 103 deletions

View File

@ -11,38 +11,41 @@
.flexcolumn { .flexcolumn {
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column;
} }
.flexcolumn-1 { .flexcolumn-1 {
flex: 100%; flex-basis: 100%;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flexcolumn-2 { .flexcolumn-2 {
flex: 50%; flex-basis: 50%;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flexcolumn-3 { .flexcolumn-3 {
flex: 33%; flex-basis: 33%;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flexcolumn-4 { .flexcolumn-4 {
flex: 25%; flex-basis: 25%;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flexcolumn-5 { .flexcolumn-5 {
flex: 20%; flex-basis: 20%;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flexpart { .flexpart {
gap: 0; gap: 0;
padding: 0; padding: 0;
margin: 5px; margin: 2px;
background-color: beige; background-color: beige;
border-collapse: separate;
border-radius: 10px;
border: 2px solid black; border: 2px solid black;
} }
@ -65,10 +68,15 @@
h3 { h3 {
padding: 0.5rem 0.5rem 0.5rem 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.5rem;
margin-top: 0.5rem;
margin-bottom: 0;
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
background-color: dimgray; background-color: #eeede0;
color: white; color: black;
border-collapse: separate;
border: 2px solid black;
border-radius: 10px;
} }
.profile-img { .profile-img {
@ -250,7 +258,8 @@
padding: 1px; padding: 1px;
//align-items: stretch; //align-items: stretch;
input { input,
.max-value {
flex: 0 0 2rem; flex: 0 0 2rem;
text-align: center; text-align: center;
height: 100%; height: 100%;

View File

@ -67,6 +67,12 @@
<td>{{localize "midgard5.movementRange"}}</td> <td>{{localize "midgard5.movementRange"}}</td>
<td><input name="data.movement" type="text" value="{{data.movement}}" data-dtype="Number" /></td> <td><input name="data.movement" type="text" value="{{data.movement}}" data-dtype="Number" /></td>
</tr> </tr>
<tr>
<td>{{localize "midgard5.actor-lp-short"}}</td>
<td><input name="data.lp.max" type="text" value="{{data.lp.max}}" data-dtype="Number" /></td>
<td>{{localize "midgard5.actor-ap-short"}}</td>
<td><input name="data.ap.max" type="text" value="{{data.ap.max}}" data-dtype="Number" /></td>
</tr>
<tr> <tr>
<td>{{localize "midgard5.brawl"}}</td> <td>{{localize "midgard5.brawl"}}</td>
<td class="fixed-value">{{data.calc.stats.brawl.value}}</td> <td class="fixed-value">{{data.calc.stats.brawl.value}}</td>

View File

@ -114,33 +114,7 @@
</div> </div>
</div> </div>
<div class="flexcolumn-3"> <div class="flexcolumn-2">
<div class="flexpart">
<div class="flexpart-header"><img src="icons/magic/time/arrows-circling-pink.webp" class="flexpart-icon">{{localize "midgard5.calculated-values"}}</div>
<table>
<tr height = 10px></tr>
<tr>
<td>{{localize "midgard5.movementRange"}}</td>
<td class="fixed-value">{{data.calc.stats.movement.value}}</td>
<td>&nbsp;</td>
<td class="fixed-value">&nbsp;</td>
</tr>
<td>{{localize "midgard5.defense"}}</td>
<td class="fixed-value">{{data.calc.stats.defense.value}}</td>
<td>{{localize "midgard5.defenseBonus"}}</td>
<td class="fixed-value">{{data.calc.stats.defenseBonus.value}}</td>
</tr>
<tr>
<td>{{localize "midgard5.damageBonus"}}</td>
<td class="fixed-value">{{data.calc.stats.damageBonus.value}}</td>
<td>{{localize "midgard5.attackBonus"}}</td>
<td class="fixed-value">{{data.calc.stats.attackBonus.value}}</td>
</tr>
</table>
</div>
</div>
<div class="flexcolumn-3">
<div class="flexpart"> <div class="flexpart">
<div class="flexpart-header"><img src="icons/skills/melee/shield-block-gray-orange.webp" class="flexpart-icon">{{localize "midgard5.defense"}}</div> <div class="flexpart-header"><img src="icons/skills/melee/shield-block-gray-orange.webp" class="flexpart-icon">{{localize "midgard5.defense"}}</div>
<table> <table>

View File

@ -1,6 +1,6 @@
<h3>{{localize "midgard5.wealthAndContainers"}}</h3>
<div class="flexbox"> <div class="flexbox">
<div class="flexcolumn-2"> <div class="flexcolumn-2">
<div class="flexpart"> <div class="flexpart">
<div class="flexpart-header"><img src="icons/commodities/currency/coins-assorted-mix-copper-silver-gold.webp" class="flexpart-icon">{{localize "midgard5.currency"}}</div> <div class="flexpart-header"><img src="icons/commodities/currency/coins-assorted-mix-copper-silver-gold.webp" class="flexpart-icon">{{localize "midgard5.currency"}}</div>
<table> <table>
@ -29,49 +29,31 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<div class="flexcolumn-2">
<div class="flexpart"> <div class="flexpart">
<div class="flexpart-header"><img src="icons/containers/chest/chest-simple-box-brown.webp" class="flexpart-icon">{{localize "TYPES.Item.container"}}</div> <div class="flexpart-header"><img src="icons/containers/bags/pack-leather-strapped-tan.webp" class="flexpart-icon">Lasten in Kilogramm</div>
<table> <table>
<thead class="theader"> <thead class="theader">
<tr> <tr>
<th class="title">{{localize "TYPES.Item.container"}}</th> <th class="title" style="text-align: center">{{localize "midgard5.load"}}</th>
<th class="title center">{{localize "midgard5.item-value"}}</th> <th class="title" style="text-align: center">{{localize "midgard5.heavy-load"}}</th>
<th class="title center">{{localize "midgard5.item-weight"}}</th> <th class="title" style="text-align: center">{{localize "midgard5.load-max"}}</th>
<th class="title center"><img src="/systems/midgard5/assets/icons/icon/battle-gear.svg" class="table-icon"></th> <th class="title" style="text-align: center">{{localize "midgard5.thrust-load"}}</th>
<th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th> <th class="title" style="text-align: center">{{localize "midgard5.encumbrance"}}</th>
<td><a class="title add-container"><i class="fa-regular fa-plus"></i></a></th>
</tr> </tr>
</thead> </thead>
<tbody> <tfoot>
<tr height = 10px></tr> <tr height = 10px></tr>
{{#each data.calc.gear.containers as |item itemId|}} <tr>
<tr data-item="{{itemId}}"> <td class="fixed-value"><input type="number" name="data.info.load" value="{{data.calc.stats.load}}"></td>
<td class="padding"> <td class="fixed-value"><input type="number" name="data.info.heavyLoad" value="{{data.calc.stats.heavyLoad}}"></td>
<span class="edit-item">{{item.label}}</span> <td class="fixed-value"><input type="number" name="data.info.loadMax" value="{{data.calc.stats.loadMax}}"></td>
</td> <td class="fixed-value"><input type="number" name="data.info.thrustLoad" value="{{data.calc.stats.thrustLoad}}"></td>
<td style="text-align: start"> <td class="fixed-value"><input type="number" name="data.info.encumbrance" value="{{data.calc.stats.encumbrance}}"></td>
{{#unless (or (eq item.value 0) (eq item.currency ""))}} </tr>
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span> </tfoot>
{{/unless}}
</td>
<td style="text-align: start">
{{#unless (or (eq item.weight "") (eq item.equipped?))}}
<span class="spell-process">{{item.weight}} kg</span>
{{/unless}}
</td>
<td class="change-equipped">
{{#if item.equipped}}
<i class="fa-solid fa-circle-check"></i>
{{else}}
<i class="fa-regular fa-circle"></i>
{{/if}}
</td>
<td>{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
<td><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
</tbody>
</table> </table>
</div> </div>
</div> </div>
@ -230,6 +212,53 @@
<label for="data.info.showAllItems" style="font-size: normal; font-weight: normal; font-style: italic; float: right;">{{localize "midgard5.showAll"}}&nbsp;</label> <label for="data.info.showAllItems" style="font-size: normal; font-weight: normal; font-style: italic; float: right;">{{localize "midgard5.showAll"}}&nbsp;</label>
</h3> </h3>
<div class="flexbox"> <div class="flexbox">
<div class="flexcolumn-2">
<div class="flexpart">
<div class="flexpart-header"><img src="icons/containers/chest/chest-simple-box-brown.webp" class="flexpart-icon">{{localize "TYPES.Item.container"}}</div>
<table>
<thead class="theader">
<tr>
<th class="title">{{localize "TYPES.Item.container"}}</th>
<th class="title center">{{localize "midgard5.item-value"}}</th>
<th class="title center">{{localize "midgard5.item-weight"}}</th>
<th class="title center"><img src="/systems/midgard5/assets/icons/icon/battle-gear.svg" class="table-icon"></th>
<th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
<td><a class="title add-container"><i class="fa-regular fa-plus"></i></a></th>
</tr>
</thead>
<tbody>
<tr height = 10px></tr>
{{#each data.calc.gear.containers as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding">
<span class="edit-item">{{item.label}}</span>
</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 style="text-align: start">
{{#unless (or (eq item.weight "") (eq item.equipped?))}}
<span class="spell-process">{{item.weight}} kg</span>
{{/unless}}
</td>
<td class="change-equipped">
{{#if item.equipped}}
<i class="fa-solid fa-circle-check"></i>
{{else}}
<i class="fa-regular fa-circle"></i>
{{/if}}
</td>
<td>{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
<td><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
<div class="flexcolumn-2"> <div class="flexcolumn-2">
<div class="flexpart"> <div class="flexpart">
<div class="flexpart-header"><img src="icons/tools/hand/scale-balances-merchant-brown.webp" class="flexpart-icon">{{localize "midgard5.gear"}}</div> <div class="flexpart-header"><img src="icons/tools/hand/scale-balances-merchant-brown.webp" class="flexpart-icon">{{localize "midgard5.gear"}}</div>
@ -288,7 +317,8 @@
<div class="flexcolumn-2"> <div class="flexcolumn-2">
<div class="flexpart"> <div class="flexpart">
<div class="flexpart-header"><img src="icons/weapons/swords/sword-guard-engraved-worn.webp" class="flexpart-icon">{{localize "midgard5.weapons"}}</div> <div class="flexpart-header">
<img src="icons/weapons/swords/sword-guard-engraved-worn.webp" class="flexpart-icon">{{localize "midgard5.weapons"}}</div>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -302,6 +332,7 @@
</thead> </thead>
<tbody> <tbody>
{{#each data.calc.gear.weapons as |item itemId|}} {{#each data.calc.gear.weapons as |item itemId|}}
{{#if (or ../data.info.showAllItems (eq item.containerId ""))}}
<tr data-item="{{itemId}}"> <tr data-item="{{itemId}}">
<td class="padding edit-item">{{item.label}}</td> <td class="padding edit-item">{{item.label}}</td>
<td style="text-align: start"> <td style="text-align: start">
@ -323,6 +354,7 @@
</td> </td>
<td><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td> <td><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr> </tr>
{{/if}}
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
@ -344,6 +376,7 @@
</thead> </thead>
<tbody> <tbody>
{{#each data.calc.gear.defensiveWeapons as |item itemId|}} {{#each data.calc.gear.defensiveWeapons as |item itemId|}}
{{#if (or ../data.info.showAllItems (eq item.containerId ""))}}
<tr data-item="{{itemId}}"> <tr data-item="{{itemId}}">
<td class="padding edit-item">{{item.label}}</td> <td class="padding edit-item">{{item.label}}</td>
<td style="text-align: start"> <td style="text-align: start">
@ -365,6 +398,7 @@
</td> </td>
<td><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td> <td><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr> </tr>
{{/if}}
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
@ -386,6 +420,7 @@
</thead> </thead>
<tbody> <tbody>
{{#each data.calc.gear.armor as |item itemId|}} {{#each data.calc.gear.armor as |item itemId|}}
{{#if (or ../data.info.showAllItems (eq item.containerId ""))}}
<tr data-item="{{itemId}}"> <tr data-item="{{itemId}}">
<td class="padding edit-item">{{item.label}}</td> <td class="padding edit-item">{{item.label}}</td>
<td style="text-align: start"> <td style="text-align: start">
@ -407,36 +442,10 @@
</td> </td>
<td><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td> <td><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr> </tr>
{{/if}}
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="flexcolumn-2">
<div class="flexpart">
<div class="flexpart-header"><img src="icons/containers/bags/pack-leather-strapped-tan.webp" class="flexpart-icon">Lasten in Kilogramm</div>
<table>
<thead class="theader">
<tr>
<th class="title" style="text-align: center">{{localize "midgard5.load"}}</th>
<th class="title" style="text-align: center">{{localize "midgard5.heavy-load"}}</th>
<th class="title" style="text-align: center">{{localize "midgard5.load-max"}}</th>
<th class="title" style="text-align: center">{{localize "midgard5.thrust-load"}}</th>
<th class="title" style="text-align: center">{{localize "midgard5.encumbrance"}}</th>
</tr>
</thead>
<tfoot>
<tr height = 10px></tr>
<tr>
<td class="fixed-value"><input type="number" name="data.info.load" value="{{data.calc.stats.load}}"></td>
<td class="fixed-value"><input type="number" name="data.info.heavyLoad" value="{{data.calc.stats.heavyLoad}}"></td>
<td class="fixed-value"><input type="number" name="data.info.loadMax" value="{{data.calc.stats.loadMax}}"></td>
<td class="fixed-value"><input type="number" name="data.info.thrustLoad" value="{{data.calc.stats.thrustLoad}}"></td>
<td class="fixed-value"><input type="number" name="data.info.encumbrance" value="{{data.calc.stats.encumbrance}}"></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div> </div>

View File

@ -89,7 +89,7 @@
<div class="lp-bar-item-empty update-lp" data-value="{{this}}"></div> <div class="lp-bar-item-empty update-lp" data-value="{{this}}"></div>
{{/if}} {{/if}}
{{/times}} {{/times}}
<input name="data.lp.max" type="text" value="{{data.lp.max}}" data-dtype="Number" /> <div class="max-value">{{data.lp.max}}</div>
</div> </div>
</td> </td>
</tr> </tr>
@ -105,7 +105,7 @@
<div class="ap-bar-item-empty update-ap" data-value="{{this}}"></div> <div class="ap-bar-item-empty update-ap" data-value="{{this}}"></div>
{{/if}} {{/if}}
{{/times}} {{/times}}
<input name="data.ap.max" type="text" value="{{data.ap.max}}" data-dtype="Number" /> <div class="max-value">{{data.ap.max}}</div>
</div> </div>
</td> </td>
</tr> </tr>