Customization of the character sheet header

- Use of flexboxes
- New division of the components
- Logo changed

lang/de.json

@@ -80,7 +80,9 @@
 	"midgard5.effects": "Aktive Effekte",
 	"midgard5.kampfkuenste": "Kampfkünste",
 
-	"midgard5.class": "Klasse",
+	"midgard5.actor-name": "Figur",
+	"midgard5.level": "Grad",
+	"midgard5.class": "Typ",
 	"midgard5.race": "Rasse",
 	"midgard5.magicUsing": "Zauberkundig",
 	"midgard5.gender": "Geschlecht",

source/module/sheets/M5CharacterSheet.ts

@@ -8,7 +8,7 @@ export default class M5CharacterSheet extends ActorSheet {
 	static get defaultOptions() {
 		return mergeObject(super.defaultOptions, {
 			template: "systems/midgard5/templates/sheets/character/main.hbs",
-			width: 1200,
+			width: 1000,
 			height: 800,
 			classes: ["midgard5", "sheet", "character"],
 			tabs: [{ navSelector: ".sheet-navigation", contentSelector: ".sheet-content", initial: "base_values" }],

source/style/Character-sheet.less

@@ -9,8 +9,28 @@
 		flex-wrap: wrap
 	}
 
+	.flexcolumn {
+		flex-wrap: wrap;
+	}
+
+	.flexcolumn-1{
+		flex: 100%;
+		flex-wrap: wrap;
+	}
+
 	.flexcolumn-2 {
 		flex: 50%;
+		flex-wrap: wrap;
+	}
+
+	.flexcolumn-4 {
+		flex: 25%;
+		flex-wrap: wrap;
+	}
+
+	.flexcolumn-5 {
+		flex: 20%;
+		flex-wrap: wrap;
 	}
 
 	.flexpart {
@@ -46,6 +66,15 @@
 		color: white;
 	}
 
+	.profile-img {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		height: 100%;
+		width: auto;
+		border: 0px solid black;
+	}
+
 	.sheet.character {
 		form {
 			display: flex;
@@ -62,12 +91,6 @@
 			}
 		}
 
-		.profile-img {
-			max-width: 128px;
-			height: 128px;
-			border: 0px solid black;
-		}
-
 		.description {
 			flex: 0 0 100%;
 			margin: 0;
@@ -100,6 +123,13 @@
 	table {
 		background-color: beige;
 		border: 0px solid transparent;
+		&.bordered{
+			border-collapse: separate;
+			border: 2px solid black;
+			border-radius: 10px;
+			font-size: larger;
+			font-weight: bolder;
+		} 	
 	}
 
 	td,
@@ -146,6 +176,10 @@
 		border: 0px solid transparent;
 	}
 
+	input {
+		border: 0px solid black;
+	}
+
 	input.skill {
 		width: 5rem;
 	}

templates/sheets/character/gear.hbs

@@ -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 center"><img src="/icons/svg/shield.svg" class="table-icon"></th>
-						<th class="title"></th>
+						<th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
+						<th class="title">&nbsp;</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 center"><img src="/icons/svg/shield.svg" class="table-icon"></th>
-						<th class="title"></th>
+						<th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
+						<th class="title">&nbsp;</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 center"><img src="/icons/svg/shield.svg" class="table-icon"></th>
-						<th class="title"></th>
+						<th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
+						<th class="title">&nbsp;</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>

templates/sheets/character/main.hbs

@@ -1,23 +1,29 @@
 <form class="actor-sheet {{cssClass}}" autocomplete="off">
-	<header class="sheet-header">
+	<header class="flexbox" style="background-color: beige; padding: 5px; border: 2px solid black;">
-		<table style="padding: 5px;">
+
-			<tr height = 5px></tr>
+		<!-- 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 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 >{{localize "midgard5.actor-name"}}</td>
-				<td></td>
+					<td colspan="3"><input name="name" type="text" value="{{actor.name}}" data-dtype="String"  /></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 >{{localize "midgard5.class"}}</td>
-				<td colspan="5"><b>Name</b></td>
+					<td><input name="data.info.class" type="text" value="{{data.info.class}}" data-dtype="String" /></td>
-				<td style="text-align: center;"><b>Grad</b></td>		
+					<td >{{localize "midgard5.level"}}</td>
-			</tr>
+					<td>{{data.calc.level}}</td>
+			</table>
+
+			<table style="font-weight: bold;">
 				<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>
-				<td colspan="3">
 						<input list="races" type="search" name="data.info.race" value="{{data.info.race}}" />
 						<datalist id="races">
 							<option value="Mensch">
@@ -27,49 +33,15 @@
 							<option value="Zwerg">
 						</datalist>
 					</td>
-				<td colspan="3"><input name="data.info.class" type="text" value="{{data.info.class}}" data-dtype="String" /></td>
+					<td ><input name="data.info.occupation" type="text" value="{{data.info.occupation}}" 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 style="text-align: center; font-size: small">{{localize "midgard5.race"}}</td>
-				<td colspan="3"><b>{{localize "midgard5.race"}}</b></td>
+					<td style="text-align: center; font-size: small">{{localize "midgard5.occupation"}}</td>
-				<td colspan="3"><b>{{localize "midgard5.class"}}</b></td>
-				<td colspan="3"><b>{{localize "midgard5.occupation"}}</b></td>
 				</tr>
-			<tr height = 10px></tr>
+			</table>
-			<tr>
+
-				<td style="text-align: right"><b>{{localize "midgard5.actor-lp-short"}}</b></td>
+			<table style="width: 100%;">
-				<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>
@@ -94,8 +66,51 @@
 					<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>
+		</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 --}}