make basic properties in weapon editable

css/ds4.css

@@ -23,7 +23,6 @@
   grid-column: span 2 / span 2;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
-  margin: 10px 0;
   padding: 0;
 }
 
@@ -233,7 +232,7 @@
   font-family: "Lora", sans-serif;
 }
 
-.ds4 .sheet-header {
+.ds4 header.sheet-header {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 210px;
   flex: 0 0 210px;
@@ -250,24 +249,26 @@
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
-  margin-bottom: 10px;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
 }
 
-.ds4 .sheet-header .profile-img {
+.ds4 header.sheet-header .profile-img {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 100px;
   flex: 0 0 100px;
   height: 100px;
-  margin-right: 10px;
+  margin: 5px 10px 5px 0;
 }
 
-.ds4 .sheet-header .header-fields {
+.ds4 header.sheet-header .header-fields {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.ds4 .sheet-header h1.charname {
+.ds4 header.sheet-header h1.charname {
   height: 50px;
   padding: 0px;
   margin: 5px 0;
@@ -275,7 +276,7 @@
   font-family: "Wood Stamp", sans-serif;
 }
 
-.ds4 .sheet-header h1.charname input {
+.ds4 header.sheet-header h1.charname input {
   width: 100%;
   height: 100%;
   margin: 0;
@@ -301,10 +302,15 @@
   padding: 0 8px;
 }
 
-.ds4 .basic-property-label {
+.ds4 .basic-property .basic-property-label {
   font-weight: bold;
 }
 
+.ds4 .basic-property .basic-property-select {
+  display: block;
+  width: 100%;
+}
+
 .ds4 nav.tabs {
   height: 40px;
   border-top: 2px groove #eeede0;

scss/components/_basic_property.scss

@@ -1,4 +1,10 @@
-.basic-property-label {
-  font-weight: bold;
-  // text-transform: uppercase;
+.basic-property {
+  .basic-property-label {
+    font-weight: bold;
+  }
+
+  .basic-property-select {
+    display: block;
+    width: 100%;
+  }
 }

scss/components/_forms.scss

@@ -2,19 +2,21 @@
   font-family: $font-primary;
 }
 
-.sheet-header {
+$header-top-margin: 5px;
+
+header.sheet-header {
   flex: 0 0 210px;
   overflow: hidden;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
-  margin-bottom: 10px;
+  align-items: flex-start;
 
   .profile-img {
     flex: 0 0 100px;
     height: 100px;
-    margin-right: 10px;
+    margin: $header-top-margin 10px $header-top-margin 0;
   }
 
   .header-fields {
@@ -24,7 +26,7 @@
   h1.charname {
     height: 50px;
     padding: 0px;
-    margin: 5px 0;
+    margin: $header-top-margin 0;
     border-bottom: 0;
     input {
       width: 100%;

scss/global/_grid.scss

@@ -4,7 +4,6 @@
   grid-column: span 2 / span 2;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
-  margin: 10px 0;
   padding: 0;
 }
 

templates/item/weapon-sheet.hbs

@@ -6,15 +6,23 @@
             <div class="grid grid-3col">
                 <div class="basic-property">
                     <label class="basic-property-label">{{localize "DS4.AttackType"}}</label>
-                    <div>{{lookup config.attackTypes data.attackType}}</div>
+                    <select class="basic-property-select" name="data.attackType" data-type="String">
+                        {{#select data.attackType}}
+                        {{#each config.attackTypes as |value key|}}
+                        <option value="{{key}}">{{value}}</option>
+                        {{/each}}
+                        {{/select}}
+                    </select>
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label">{{localize "DS4.WeaponBonus"}}</label>
-                    <div>{{data.weaponBonus}}</div>
+                    <input class="basic-property-input" type="text" name="data.weaponBonus" value="{{data.weaponBonus}}"
+                        placeholder="0" data-dtype="Number" />
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label">{{localize "DS4.OpponentDefense"}}</label>
-                    <div>{{data.opponentDefense}}</div>
+                    <input class="basic-property-input" type="text" name="data.opponentDefense"
+                        value="{{data.opponentDefense}}" placeholder="0" data-dtype="Number" />
                 </div>
             </div>
         </div>