add item type to weapon sheet

css/ds4.css

@@ -271,15 +271,33 @@
 .ds4 header.sheet-header h1.charname {
   height: 50px;
   padding: 0px;
-  margin: 5px 0;
+  margin: 5px 10px 5px 0;
   border-bottom: 0;
   font-family: "Wood Stamp", sans-serif;
+  display: block;
 }
 
 .ds4 header.sheet-header h1.charname input {
   width: 100%;
   height: 100%;
   margin: 0;
+  border: none;
+  background-color: transparent;
+}
+
+.ds4 header.sheet-header h2.item-type {
+  font-family: "Wood Stamp", sans-serif;
+  display: block;
+  height: 50px;
+  padding: 0px;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 0px;
+  flex: 0 0 0;
+  color: #777;
+  border: none;
+  line-height: 50px;
+  margin: 5px 0;
+  text-align: right;
 }
 
 .ds4 .sheet-tabs {
@@ -289,24 +307,21 @@
 }
 
 .ds4 .sheet-body,
-.ds4 .sheet-body .tab,
+.ds4 .sheet-body .tab {
-.ds4 .sheet-body .tab .editor {
   height: 100%;
 }
 
-.ds4 .tox .tox-editor-container {
+.ds4 .basic-properties {
-  background: #fff;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 100%;
+  flex: 0 0 100%;
 }
 
-.ds4 .tox .tox-edit-area {
+.ds4 .basic-properties .basic-property .basic-property-label {
-  padding: 0 8px;
-}
-
-.ds4 .basic-property .basic-property-label {
   font-weight: bold;
 }
 
-.ds4 .basic-property .basic-property-select {
+.ds4 .basic-properties .basic-property .basic-property-select {
   display: block;
   width: 100%;
 }
@@ -402,3 +417,15 @@
   flex: 1;
   width: calc(100% - 2px);
 }
+
+.ds4 .sheet-body .tab .editor {
+  height: 100%;
+}
+
+.ds4 .tox .tox-editor-container {
+  background: #fff;
+}
+
+.ds4 .tox .tox-edit-area {
+  padding: 0 8px;
+}

lang/en.json

@@ -17,5 +17,7 @@
   "DS4.ItemAvailabilityVilage": "Village",
   "DS4.ItemAvailabilityCity": "City",
   "DS4.ItemAvailabilityElves": "Elves",
-  "DS4.ItemAvailabilityDwarves": "Dwarves"
+  "DS4.ItemAvailabilityDwarves": "Dwarves",
+  "DS4.ItemTypeWeapon": "Weapon",
+  "DS4.ItemTypeEquipment": "Equipment"
 }

module/config.js

@@ -30,3 +30,12 @@ DS4.itemAvailabilities = {
   elves: "DS4.ItemAvailabilityElves",
   dwarves: "DS4.ItemAvailabilityDwarves",
 };
+
+/**
+ *  * Define the set of item types
+ * @type {Object}
+ */
+DS4.itemTypes = {
+  weapon: "DS4.ItemTypeWeapon",
+  equipment: "DS4.ItemTypeEquipment",
+};

module/ds4.js

@@ -37,7 +37,7 @@ Hooks.once("init", async function () {
  */
 Hooks.once("setup", function () {
   // Localize CONFIG objects once up-front
-  const toLocalize = ["attackTypes", "itemAvailabilities"];
+  const toLocalize = ["attackTypes", "itemAvailabilities", "itemTypes"];
 
   // Exclude some from sorting where the default order matters
   const noSort = [];

scss/components/_basic_property.scss

@@ -1,3 +1,5 @@
+.basic-properties {
+  flex: 0 0 100%;
   .basic-property {
     .basic-property-label {
       font-weight: bold;
@@ -8,3 +10,4 @@
       width: 100%;
     }
   }
+}

scss/components/_description.scss

@@ -2,7 +2,7 @@
   flex: 0 0 150px;
   margin: 5px 5px 5px 0;
   padding-right: 5px;
-  border-right: 2px groove #eeede0;
+  border-right: 2px groove $c-border-groove;
 
   .side-property {
     margin: 2px 0;
@@ -23,3 +23,17 @@
     }
   }
 }
+
+.sheet-body .tab .editor {
+  height: 100%;
+}
+
+.tox {
+  .tox-editor-container {
+    background: $c-white;
+  }
+
+  .tox-edit-area {
+    padding: 0 8px;
+  }
+}

scss/components/_forms.scss

@@ -26,14 +26,29 @@ header.sheet-header {
   h1.charname {
     height: 50px;
     padding: 0px;
-    margin: $header-top-margin 0;
+    margin: $header-top-margin 10px $header-top-margin 0;
     border-bottom: 0;
     input {
       width: 100%;
       height: 100%;
       margin: 0;
+      border: none;
+      background-color: transparent;
     }
     font-family: $font-heading;
+    display: block;
+  }
+  h2.item-type {
+    font-family: $font-heading;
+    display: block;
+    height: 50px;
+    padding: 0px;
+    flex: 0 0 0;
+    color: $c-light-grey;
+    border: none;
+    line-height: 50px;
+    margin: $header-top-margin 0;
+    text-align: right;
   }
 }
 
@@ -42,17 +57,6 @@ header.sheet-header {
 }
 
 .sheet-body,
-.sheet-body .tab,
+.sheet-body .tab {
-.sheet-body .tab .editor {
   height: 100%;
 }
-
-.tox {
-  .tox-editor-container {
-    background: $c-white;
-  }
-
-  .tox-edit-area {
-    padding: 0 8px;
-  }
-}

scss/components/_tabs.scss

@@ -1,7 +1,7 @@
 nav.tabs {
   height: 40px;
-  border-top: 2px groove #eeede0;
+  border-top: 2px groove $c-border-groove;
-  border-bottom: 2px groove #eeede0;
+  border-bottom: 2px groove $c-border-groove;
 
   .item {
     line-height: 40px;

scss/utils/_colors.scss

@@ -1,2 +1,4 @@
 $c-white: #fff;
 $c-black: #000;
+$c-light-grey:  #777;
+$c-border-groove: #eeede0;

templates/item/weapon-sheet.hbs

@@ -1,9 +1,10 @@
 <form class="{{cssClass}}" autocomplete="off">
     <header class="sheet-header">
         <img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
-        <div class="header-fields">
+        <div class="header-fields flexrow">
             <h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
-            <div class="grid grid-3col">
+            <h2 class="item-type">{{localize (lookup config.itemTypes item.type)}}</h2>
+            <div class="grid grid-3col basic-properties">
                 <div class="basic-property">
                     <label class="basic-property-label">{{localize "DS4.AttackType"}}</label>
                     <select class="basic-property-select" name="data.attackType" data-type="String">