From fdb879b97a7caabaa324d0b6f19963cd26f3247b Mon Sep 17 00:00:00 2001
From: TheLastScrub <67403321+TheLastScrub@users.noreply.github.com>
Date: Fri, 4 Jun 2021 23:11:55 -0700
Subject: [PATCH] cleaned up bonds sheet layout

---
 CHANGELOG.md                        |  9 +++++---
 css/deltagreen.css                  | 24 ++++++++++++++++++++++
 templates/item/item-bond-sheet.html | 32 ++++++++++++++---------------
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 436e892..b08f0ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,13 @@
 
 ### Verion 1.0.0 - 2021-06-03 [BREAKING CHANGE: COMPATIBILE WITH FOUNDRY 0.8.6 OR HIGHER ONLY!]
 
- * Changes to support 0.8.x Foundry
-  * Revamped data model for actor sheet.
-  * Rolls asynchronous now
+* Changes to support 0.8.x Foundry
+ * Revamped data model for actor sheet. Note due to the changes, the new system is not backwards compatible with older versions of Foundry now.
+ * Rolls all asynchronous now.  Should allow less work to be required in future versions when asynchronous rolls are required.
 * Enhancement - Added option to choose roll mode in the roll modifier dialogue for both percentile/lethality tests and damage rolls.
+* Enhancement - Added a descriptor field, 'Relationship' to bonds, so you can give a name, and then the relationship as two separate fields.
+* Enhancement - More CSS Improvements
+ * Cleaned up layout on bonds item sheet
 
 ### Version 0.9.9 - 2021-03-27
 
diff --git a/css/deltagreen.css b/css/deltagreen.css
index bad8e68..1e5dc59 100644
--- a/css/deltagreen.css
+++ b/css/deltagreen.css
@@ -629,4 +629,28 @@ div.motivation-editor-container div.editor{
   position: inherit;
   min-height: 20px;
   height: 300px;
+}
+
+/*
+  Bonds Item Sheet
+*/
+
+.bond-sheet-grid-2col{
+  display: grid;
+  grid-template-columns: 25% 75%;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding-left: 5px;
+  grid-gap: 5px;
+}
+
+.bond-sheet-horizontal-grid-2col{
+  display: grid;
+  grid-template-columns: 100px auto;
+  align-items: center;
+  text-align: left;
+  padding-bottom: 10px;
+  column-gap: 10px;
+  row-gap: 10px;
 }
\ No newline at end of file
diff --git a/templates/item/item-bond-sheet.html b/templates/item/item-bond-sheet.html
index 9aea8a0..ddc7066 100644
--- a/templates/item/item-bond-sheet.html
+++ b/templates/item/item-bond-sheet.html
@@ -1,23 +1,21 @@
 <form class="{{cssClass}} {{getFontFamilySystemSettingClass}}" autocomplete="off">
     <header class="sheet-header">
-        <div class="flexrow">
+        <div class="bond-sheet-grid-2col">
             <img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
-            <div class="horizontal-flex-column">
-                <div>
-                    <h1 class="charname"> <input name="name" type="text" value="{{item.name}}" placeholder="Name" /> </h1>
-                </div>
-                <div class="resource">
-                    <label class="resource-label">Score</label>
-                    <input type="text" name="data.score" value="{{data.data.score}}" data-dtype="Number"
-                        title="{{localize 'DG.ItemWindow.Bonds.ScoreTooltip'}}"
-                    />
-                </div>
-                <div class="resource">
-                    <label class="resource-label">Relationship</label>
-                    <input type="text" name="data.relationship" value="{{data.data.relationship}}" data-dtype="String"
-                        
-                    />
-                </div>
+            <div class="bond-sheet-horizontal-grid-2col">
+
+                <span>{{localize 'DG.Bonds.Name'}}:</span>
+                <input name="name" type="text" value="{{item.name}}" placeholder="{{localize 'DG.Bonds.Name'}}" />
+                                
+                <!-- <label class="resource-label">{{localize 'DG.Bonds.Score'}}</label> -->
+                <span>{{localize 'DG.Bonds.Score'}}:</span>
+                <input type="text" name="data.score" value="{{data.data.score}}" data-dtype="Number"
+                    title="{{localize 'DG.ItemWindow.Bonds.ScoreTooltip'}}"
+                />            
+            
+                <span>{{localize 'DG.Bonds.Relationship'}}:</span>
+                <input type="text" name="data.relationship" value="{{data.data.relationship}}" data-dtype="String" />
+                
             </div>
         </div>
     </header>