Adjust portrait to horse sheet, and adjust input font sizes.

mcglincy · Mar 28, 2023 · 471016e · 471016e
1 parent ec876fb
commit 471016e
Show file tree

Hide file tree

Showing 9 changed files with 245 additions and 152 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 1.1.0
+
+- Adjust portrait to horse sheet, and adjust input font sizes.
+
 # 1.0.1
 
 - Fix system.json for v10 warnings.

diff --git a/css/frontierscum.css b/css/frontierscum.css
@@ -23,7 +23,7 @@
   background: transparent;
   border-bottom: 1px dotted black;
   font-family: "Inconsolata", monospace;
-  font-size: 0.9rem;
+  font-size: 1rem;
   text-align: center;
 }
 .frontierscum textarea {
@@ -397,6 +397,10 @@ body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .e
 .frontierscum .scumsheet-body .equipment-block {
   display: flex;
 }
+.frontierscum .scumsheet-body .equipment-block input[type=number],
+.frontierscum .scumsheet-body .equipment-block input[type=text] {
+  font-size: 0.9rem;
+}
 .frontierscum .scumsheet-body .equipment-block .eq-col-1 {
   display: flex;
   flex-direction: column;
@@ -529,6 +533,36 @@ body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .e
   padding-left: 10px;
   text-align: left;
 }
+.frontierscum .horsesheet .horsesheet-body .bottom-cols {
+  display: flex;
+}
+.frontierscum .horsesheet .horsesheet-body .bottom-cols .left-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding-left: 10px;
+  padding-right: 20px;
+}
+.frontierscum .horsesheet .horsesheet-body .bottom-cols .left-col .portrait-block {
+  border: 2px solid black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 264px;
+  width: 264px;
+  margin-bottom: 10px;
+}
+.frontierscum .horsesheet .horsesheet-body .bottom-cols .left-col .portrait-block img {
+  border: 2px solid black;
+  height: 254px;
+  width: 254px;
+  padding: 0;
+  margin: 0;
+}
+.frontierscum .horsesheet .horsesheet-body .bottom-cols .right-col {
+  flex: 1;
+}
 .frontierscum .horsesheet .horsesheet-body .on-your-horse {
   display: flex;
   flex-direction: column;
@@ -538,9 +572,17 @@ body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .e
   flex: 0 0 20px;
   padding: 2px;
 }
+.frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row input[type=number],
+.frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row input[type=text] {
+  font-size: 0.9rem;
+}
+.frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row:nth-child(10), .frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row:nth-child(11), .frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row:nth-child(12) {
+  padding-left: 10px;
+}
 .frontierscum .horsesheet .horsesheet-body .stolen-block {
   display: flex;
   justify-content: center;
+  margin-bottom: 10px;
 }
 .frontierscum .horsesheet .horsesheet-body .stolen-block .stats {
   width: 300px;
@@ -576,24 +618,6 @@ body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .e
 .frontierscum .horsesheet .horsesheet-body .stolen-block .stats .stat-row .stat-block:last-child label {
   width: 80px;
 }
-.frontierscum .horsesheet .horsesheet-body .horse1 {
-  background-image: url("https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/horsehead1.png");
-  background-size: 100% 100%;
-  height: 170px;
-  width: 170px;
-  position: absolute;
-  left: 10px;
-  top: 700px;
-}
-.frontierscum .horsesheet .horsesheet-body .horse2 {
-  background-image: url("https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/horsehead2.png");
-  background-size: 100% 100%;
-  width: 170px;
-  height: 170px;
-  position: absolute;
-  left: 498px;
-  top: 700px;
-}
 
 .frontierscum .npcsheet {
   display: flex;

diff --git a/css/frontierscum.raw.css b/css/frontierscum.raw.css
@@ -23,7 +23,7 @@
   background: transparent;
   border-bottom: 1px dotted black;
   font-family: "Inconsolata", monospace;
-  font-size: 0.9rem;
+  font-size: 1rem;
   text-align: center;
 }
 .frontierscum textarea {
@@ -398,6 +398,10 @@ body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .e
 .frontierscum .scumsheet-body .equipment-block {
   display: flex;
 }
+.frontierscum .scumsheet-body .equipment-block input[type=number],
+.frontierscum .scumsheet-body .equipment-block input[type=text] {
+  font-size: 0.9rem;
+}
 .frontierscum .scumsheet-body .equipment-block .eq-col-1 {
   display: flex;
   flex-direction: column;
@@ -530,6 +534,36 @@ body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .e
   padding-left: 10px;
   text-align: left;
 }
+.frontierscum .horsesheet .horsesheet-body .bottom-cols {
+  display: flex;
+}
+.frontierscum .horsesheet .horsesheet-body .bottom-cols .left-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding-left: 10px;
+  padding-right: 20px;
+}
+.frontierscum .horsesheet .horsesheet-body .bottom-cols .left-col .portrait-block {
+  border: 2px solid black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 264px;
+  width: 264px;
+  margin-bottom: 10px;
+}
+.frontierscum .horsesheet .horsesheet-body .bottom-cols .left-col .portrait-block img {
+  border: 2px solid black;
+  height: 254px;
+  width: 254px;
+  padding: 0;
+  margin: 0;
+}
+.frontierscum .horsesheet .horsesheet-body .bottom-cols .right-col {
+  flex: 1;
+}
 .frontierscum .horsesheet .horsesheet-body .on-your-horse {
   display: flex;
   flex-direction: column;
@@ -539,9 +573,17 @@ body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .e
   flex: 0 0 20px;
   padding: 2px;
 }
+.frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row input[type=number],
+.frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row input[type=text] {
+  font-size: 0.9rem;
+}
+.frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row:nth-child(10), .frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row:nth-child(11), .frontierscum .horsesheet .horsesheet-body .on-your-horse .on-horse-row:nth-child(12) {
+  padding-left: 10px;
+}
 .frontierscum .horsesheet .horsesheet-body .stolen-block {
   display: flex;
   justify-content: center;
+  margin-bottom: 10px;
 }
 .frontierscum .horsesheet .horsesheet-body .stolen-block .stats {
   width: 300px;
@@ -577,24 +619,6 @@ body.sheet-darkmode .charsheet .frontierscum .scumsheet-body .equipment-block .e
 .frontierscum .horsesheet .horsesheet-body .stolen-block .stats .stat-row .stat-block:last-child label {
   width: 80px;
 }
-.frontierscum .horsesheet .horsesheet-body .horse1 {
-  background-image: url("https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/horsehead1.png");
-  background-size: 100% 100%;
-  height: 170px;
-  width: 170px;
-  position: absolute;
-  left: 10px;
-  top: 700px;
-}
-.frontierscum .horsesheet .horsesheet-body .horse2 {
-  background-image: url("https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/horsehead2.png");
-  background-size: 100% 100%;
-  width: 170px;
-  height: 170px;
-  position: absolute;
-  left: 498px;
-  top: 700px;
-}
 
 .frontierscum .npcsheet {
   display: flex;

diff --git a/module/actor/sheet/horse-sheet.js b/module/actor/sheet/horse-sheet.js
@@ -10,7 +10,8 @@ export class FSHorseSheet extends FSActorSheet {
       classes: ["frontierscum", "sheet", "actor", "horse"],
       template: "systems/frontierscum/templates/actor/horse-sheet.html",
       width: 685,
-      height: 880,
+      // height: 880,
+      height: 835,
       tabs: [
         {
           navSelector: ".sheet-tabs",

diff --git a/src/pug/actor/_horse-body.pug b/src/pug/actor/_horse-body.pug
@@ -4,46 +4,49 @@
       .name-block 
         .field-row.name-row 
           label name
-          input(type='text', name='name', value='{{actor.name}}', placeholder='Lightning Bolt', spellcheck='false')
+          input(type='text', name='name', value='{{actor.name}}', spellcheck='false')
         .field-row
           label likes
-          input(type='text', name='system.likes', value='{{data.system.likes}}', placeholder='Daily baths', spellcheck='false')
+          input(type='text', name='system.likes', value='{{data.system.likes}}', spellcheck='false')
           label type
-          input(type='text', name='system.type', value='{{data.system.type}}', placeholder='Brown riding horse', spellcheck='false')
+          input(type='text', name='system.type', value='{{data.system.type}}', spellcheck='false')
         .field-row
           label notes
           input(type='text', name='system.notes', value='{{data.system.notes}}', spellcheck='false')
         .field-row
           label vehicle
           input(type='text', name='system.vehicle', value='{{data.system.vehicle}}', spellcheck='false')
-      .on-your-horse 
-        .top-label(data-i18n='on_your_horse') on your horse
-        each val in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-          .on-horse-row
-            input(type='text', name=`system.slot${val}`, value=`{{data.system.slot${val}}}`, spellcheck='false')
-      .stolen-block
-        .stats
-          .stat-row          
-            .stat-block 
-              label stolen
-              .horseshoe
-                label(class='check-container')
-                  | <input type="checkbox" name="system.stolen" {{#if data.system.stolen}}checked{{/if}} />                
-                  span(class='checkmark')
-            .stat-block 
-              label hp
-              .horseshoe
-                input(type='number', name='system.hp.value', value='{{data.system.hp.value}}', placeholder=0)
-          .stat-row
-            .stat-block 
-              label morale
-              .horseshoe
-                input(type='number', name='system.morale', value='{{data.system.morale}}', placeholder=0)
-            .stat-block 
-              label(data-i18n='max') max
-              .horseshoe
-                input(type='number', name='system.hp.max', value='{{data.system.hp.max}}', placeholder=0)
-      .horse1 
-      .horse2
+      .bottom-cols
+        .left-col 
+          .portrait-block
+            img(src='{{actor.img}}', title='{{actor.name}}', data-edit="img")
+          .stolen-block
+            .stats
+              .stat-row          
+                .stat-block 
+                  label stolen
+                  .horseshoe
+                    label(class='check-container')
+                      | <input type="checkbox" name="system.stolen" {{#if data.system.stolen}}checked{{/if}} />                
+                      span(class='checkmark')
+                .stat-block 
+                  label hp
+                  .horseshoe
+                    input(type='number', name='system.hp.value', value='{{data.system.hp.value}}', placeholder=0)
+              .stat-row
+                .stat-block 
+                  label morale
+                  .horseshoe
+                    input(type='number', name='system.morale', value='{{data.system.morale}}', placeholder=0)
+                .stat-block 
+                  label(data-i18n='max') max
+                  .horseshoe
+                    input(type='number', name='system.hp.max', value='{{data.system.hp.max}}', placeholder=0)
+        .right-col
+          .on-your-horse 
+            .top-label(data-i18n='on_your_horse') on your horse
+            each val in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+              .on-horse-row
+                input(type='text', name=`system.slot${val}`, value=`{{data.system.slot${val}}}`, spellcheck='false')
 
 
diff --git a/src/scss/common/_input.scss b/src/scss/common/_input.scss
@@ -7,7 +7,7 @@
     background: transparent;
     border-bottom: $dotted;
     font-family: $mono-font;
-    font-size: 0.9rem;
+    font-size: 1.0rem;
     text-align: center;
   }
 

diff --git a/src/scss/horsesheet/_body.scss b/src/scss/horsesheet/_body.scss
@@ -31,18 +31,62 @@
       }      
     }
   }
+  .bottom-cols {
+    display: flex;
+    .left-col {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 1;
+      padding-left: 10px;
+      padding-right: 20px;
+      .portrait-block {
+        border: 2px solid black;
+        // padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // height: 234px;
+        // width: 234px;
+        height: 264px;
+        width: 264px;
+        margin-bottom: 10px;
+        img {
+          border: 2px solid black;
+          height: 254px;
+          width: 254px;
+          padding: 0;
+          margin: 0;
+        }  
+      }
+    }
+    .right-col {
+      flex: 1;
+    }
+  }
   .on-your-horse {
     display: flex;
     flex-direction: column;
     width: 100%;
     .on-horse-row {
       flex: 0 0 20px;
       padding: 2px;
+      input[type='number'],
+      input[type='text'] {
+        font-size: 0.9rem; 
+      }      
+      &:nth-child(10),
+      &:nth-child(11),
+      &:nth-child(12)
+       {
+        padding-left: 10px;
+      }
     }
   }
   .stolen-block {
     display: flex;
     justify-content: center;
+    margin-bottom: 10px;
     .stats {
       width: 300px;
       .stat-row {
@@ -80,23 +124,4 @@
       }  
     }
   }
-  .horse1 {
-    background-image: url('https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/horsehead1.png');
-    background-size: 100% 100%;
-    height: 170px;
-    width: 170px;
-    position: absolute;
-    left: 10px;
-    top: 700px;
-  }  
-  .horse2 {
-    background-image: url('https://raw.githubusercontent.com/mcglincy/frontierscum-roll20/main/img/horsehead2.png');
-    background-size: 100% 100%;
-    width: 170px;
-    height: 170px;
-    position: absolute;
-    left: 498px;
-    top: 700px;
-  }
-
 }