Fix styling on character sheet traits.

Traits now properly utilize flex box and are more compact.
StasTserk · Dec 4, 2020 · 05b5102 · 05b5102
1 parent fd69840
commit 05b5102
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 46 deletions.
diff --git a/module/templates.ts b/module/templates.ts
@@ -11,6 +11,7 @@ export async function preloadHandlebarsTemplates(): Promise<void> {
       "systems/burningwheel/templates/parts/rollable-item.hbs",
       "systems/burningwheel/templates/parts/rollable-skill.hbs",
       "systems/burningwheel/templates/parts/spell.hbs",
+      "systems/burningwheel/templates/parts/trait.hbs",
       "systems/burningwheel/templates/parts/weapons.hbs",
       "systems/burningwheel/templates/parts/character-settings.hbs",
 

diff --git a/styles/character/bits.scss b/styles/character/bits.scss
@@ -53,27 +53,32 @@
         margin: 5px;
 
         .trait {
+
             @include colored-item(black);
             textarea {
                 background-color: transparent;
                 min-height: 8em;
             }
-        }
 
-        i {
-            float: right;
-            font-size: 12px;
-            margin-top: 6px;
-            margin-left: 5px;
-            color: transparentize($color: black, $amount: 0.25)
-        }
+            h3 {
+                margin-bottom: 0;
+            }
 
-        i:hover {
-            color: #FF0000;
-        }
-    }
+            label {
+                flex: 1 100px;
+            }
 
-    .trait-checkbox:checked + div > textarea {
-        display: none;
+            i {
+                flex: 0 12px;
+                font-size: 12px;
+                margin-top: 6px;
+                margin-left: 5px;
+                color: transparentize($color: black, $amount: 0.25)
+            }
+
+            i:hover {
+                color: #FF0000;
+            }
+        }
     }
 }
diff --git a/templates/character-sheet.hbs b/templates/character-sheet.hbs
@@ -124,52 +124,23 @@
                 <i data-action="addTrait" data-id="character" class="fas fa-plus"></i>
             </h2>
             {{#each traits.character as |trait|}}
-                <div class="trait" data-item-id="{{trait._id}}" draggable="true" data-id="{{trait._id}}">
-                    <h3>
-                        {{ trait.name }}
-                        <i class="fas fa-comment" data-action="broadcast" data-id="{{trait._id}}"></i>
-                        <i class="fas fa-trash" data-action="delItem" data-id="{{trait._id}}"></i>
-                        <i class="fas fa-edit" data-action="editItem" data-id="{{trait._id}}"></i>
-                    </h3>
-                </div>
+            {{> "systems/burningwheel/templates/parts/trait.hbs" trait=trait}}
             {{/each}}
         </div>
         <div class="trait-category">
             <h2>Die Traits
                 <i data-action="addTrait" data-id="die" class="fas fa-plus"></i>
             </h2>
             {{#each traits.die as |trait|}}
-                <input type="checkbox" id="{{trait._id}}-toggle" class="hidden trait-checkbox" data-item-id="{{trait._id}}" data-binding="data.collapsed" {{ checked trait.data.collapsed }}>
-                <div class="trait" data-item-id="{{trait._id}}" draggable="true" data-id="{{trait._id}}">
-                    <label for="{{trait._id}}-toggle">
-                        <h3>
-                            {{ trait.name }}
-                            <i class="fas fa-comment" data-action="broadcast" data-id="{{trait._id}}"></i>
-                            <i class="fas fa-trash" data-action="delItem" data-id="{{trait._id}}"></i>
-                            <i class="fas fa-edit" data-action="editItem" data-id="{{trait._id}}"></i>
-                        </h3>
-                    </label>
-                    <textarea disabled="disabled">{{trait.data.text}}</textarea>
-                </div>
+            {{> "systems/burningwheel/templates/parts/trait.hbs" trait=trait}}
             {{/each}}
         </div>
         <div class="trait-category">
             <h2>Call-on Traits
                 <i data-action="addTrait" data-id="call-on" class="fas fa-plus"></i>
             </h2>
             {{#each traits.callon as |trait|}}
-            <input type="checkbox" id="{{trait._id}}-toggle" class="hidden trait-checkbox" data-item-id="{{trait._id}}" data-binding="data.collapsed" {{ checked trait.data.collapsed }}>
-                <div class="trait" data-item-id="{{trait._id}}" draggable="true" data-id="{{trait._id}}">
-                    <label for="{{trait._id}}-toggle">
-                        <h3>
-                            {{ trait.name }}
-                            <i class="fas fa-comment" data-action="broadcast" data-id="{{trait._id}}"></i>
-                            <i class="fas fa-trash" data-action="delItem" data-id="{{trait._id}}"></i>
-                            <i class="fas fa-edit" data-action="editItem" data-id="{{trait._id}}"></i>
-                        </h3>
-                    </label>
-                    <textarea disabled="disabled">{{ trait.data.text }}</textarea>
-                </div>
+            {{> "systems/burningwheel/templates/parts/trait.hbs" trait=trait}}
             {{/each}}
         </div>
     </div>

diff --git a/templates/parts/trait.hbs b/templates/parts/trait.hbs
@@ -0,0 +1,13 @@
+<div class="trait" data-item-id="{{trait._id}}" draggable="true" data-id="{{trait._id}}">
+    <h3 class="flex-row">
+        <input type="checkbox" id="{{trait._id}}-toggle" class="hidden trait-checkbox" data-item-id="{{trait._id}}" data-binding="data.collapsed" {{ checked trait.data.collapsed }}>
+        <label for="{{trait._id}}-toggle">{{ trait.name }}</label>    
+        <i class="fas fa-comment" data-action="broadcast" data-id="{{trait._id}}"></i>
+        <i class="fas fa-edit" data-action="editItem" data-id="{{trait._id}}"></i>
+        <i class="fas fa-trash" data-action="delItem" data-id="{{trait._id}}"></i>
+    </h3>
+    {{#if trait.data.collapsed}}{{else}}
+    <hr>
+    <textarea disabled="disabled">{{ trait.data.text }}</textarea>
+    {{/if}}
+</div>