Tweaks

- Adds Tabs for Crew
- Several minor style tweaks

TODO

@@ -13,5 +13,8 @@
 - Add Usage documentation to README.md
 - Add Turf Validation (<= 6 max)
 - Add turf connection validation
+- Change Traumas from Checkboxes to Items
 - Document usage of "logic" item property (crew_upgrades)
-- Add screenshots
+- Add Icons to Items
+- Add screenshots
+- Add BitD fonts and fix styles

module/crew-sheet.js

@@ -10,7 +10,8 @@ export class BladesCrewSheet extends ActorSheet {
   	  classes: ["blades-in-the-dark", "sheet", "actor"],
   	  template: "systems/blades-in-the-dark/templates/crew-sheet.html",
       width: 930,
-      height: 970
+      height: 970,
+      tabs: [{navSelector: ".tabs", contentSelector: ".tab-content", initial: "turfs"}]
     });
   }
 
@@ -45,12 +46,6 @@ export class BladesCrewSheet extends ActorSheet {
 	activateListeners(html) {
     super.activateListeners(html);
 
-    // Activate tabs
-    const tabs = new TabsV2({navSelector: ".tabs", contentSelector: ".section", initial: "turfs"});
-
-    // @todo Fix the error in TabsV2
-    // tabs.bind(html);
-
     // Everything below here is only needed if the sheet is editable
     if (!this.options.editable) return;
 

scss/style.scss

@@ -99,6 +99,7 @@ $red: red;
     margin-bottom: 10px;
     position: relative;
     padding-left: 10px;
+    display: flex;
   }
 
   // Stress and Trauma

styles/blades.css

@@ -99,6 +99,7 @@
   margin-bottom: 10px;
   position: relative;
   padding-left: 10px;
+  display: flex;
 }
 * .big-teeth-section {
   border-top: 3px solid black;

templates/crew-sheet.html

@@ -208,9 +208,9 @@
         {{/each}}
       </div>
       <nav class="tabs flex-horizontal">
-        <a class="item" data-tab="tab1">Turfs</a>
-        <a class="item" data-tab="tab2">Upgrades</a>
-        <a class="item" data-tab="tab3">Abilities</a>
+        <a class="item" data-tab="turfs">Turfs</a>
+        <a class="item" data-tab="upgrades">Upgrades</a>
+        <a class="item" data-tab="abilities">Abilities</a>
       </nav>
     </div>
 
@@ -240,21 +240,26 @@
 
   </section>
 
-  {{!-- Crew Type --}}
-  <section class="tab-content" data-tab="tab1">
-    {{#each actor.items as |item id|}}
-    {{#eq item.type "crew_type"}}
-    <div class="item" data-item-id="{{item._id}}">
-    {{> "systems/blades-in-the-dark/templates/parts/turf-list.html" turfs_data=item.data.turfs can_edit=false}}
-    </div>
-    {{/eq}}
-    {{/each}}
-  </section>
+  {{!-- Tabs --}}
+  <section class="tab-content">
+
+    {{!-- Turfs --}}
+    <div class="tab" data-tab="turfs">
+      <div class="label-stripe">
+        <p><label>Turfs</label></p>
+      </div>
+      {{#each actor.items as |item id|}}
+      {{#eq item.type "crew_type"}}
+      <div class="item" data-item-id="{{item._id}}">
+      {{> "systems/blades-in-the-dark/templates/parts/turf-list.html" turfs_data=item.data.turfs can_edit=false}}
+      </div>
+      {{/eq}}
+      {{/each}}
+    </div>
 
-  <section class="tab-content" data-tab="tab2">
 
     {{!-- Crew Upgrades --}}
-    <div id="crew-upgrades" class="grow-two flex-vertical">
+    <div id="crew-upgrades" class="tab grow-two flex-vertical" data-tab="upgrades">
       <div class="label-stripe">
         <p><label>Crew Upgrades</label></p>
       </div>
@@ -271,12 +276,8 @@
       {{/each}}
     </div>
 
-  </section>
-
-  <section class="tab-content" data-tab="tab3">
-
-    {{!-- Crew Upgrades --}}
-    <div id="crew-abilities" class="grow-two flex-vertical">
+    {{!-- Crew Abilities --}}
+    <div id="crew-abilities" class="tab grow-two flex-vertical" data-tab="abilities">
       <div class="label-stripe">
         <p><label>Special Abilities</label></p>
       </div>
@@ -295,4 +296,5 @@
 
   </section>
 
+
 </form>