Drastically improved build page layout

app/views/page-outfit.html

@@ -1,6 +1,6 @@
 <div id="outfit">
 
-  <div id="overview" class="list">
+  <div id="overview">
     <h1 ng-bind="ship.name"></h1>
     <div id="build">
       <input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" maxlength="50" />
@@ -26,10 +26,13 @@
     <thead>
       <tr class="main">
         <th colspan="3">Manuverability</th><th colspan="2">Mass</th><th rowspan="2">Cargo</th><th rowspan="2">Fuel</th>
-        <th rowspan="2">Armour</th><th rowspan="2">Shields</th><th colspan="2">Jump Range</th><th rowspan="2">Insurance</th><th rowspan="2">Cost</th>
+        <th rowspan="2">Armour</th><th rowspan="2">Shields</th><th colspan="2">Power</th><th colspan="2">Jump Range</th><th rowspan="2">Cost</th>
       </tr>
       <tr>
-        <th>Agility</th><th>Thrusters</th><th>Boost</th><th class="lft">Unladen</th><th>Laden</th><th>Unladen</th><th>Laden</th>
+        <th>Agility</th><th>Speed</th><th>Boost</th>
+        <th class="lft">Unladen</th><th>Laden</th>
+        <th class="lft">Retracted</th><th>Deployed</th>
+        <th class="lft">Unladen</th><th>Laden</th>
       </tr>
     </thead>
     <tbody>
@@ -41,27 +44,18 @@
         <td>{{fRound(ship.ladenMass)}} <u>T</u></td>
         <td>{{fRound(ship.cargoCapacity)}} <u>T</u></td>
         <td>{{fRound(ship.fuelCapacity)}} <u>T</u></td>
-        <td>{{ship.armourTotal}} ({{ship.armour}} + {{ship.armourAdded}})</td>
-        <td>{{fRound(ship.shieldStrength)}} <u>Mj</u> ({{fRPct(ship.shieldMultiplier)}})</td>
+        <td>{{ship.armourTotal}}<span ng-if="ship.armourAdded"> ({{ship.armour}} + {{ship.armourAdded}})</span></td>
+        <td>{{fRound(ship.shieldStrength)}} <u>Mj</u><span ng-if="ship.shieldMultiplier > 1"> ({{fRPct(ship.shieldMultiplier)}})</span></td>
+        <td>{{fPwr(ship.powerRetracted)}} <u>MW ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</u></td>
+        <td>{{fPwr(ship.powerDeployed)}} <u>MW ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</u></td>
         <td>{{fRound(ship.unladenJumpRange)}} <u>LY</u></td>
         <td>{{fRound(ship.ladenJumpRange)}} <u>LY</u></td>
-        <td>{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></td>
         <td>{{fCrd(ship.totalCost)}} <u>CR</u></td>
       </tr>
     </tbody>
   </table>
 
-  <div id="hardpoints" class="slot-group">
-    <h1 class="vertical">HardPoints</h1>
-    <div class="slot" ng-repeat="h in ship.hardpoints" ng-click="selectSlot($event, h)" ng-class="{selected: selectedSlot==h}">
-      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="hgMap[h.c.grp]"></div>
-      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
-        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
-      </div>
-    </div>
-  </div>
-
-  <div id="standard" class="slot-group">
+  <div id="standard" class="slot-group l">
     <h1>Standard</h1>
     <div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}">
       <div class="details">
@@ -85,8 +79,8 @@
         <div class="r">{{pp.id}}</div>
         <div class="cb"></div>
         <div class="l">Eff: {{pp.c.eff}}</div>
-        <div class="l">Power: {{pp.c.pGen}} <u>MW</span></div>
-        <div class="r">{{pp.c.mass}} <u><u>T</u></span></div>
+        <div class="l">Power: {{pp.c.pGen}} <u>MW</u></div>
+        <div class="r">{{pp.c.mass}} <u>T</u></div>
       </div>
       <div component-select class="select" s="pp" opts="availCS.common[0]" ng-if="selectedSlot==pp" ng-click="select('c',pp,$event)"></div>
     </div>
@@ -160,7 +154,17 @@
     </div>
   </div>
 
-  <div id="internal" class="slot-group">
+  <div id="hardpoints" class="slot-group l">
+    <h1>HardPoints</h1>
+    <div class="slot" ng-repeat="h in ship.hardpoints" ng-click="selectSlot($event, h)" ng-class="{selected: selectedSlot==h}">
+      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="hgMap[h.c.grp]"></div>
+      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
+        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
+      </div>
+    </div>
+  </div>
+
+  <div id="internal" class="slot-group r">
     <h1>Internal Compartments</h1>
     <div class="slot" ng-repeat="i in ship.internal" ng-click="selectSlot($event, i)" ng-class="{selected: selectedSlot==i}">
       <div slot-internal class="details" slot="i" lbl="igMap[i.c.grp]"></div>
@@ -170,82 +174,74 @@
     </div>
   </div>
 
-  <div class="cb">
-    <div class="list" ship="ship">
-      <div class="header toggle" ng-click="powerExp = !powerExp">Power Use</div>
-      <div class="items" ng-if="!powerExp">
-        <div ng-if="pp.c.pGen" class="item common enabled untoggleable">
-          <div class="lbl">{{pp.c.class}}{{pp.c.rating}} Power Plant</div><div class="val">{{fPwr(pp.c.pGen)}}</div>
-        </div>
+  <div class="cb"></div>
 
-        <div ng-repeat="c in ship.common" ng-if="c.c.power" class="item common" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)">
-          <div class="lbl">{{c.c.class}}{{c.c.rating}} {{CArr[$index]}}</div><div class="val">{{fPwr(c.c.power)}}</div>
-        </div>
-
-        <div class="item common consumer" ng-class="{enabled:ship.cargoScoop.enabled}" ng-click="togglePwr(ship.cargoScoop)">
-          <div class="lbl">1H Cargo Scoop</div><div class="val">{{fPwr(ship.cargoScoop.c.power)}}</div>
-        </div>
-
-        <div ng-repeat="c in ship.hardpoints" ng-if="c.c.power" class="item hardpoints" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)">
-          <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || hgMap[c.c.grp]}}</div><div class="val">{{fPwr(c.c.power)}}</div>
-        </div>
-
-        <div ng-repeat="c in ship.internal" ng-if="c.c.power" class="item internal" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)">
-          <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || igMap[c.c.grp]}}</div><div class="val">{{fPwr(c.c.power)}}</div>
-        </div>
+  <div class="list l">
+    <div class="header">Power Use</div>
+    <div class="items">
+    <div class="primary-disabled">Generated</div>
+      <div ng-if="pp.c.pGen" class="item common enabled untoggleable">
+        <div class="lbl">{{pp.c.class}}{{pp.c.rating}} Power Plant</div><div class="val">{{fPwr(pp.c.pGen)}}</div>
       </div>
-      <div class="summary toggle" ng-click="powerExp = !powerExp">
-        <div class="item">
-          <div class="lbl">Available</div>
-          <div class="val">{{fPwr(ship.powerAvailable)}} <u>MW</u></div>
-        </div>
-        <div class="item">
-          <div class="lbl">Deployed</div>
-          <div class="val">{{fPwr(ship.powerDeployed)}} <u>MW</u> ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</div>
-        </div>
-        <div class="item">
-          <div class="lbl">Retracted</div>
-          <div class="val">{{fPwr(ship.powerRetracted)}} <u>MW</u> ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</div>
-        </div>
+      <div class="primary-disabled">Standard</div>
+      <div ng-repeat="c in ship.common" ng-if="c.c.power" class="item common" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)">
+        <div class="lbl">{{c.c.class}}{{c.c.rating}} {{CArr[$index]}}</div><div class="val">{{fPwr(c.c.power)}}</div>
+      </div>
+      <div class="item common consumer" ng-class="{enabled:ship.cargoScoop.enabled}" ng-click="togglePwr(ship.cargoScoop)">
+        <div class="lbl">1H Cargo Scoop</div><div class="val">{{fPwr(ship.cargoScoop.c.power)}}</div>
+      </div>
+      <div class="primary-disabled">Hardpoints</div>
+      <div ng-repeat="c in ship.hardpoints" ng-if="c.c.power" class="item hardpoints" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)">
+        <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || hgMap[c.c.grp]}}</div><div class="val">{{fPwr(c.c.power)}}</div>
+      </div>
+      <div class="primary-disabled">Internal</div>
+      <div ng-repeat="c in ship.internal" ng-if="c.c.power" class="item internal" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="togglePwr(c)">
+        <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || igMap[c.c.grp]}}</div><div class="val">{{fPwr(c.c.power)}}</div>
       </div>
     </div>
 
-    <div class="list">
-      <div class="header toggle">Jump Range</div>
-      <div class="items cen">
-        <div class="chart" area-chart config="jrChart" series="jrSeries" width="500" height="250"></div>
-      </div>
-    </div>
-    <div class="list">
-      <div class="header toggle" ng-click="costsExpanded = !costsExpanded">Costs</div>
-      <div class="items" ng-if="!costsExpanded">
-        <div class="item" ng-class="{enabled:ship.incCost}" ng-click="toggleCost(ship)">
-          <div class="lbl">{{ship.name}}</div><div class="val">{{fCrd(ship.cost)}}</div>
-        </div>
-        <div class="item" ng-class="{enabled:ship.bulkheads.incCost}" ng-click="toggleCost(ship.bulkheads)" ng-if="ship.bulkheads.c.cost">
-          <div class="lbl">{{ship.bulkheads.c.name}}</div><div class="val">{{fCrd(ship.bulkheads.c.cost)}}</div>
-        </div>
-        <div ng-repeat="c in ship.common" ng-if="c.c.cost" class="item common" ng-class="{enabled:c.incCost}" ng-click="toggleCost(c)">
-          <div class="lbl">{{c.c.class}}{{c.c.rating}} {{CArr[$index]}}</div><div class="val">{{fCrd(c.c.cost)}}</div>
-        </div>
-        <div ng-repeat="c in ship.hardpoints" ng-if="c.c.cost" class="item hardpoints" ng-class="{enabled:c.incCost}" ng-click="toggleCost(c)">
-          <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || hgMap[c.c.grp]}}</div><div class="val">{{fCrd(c.c.cost)}}</div>
-        </div>
-        <div ng-repeat="c in ship.internal" ng-if="c.c.cost" class="item internal" ng-class="{enabled:c.incCost}" ng-click="toggleCost(c)">
-          <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || igMap[c.c.grp]}}</div><div class="val">{{fCrd(c.c.cost)}}</div>
-        </div>
-      </div>
-      <div class="summary toggle" ng-click="costsExpanded = !costsExpanded">
-        <div class="item">
-          <div class="lbl">Total</div>
-          <div class="val">{{fCrd(ship.totalCost)}} <u>CR</u></div>
-        </div>
-        <div class="item">
-          <div class="lbl">Insurance</div>
-          <div class="val">{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></div>
-        </div>
-      </div>
+    <table>
+      <thead><tr><td>Retracted</td><td>Deployed</td></tr></thead>
+      <tbody><tr>
+        <td>{{fPwr(ship.powerRetracted)}} <u>MW</u> ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</td>
+        <td>{{fPwr(ship.powerDeployed)}} <u>MW</u> ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</td>
+      </tr></tbody>
+    </table>
+  </div>
+
+  <div class="list l">
+    <div class="header">Jump Range</div>
+    <div class="items cen">
+      <div class="chart" area-chart config="jrChart" series="jrSeries" width="455" height="250"></div>
     </div>
   </div>
 
+  <div class="list r">
+    <div class="header">Costs</div>
+    <div class="items">
+      <div class="item" ng-class="{enabled:ship.incCost}" ng-click="toggleCost(ship)">
+        <div class="lbl">{{ship.name}}</div><div class="val">{{fCrd(ship.cost)}}</div>
+      </div>
+      <div class="item" ng-class="{enabled:ship.bulkheads.incCost}" ng-click="toggleCost(ship.bulkheads)" ng-if="ship.bulkheads.c.cost">
+        <div class="lbl">{{ship.bulkheads.c.name}}</div><div class="val">{{fCrd(ship.bulkheads.c.cost)}}</div>
+      </div>
+      <div ng-repeat="c in ship.common" ng-if="c.c.cost" class="item common" ng-class="{enabled:c.incCost}" ng-click="toggleCost(c)">
+        <div class="lbl">{{c.c.class}}{{c.c.rating}} {{CArr[$index]}}</div><div class="val">{{fCrd(c.c.cost)}}</div>
+      </div>
+      <div ng-repeat="c in ship.hardpoints" ng-if="c.c.cost" class="item hardpoints" ng-class="{enabled:c.incCost}" ng-click="toggleCost(c)">
+        <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || hgMap[c.c.grp]}}</div><div class="val">{{fCrd(c.c.cost)}}</div>
+      </div>
+      <div ng-repeat="c in ship.internal" ng-if="c.c.cost" class="item internal" ng-class="{enabled:c.incCost}" ng-click="toggleCost(c)">
+        <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || igMap[c.c.grp]}}</div><div class="val">{{fCrd(c.c.cost)}}</div>
+      </div>
+    </div>
+    <table>
+      <thead><tr><td>Insurance</td><td>Total</td></tr></thead>
+      <tbody><tr>
+        <td>{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></td>
+        <td>{{fCrd(ship.totalCost)}} <u>CR</u></td>
+      </tr></tbody>
+    </table>
+  </div>
+
 </div>