Drastically improved build page layout

2025-12-09 14:45:35 +00:00 · 2015-05-25 20:40:53 -07:00
parent f12383bac3
commit e2225d7bf1
12 changed files with 133 additions and 168 deletions
--- a/app/index.html
+++ b/app/index.html
@@ -18,7 +18,6 @@
  <meta name="msapplication-TileImage" content="/images/logo/mstile-144x144.png">
  <meta name="msapplication-config" content="/images/logo/browserconfig.xml">
  <meta name="theme-color" content="#000000">
-  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 </head>
 <body  ng-click="bgClicked($event)">
  <div style="height: 0; width: 0; overflow:hidden"><%= svgContent %></div>
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -29,12 +29,6 @@ body {
  margin: 0;
  padding: 0;
  font-family: @fStandard;
-  overflow-x: hidden;
-  background-image: none;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: scroll;
-  background-size: cover;
 }

 #main {
--- a/app/less/list.less
+++ b/app/less/list.less
@@ -2,20 +2,30 @@
  overflow: hidden;
  padding: 5px;
  cursor: default;
-  position: relative;
  font-size: 0.8em;
+  min-width: 21em;
+  text-align: left;
+

  .header {
-    position: absolute;
    width: 100%;
-    height: 1.6em;
+    margin-bottom: 0.4em;
    font-family: @fTitle;
-    color: @primary;
+    color: @bgBlack;
+    background-color: @primary-disabled;
    text-transform: uppercase;
+    text-align: center;
+  }
+
+  table {
+    width: 100%;
+    text-align: right;
+    td {
+      padding-right: 0.5em;
+    }
  }

  .items {
-    margin-top: 25px;
    margin-bottom: 10px;
    clear: both;
    overflow: hidden;
@@ -52,20 +62,4 @@
    }
  }

-  .summary {
-    font-family: @fStandard;
-    overflow: hidden;
-    text-align: right;
-
-    .item {
-      float:right;
-      width: 25%
-    }
-    .lbl {
-      font-family: @fTitle;
-      color: @primary;
-      text-transform: uppercase;
-    }
-  }
-
 }
--- a/app/less/modal.less
+++ b/app/less/modal.less
@@ -42,8 +42,8 @@ textarea {

  &.json {
    display:block;
-    width:40em;
-    height: 10em;
+    width:50em;
+    height: 25em;
    resize: vertical;
    margin:2em 0;
  }
--- a/app/less/outfit.less
+++ b/app/less/outfit.less
@@ -1,7 +1,7 @@

 #outfit {
-  //width: 62em;
-  //margin: 0 auto;
+  width: 64em;
+  margin: 0 auto;
 }

 #overview {
@@ -9,11 +9,25 @@
    margin: 0;
    float: left;
  }
+  overflow: hidden;
+}
+
+#summary {
+  .user-select-none();
+  width: 100%;
+  margin-top: 1em;
+  font-size: 0.8em;
+  border-collapse: collapse;
+
+  tbody td {
+    padding: 0 0.5em;
+  }
 }

 #build {
  float: right;
  line-height: 2em;
+  font-size: 0.8em;

  input {
    background: none;
@@ -38,6 +52,7 @@
 }

 #standard {
+  margin-right: 0.3em;
  .slot {
    clear: left;
  }
@@ -48,19 +63,3 @@
    clear: left;
  }
 }
-
-
-#summary {
-  .user-select-none();
-  margin: 0;
-  border-collapse: collapse;
-
-  tbody td {
-    padding: 0 0.5em;
-  }
-}
-
-.toggle {
-  cursor: pointer;
-}
-
--- a/app/less/slot.less
+++ b/app/less/slot.less
@@ -1,7 +1,6 @@

 .slot-group {
-  float: left;
-  margin: 0.25em;
+  margin: 1em 0;
  .user-select-none();
  cursor: default;

@@ -13,13 +12,15 @@
    margin: 0.1em 0;
    font-size: 0.8em;
    padding-left: 0.5em;
+    font-weight: normal;
  }
 }

 .slot {
  float: left;
  text-align: left;
-  width: 20.5em;
+  width: 21em;
+  min-height: 2.75em;
  font-size: 0.75em;
  margin-top: 0.5em;
  position: relative;
@@ -64,7 +65,7 @@
    color: lighten(@primary-bg, 12%);
    text-align: center;
    letter-spacing: 0.1em;
-    line-height: 1.8em;
+    line-height: 1.7em;
  }

  &:hover{
--- a/app/less/table.less
+++ b/app/less/table.less
@@ -1,9 +1,7 @@

 table {
-  margin: 0 auto;
  background-color: @primary-bg;
  border-spacing: 0;
-  font-size: 0.8em;
  cursor: default;

  a, a:visited {
--- a/app/less/utilities.less
+++ b/app/less/utilities.less
@@ -29,19 +29,3 @@
  -ms-user-select: none;
  user-select: none;
 }
-
-.vertical {
-  -webkit-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
-  -o-transform: rotate(-90deg);
-  transform: rotate(-90deg);
-
-  -webkit-transform-origin: 50% 50%;
-  -moz-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  -o-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-}
--- a/app/views/_slot-hardpoint.html
+++ b/app/views/_slot-hardpoint.html
@@ -1,7 +1,8 @@
-  <div class="sz">{{::['U','S','M','L','H'][hp.maxClass]}}</div>
+<div class="sz">{{::['U','S','M','L','H'][hp.maxClass]}}</div>
 <div class="empty" ng-if="!hp.c">EMPTY</div>
 <div ng-if="hp.c">
-  <div class="l">{{hp.c.name || lbl}}</div><div class="r">{{hp.c.class}}{{hp.c.rating}}<span ng-if="hp.c.mode">/{{hp.c.mode}}{{hp.c.missile}}</span></div>
+  <div class="l">{{hp.c.class}}{{hp.c.rating}}<span ng-if="hp.c.mode">/{{hp.c.mode}}{{hp.c.missile}}</span> {{hp.c.name || lbl}}</div>
+  <div class="r">{{hp.c.mass}} <u>T</u></div>
  <div class="cb">
    <div class="l" ng-if="hp.c.damage">DMG: {{hp.c.damage}}</div>
    <div class="l" ng-if="hp.c.dps">DPS: {{hp.c.dps}}</div>
@@ -12,6 +13,6 @@
    <div class="l" ng-if="hp.c.shieldmul">+{{$r.fRPct(hp.c.shieldmul)}}</div>
    <div class="l" ng-if="hp.c.range">{{hp.c.range}} <u>KM</u></div>
    <div class="l" ng-if="hp.c.ammo">Ammo: {{$r.fCrd(hp.c.clip)}}/{{$r.fCrd(hp.c.ammo)}}</div>
-    <div class="r">{{hp.c.mass}} <u>T</u></div>
+    
  </div>
 </div>
--- a/app/views/_slot-internal.html
+++ b/app/views/_slot-internal.html
@@ -1,8 +1,8 @@
 <div class="sz" ng-bind="c.maxClass"></div>
 <div class="empty" ng-if="!c.c">EMPTY</div>
 <div ng-if="c.c">
-  <div class="l">{{c.c.name || lbl}}</div>
-  <div class="r">{{c.c.class}}{{c.c.rating}}</div>
+  <div class="l">{{c.c.class}}{{c.c.rating}} {{c.c.name || lbl}}</div>
+  <div class="r">{{c.c.mass || c.c.capacity || '0'}} <u>T</u></div>
  <div class="cb"></div>
  <div class="l" ng-if="c.c.optmass">Opt: {{c.c.optmass}} <u>T</u></div>
  <div class="l" ng-if="c.c.maxmass">Max: {{c.c.maxmass}} <u>T</u></div>
@@ -15,5 +15,4 @@
  <div class="l" ng-if="c.c.range">{{c.c.range}} <u>KM</u></div>
  <div class="l" ng-if="c.c.rangeRating">Range: {{c.c.rangeRating}}</div>
  <div class="l" ng-if="c.c.armouradd">+{{c.c.armouradd}} <u>Armour</u></div>
-  <div class="r cr">{{c.c.mass || c.c.capacity || '0'}} <u>T</u></div>
 </div>
--- a/app/views/page-outfit.html
+++ b/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>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "coriolis_shipyard",
-  "version": "0.6.2",
+  "version": "0.7.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/cmmcleod/coriolis"