UI tweaking for tables, cleaner layout

This commit is contained in:
Colin McLeod
2015-05-25 22:49:59 -07:00
parent c74a5750b9
commit c75b13aaef
12 changed files with 67 additions and 55 deletions

View File

@@ -60,9 +60,9 @@
<div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}">
<div class="details">
<div class="sz"><span>8</span></div>
<div class="l">Bulkheads</div><div class="r">{{ship.bulkheads.c.class}}{{ship.bulkheads.c.rating}}</div>
<div class="l">Bulkheads</div>
<div class="r">{{ship.bulkheads.c.mass}} <u>T</u></div>
<div class="cl l">{{ship.bulkheads.c.name}}</div>
<div class="r cr">{{ship.bulkheads.c.mass}} <u>T</u></div>
</div>
<div class="select" ng-if="selectedSlot==ship.bulkheads" ng-click="select('b',ship.bulkheads,$event)"><ul>
<li class="lc" ng-class="{active: ship.bulkheads.id=='0'}" cpid="0">Lightweight Alloy</li>
@@ -75,80 +75,73 @@
<div class="slot" ng-click="selectSlot($event, pp)" ng-class="{selected: selectedSlot==pp}">
<div class="details">
<div class="sz">{{::pp.maxClass}}</div>
<div class="l">Power Plant</div>
<div class="r">{{pp.id}}</div>
<div class="l">{{pp.id}} Power Plant</div>
<div class="r">{{pp.c.mass}} <u>T</u></div>
<div class="cb"></div>
<div class="l">Eff: {{pp.c.eff}}</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>
<div class="slot" ng-click="selectSlot($event, th)" ng-class="{selected: selectedSlot==th}">
<div class="details">
<div class="sz">{{::th.maxClass}}</div>
<div class="l">Thrusters</div>
<div class="r">{{th.id}}</div>
<div class="l">{{th.id}} Thrusters</div>
<div class="r">{{th.c.mass}} <u>T</u></div>
<div class="cb"></div>
<div class="l">Opt: {{th.c.optmass}} <u>T</u></div>
<div class="l">Max: {{th.c.maxmass}} <u>T</u></div>
<div class="r">{{th.c.mass}} <u>T</u></div>
</div>
<div component-select class="select" s="th" mass="ship.unladenMass" wrap="true" opts="availCS.common[1]" ng-if="selectedSlot==th" ng-click="select('c',th,$event)"></div>
</div>
<div class="slot" ng-click="selectSlot($event, fsd)" ng-class="{selected: selectedSlot==fsd}">
<div class="details">
<div class="sz">{{::fsd.maxClass}}</div>
<div class="l">Frame Shift Drive</div>
<div class="r">{{fsd.id}}</div>
<div class="l">{{fsd.id}} Frame Shift Drive</div>
<div class="r cr">{{fsd.c.mass}} <u>T</u></div>
<div class="cb"></div>
<div class="l">Opt: {{fsd.c.optmass}} <u>T</u></div>
<div class="l">Max Fuel: {{fsd.c.maxfuel}} <u>T</u></div>
<div class="r cr">{{fsd.c.mass}} <u>T</u></div>
</div>
<div component-select class="select" s="fsd" opts="availCS.common[2]" ng-if="selectedSlot==fsd" ng-click="select('c',fsd,$event)"></div>
</div>
<div class="slot" ng-click="selectSlot($event, ls)" ng-class="{selected: selectedSlot==ls}">
<div class="details">
<div class="sz">{{::ls.maxClass}}</div>
<div class="l">Life Support</div>
<div class="r">{{ls.id}}</div>
<div class="l">{{ls.id}} Life Support</div>
<div class="r">{{ls.c.mass}} <u>T</u></div>
<div class="cb"></div>
<div class="l">Time: {{fTime(ls.c.time)}}</div>
<div class="r cr">{{ls.c.mass}} <u>T</u></div>
</div>
<div component-select class="select" s="ls" opts="availCS.common[3]" ng-if="selectedSlot==ls" ng-click="select('c',ls,$event)"></div>
</div>
<div class="slot" ng-click="selectSlot($event, pd)" ng-class="{selected: selectedSlot==pd}">
<div class="details">
<div class="sz">{{::pd.maxClass}}</div>
<div class="l">Power Distributor</div>
<div class="r">{{pd.id}}</div>
<div class="l">{{pd.id}} Power Distributor</div>
<div class="r">{{pd.c.mass}} <u>T</u></div>
<div class="cb"></div>
<div class="l">Sys: {{pd.c.weaponcapacity}} <u>Mj</u> / {{pd.c.weaponrecharge}} <u>MW</u></div>
<div class="l">Wep: {{pd.c.systemcapacity}} <u>Mj</u> / {{pd.c.systemrecharge}} <u>MW</u></div>
<div class="l">Eng: {{pd.c.enginecapacity}} <u>Mj</u> / {{pd.c.enginerecharge}} <u>MW</u></div>
<div class="r cr">{{pd.c.mass}} <u>T</u></div>
</div>
<div component-select class="select" s="pd" opts="availCS.common[4]" ng-if="selectedSlot==pd" ng-click="select('c',pd,$event)"></div>
</div>
<div class="slot" ng-click="selectSlot($event, ss)" ng-class="{selected: selectedSlot==ss}">
<div class="details">
<div class="sz">{{::ss.maxClass}}</div>
<div class="l">Sensors</div>
<div class="r">{{ss.id}}</div>
<div class="l">{{ss.id}} Sensors</div>
<div class="r">{{ss.c.mass}} <u>T</u></div>
<div class="cb"></div>
<div class="l">{{ss.c.range}} <u>KM</u></div>
<div class="r cr">{{ss.c.mass}} <u>T</u></div>
</div>
<div component-select class="select" s="ss" opts="availCS.common[5]" ng-if="selectedSlot==ss" ng-click="select('c',ss,$event)"></div>
</div>
<div class="slot" ng-click="selectSlot($event, ft)" ng-class="{selected: selectedSlot==ft}">
<div class="details">
<div class="sz">{{::ft.maxClass}}</div>
<div class="l">Fuel Tank</div>
<div class="r">{{ft.id}}</div>
<div class="r cr">{{ft.c.capacity}} <u>T</u></div>
<div class="l">{{ft.id}} Fuel Tank</div>
<div class="r">{{ft.c.capacity}} <u>T</u></div>
</div>
<div component-select class="select" s="ft" opts="availCS.common[6]" ng-if="selectedSlot==ft" ng-click="select('c',ft,$event)"></div>
</div>
@@ -209,10 +202,10 @@
</table>
</div>
<div class="list l">
<div class="list l" style="width: 37em; margin: 0 0.5em;">
<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 class="cen">
<div class="chart" area-chart config="jrChart" series="jrSeries"></div>
</div>
</div>