UI tweaking for tables, cleaner layout

app/js/directives/directive-area-chart.js

@@ -10,8 +10,9 @@ angular.module('app').directive('areaChart', function () {
       width: '='
     },
     link: function(scope, element) {
-      var width = scope.width,
-          height = scope.height,
+      console.log(element[0].parentElement);
+      var width = element[0].parentElement.offsetWidth,
+          height = width * 0.6,
           series = scope.series,
           config = scope.config,
           labels = config.labels,

app/js/directives/directive-component-select.js

@@ -7,12 +7,13 @@ angular.module('app').directive('componentSelect', function () {
     for (var i = 0; i < opts.length; i++) {
       var o = opts[i];
       var id = o.id || (o.class + o.rating);  // Common components' ID is their class and rating
-      list.push('<li class="', o.name? 'lc' : 'c');
 
-      if(wrap && o.class != prevClass) {
-        list.push(' cl');
+      if(i > 0 && opts.length > 3 && o.class != prevClass && (o.rating != prevRating || o.mode)) {
+        list.push('<br/>');
       }
 
+      list.push('<li class="', o.name? 'lc' : 'c');
+
       if (cid == o.id) {
         list.push(' active');
       }
@@ -25,13 +26,11 @@ angular.module('app').directive('componentSelect', function () {
 
       list.push(o.class, o.rating);
 
-      if(o.mode) {
-        list.push('/' + o.mode);
-        if(o.missile) {
-          list.push(o.missile);
-        }
+      if(o.missile) {
+        list.push('/' + o.missile);
       }
 
+
       if(o.name) {
         list.push(' ' + o.name);
       }

app/less/app.less

@@ -29,6 +29,21 @@ body {
   margin: 0;
   padding: 0;
   font-family: @fStandard;
+
+}
+
+// iPads  Landscape
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+  body {
+    font-size: 0.9em;
+  }
+}
+
+// iPads Portrait
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
+  body {
+    font-size: 0.9em;
+  }
 }
 
 #main {

app/less/colors.less

@@ -14,7 +14,7 @@
 @warning-disabled: darken(@warning, @disabledDarken);
 
 // Background colors
-@bg: rgba(70,70,70,0.95);
+@bg: rgba(30,30,30,1);
 @bgBlack: rgba(0,0,0,0.9);
 @primary-bg: fadeout(darken(@primary, 47%), 15%);
 @secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background

app/less/comparison.less

@@ -3,6 +3,7 @@
   display: inline-block;
   text-align: left;
   border-collapse: collapse;
+  //font-size:0.85em;
 
   td {
     border: 1px solid @primary-disabled;
@@ -112,4 +113,5 @@
 
 #comp-tbl {
   margin: 1em auto;
+  font-size: 0.85em;
 }

app/less/list.less

@@ -1,11 +1,10 @@
 .list {
   overflow: hidden;
-  padding: 5px;
   cursor: default;
   font-size: 0.8em;
   min-width: 21em;
   text-align: left;
-
+  .user-select-none();
 
   .header {
     width: 100%;

app/less/outfit.less

@@ -2,6 +2,7 @@
 #outfit {
   width: 64em;
   margin: 0 auto;
+  .user-select-none();
 }
 
 #overview {

app/less/select.less

@@ -2,18 +2,20 @@
   color: @primary-disabled;
   position: absolute;
   left: -1px;
-  padding: 5px 0;
+  padding: 0.5em 0;
   width: 100%;
   margin: 0;
   max-height: 300px;
   overflow-y: auto;
+  overflow-x: hidden;
   background-color: @bg;
   border: 1px solid @primary;
   white-space: nowrap;
+  text-align: center;
 
   .select-group {
-    clear: both;
-    margin: 5px 0;
+    text-align: left;
+    margin: 0.5em 0;
     padding-left: 5px;
     border-top: 1px solid @primary-disabled;
     border-bottom: 1px solid @primary-disabled;
@@ -44,8 +46,8 @@
   @optionSpacing: 1.8em;
 
   .lc {
-    padding-left: 5px;
     line-height:@optionSpacing;
+    text-align: left;
   }
 
   .empty-c {
@@ -56,10 +58,9 @@
 
   .c {
     border:1px solid @primary-disabled;
-    display: block;
-    float:left;
-    padding: 0;
-    margin: 0.5em;
+    display: inline-block;
+    padding: 0.1em;
+    margin: 0.3em;
     width: 2em;
     line-height: @optionSpacing;
     text-align: center;
@@ -77,20 +78,21 @@
   }
 
   ul {
-    margin: 0;
-    margin-left: 1.5em;
+    display: inline-block;
+    text-align: left;
+    min-width: 15em;
+    margin: 0 auto;
     padding: 0;
     list-style: none;
-    overflow: hidden;
   }
 
   &.hardpoint {
     .c {
-      width: auto;
+      width: 4em;
       padding: 0.1em 0.5em;
     }
     ul {
-      margin-left: 0.5em;
+      width: 17em;
     }
   }
 

app/less/slot.less

@@ -20,7 +20,6 @@
   float: left;
   text-align: left;
   width: 21em;
-  min-height: 2.75em;
   font-size: 0.75em;
   margin-top: 0.5em;
   position: relative;
@@ -33,6 +32,7 @@
   color: @disabled;
 
   .details {
+    min-height: 2.5em;
     overflow: hidden;
     height: 100%;
     cursor: pointer;

app/views/page-comparison.html

@@ -37,7 +37,7 @@
 
 <table id="comp-tbl" comparison-table ng-click="handleClick($event)"></table>
 
-<div ng-repeat="f in facets | filter:{active:true}" ng-if="builds.length > 0" class="chart" bar-chart width="500" facet="f" data="builds">
+<div ng-repeat="f in facets | filter:{active:true}" ng-if="builds.length > 0" class="chart" bar-chart width="480" facet="f" data="builds">
   <h3 ng-click="sort(f.props[0])" >{{f.title}}</h3>
 </div>
 

app/views/page-outfit.html

@@ -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>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coriolis_shipyard",
-  "version": "0.7.0",
+  "version": "0.7.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/cmmcleod/coriolis"