adds styling to overview pane

src/module/data/character.mjs

@@ -1,5 +1,12 @@
 const {
-    SchemaField, NumberField, StringField, EmbeddedDocumentField, DocumentIdField, ArrayField, ForeignDocumentField
+    SchemaField,
+    NumberField,
+    StringField,
+    HTMLField,
+    EmbeddedDocumentField,
+    DocumentIdField,
+    ArrayField,
+    ForeignDocumentField
 } = foundry.data.fields;
 
 export class PlayerCharacterDataModel extends foundry.abstract.TypeDataModel {
@@ -18,8 +25,8 @@ export class PlayerCharacterDataModel extends foundry.abstract.TypeDataModel {
                 geburtstag: new StringField(),
                 alter: new NumberField({required: true, integer: true}),
                 gewicht: new NumberField({required: true, integer: true}),
-                aussehen: new ArrayField(new StringField()),
+                aussehen: new HTMLField(),
-                familie: new ArrayField(new StringField()),
+                familie: new HTMLField(),
                 titel: new StringField(),
                 stand: new StringField(),
             }),

src/module/xml-import/xml-import.mjs

@@ -251,16 +251,14 @@ function mapRawJson(actor, rawJson) {
         held.basis.rasse.aussehen.aussehentext0,
         held.basis.rasse.aussehen.aussehentext1,
         held.basis.rasse.aussehen.aussehentext2,
-        held.basis.rasse.aussehen.aussehentext3,
+        held.basis.rasse.aussehen.aussehentext3].join('\n')
-    ]
     json.meta.familie = [
         held.basis.rasse.aussehen.familietext0,
         held.basis.rasse.aussehen.familietext1,
         held.basis.rasse.aussehen.familietext2,
         held.basis.rasse.aussehen.familietext3,
         held.basis.rasse.aussehen.familietext4,
-        held.basis.rasse.aussehen.familietext5,
+        held.basis.rasse.aussehen.familietext5].join('\n')
-    ]
     json.meta.titel = held.basis.rasse.aussehen.titel
     json.meta.stand = held.basis.rasse.aussehen.stand
     let attributes = held.eigenschaften.eigenschaft

src/style/_character-sheet.scss

@@ -57,6 +57,63 @@
       overflow: auto;
     }
 
+    .tab.overview.active {
+
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      .meta-data {
+        flex: 0;
+
+        columns: 2;
+        gap: 0 16px;
+
+
+        div {
+          break-inside: avoid;
+          padding: 4px 0;
+        }
+
+        .double {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          grid-template-areas: 'label label' 'left right';
+
+          label {
+            grid-area: label;
+          }
+        }
+
+        .editor {
+          background-color: rgba(0, 0, 0, 0.2)
+        }
+
+        & + .meta-data {
+          flex: 1;
+        }
+      }
+
+      .meta-data.html {
+
+        & > div {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+
+          label {
+            flex: 0;
+          }
+
+          .editor {
+            flex: 1;
+          }
+        }
+
+      }
+
+    }
+
     .backpack.active {
       padding: 8px;
       display: grid;

src/templates/actor/actor-character-sheet.hbs

@@ -79,19 +79,52 @@
     {{!-- Sheet Body --}}
     <section class="sheet-body">
         <div class="tab overview" data-group="primary" data-tab="overview">
+
+            <div class="meta-data">
+
                 <div><label>Spezies
-                <input type="text" name="system.meta.spezies.value" value="{{system.meta.spezies}}"/>
+                    <input type="text" name="system.meta.spezies" value="{{system.meta.spezies}}"/>
                 </label>
                 </div>
-            <div><label>Kultur<input type="text" name="system.meta.kultur.value"
+                <div><label for="system.meta.kultur">Kultur</label>
-                                     value="{{system.meta.kultur}}"/></label>
+                    <input type="text" name="system.meta.kultur"
+                           value="{{system.meta.kultur}}"/>
                 </div>
-            <div><label>Profession<input type="text" name="system.meta.profession.value"
+                <div><label for="system.meta.profession">Profession</label>
-                                         value="{{system.meta.profession}}"/></label>
+                    <input type="text" name="system.meta.profession"
+                           value="{{system.meta.profession}}"/>
                 </div>
-            <div><label>Geschlecht<input type="text" name="system.meta.geschlecht.value"
+                <div><label for="system.meta.geschlecht">Geschlecht</label>
-                                         value="{{system.meta.geschlecht}}"/></label>
+                    <input type="text" name="system.meta.geschlecht"
+                           value="{{system.meta.geschlecht}}"/>
                 </div>
+                <div class="double"><label>Sozialstatus</label>
+                    <input type="text" name="system.meta.stand" value="{{system.meta.stand}}"/>
+                    <input type="text" name="system.meta.titel" value="{{system.meta.titel}}"/>
+                </div>
+
+                <div><label for="system.meta.groesse">Größe</label>
+                    <input type="number" name="system.meta.groesse" value="{{system.meta.groesse}}"/>
+                </div>
+                <div><label for="system.meta.gewicht">Gewicht</label>
+                    <input type="number" name="system.meta.gewicht" value="{{system.meta.gewicht}}"/>
+                </div>
+                <div class="double"><label>Alter</label>
+                    <input type="number" name="system.meta.groesse" value="{{system.meta.alter}}"/>
+                    <input type="text" name="system.meta.geburtsdatum" value="{{system.meta.geburtstag}}"/>
+                </div>
+            </div>
+            <div class="meta-data html">
+                <div><label>Aussehen</label>
+                    {{editor system.meta.aussehen target="system.meta.aussehen" button=true owner=owner
+                             editable=editable}}
+                </div>
+                <div><label>Familie</label>
+                    {{editor system.meta.familie target="system.meta.familie" button=true owner=owner
+                             editable=editable}}
+                </div>
+            </div>
+
         </div>
         <div class="tab attributes" data-group="primary" data-tab="attributes">
             <ul>