Responsive tweaks and refactoring

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

@@ -19,7 +19,7 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
           dragging = false,
           // Define Axes
           xAxis = d3.svg.axis().outerTickSize(0).orient("bottom").tickFormat(d3.format('.2r')),
-          yAxis = d3.svg.axis().outerTickSize(0).orient("left").tickFormat(fmt),
+          yAxis = d3.svg.axis().ticks(6).outerTickSize(0).orient("left").tickFormat(fmt),
           x = d3.scale.linear(),
           y = d3.scale.linear();
 
@@ -78,7 +78,7 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
 
       function render() {
         var width = element[0].parentElement.offsetWidth,
-            height = width * 0.6,
+            height = width * 0.5,
             w = width - margin.left - margin.right,
             h = height - margin.top - margin.bottom,
             data = [];

app/js/directives/directive-slider.js

@@ -50,7 +50,7 @@ angular.module('app').directive('slider', ['$window', function ($window) {
             .scale(x)
             .orient("bottom")
             .tickFormat(function(d) { return d + unit; })
-            .ticks(5)
+            .tickValues([0, scope.max / 4, scope.max / 2, (3 * scope.max) / 4, scope.max])
             .tickSize(0)
             .tickPadding(12))
           .select(".domain");

app/less/app.less

@@ -66,6 +66,14 @@ div, a, li {
   clear: both;
 }
 
+.ri {
+  text-align: right;
+}
+
+.le {
+  text-align: left;
+}
+
 .cen {
   text-align: center;
 }

app/less/buttons.less

@@ -6,7 +6,7 @@ button {
   }
   border: none;
   font-family: @fStandard;
-
+  vertical-align: middle;
   padding: 0.5em;
   cursor: pointer;
   background: none;

app/less/charts.less

@@ -13,7 +13,7 @@
     width: 50%;
   });
 
-  .smallTablet({
+  .largePhone({
     width: 100%;
   });
 

app/less/colors.less

@@ -37,11 +37,26 @@
   fill: @primary;
 }
 
+.primary-bg {
+  color: @primary-bg;
+  fill: @primary-bg;
+}
+
 .primary-disabled {
   color: @primary-disabled;
   fill: @primary-disabled;
 }
 
+.secondary {
+  color: @secondary;
+  fill: @secondary;
+}
+
+.secondary-disabled {
+  color: @secondary-disabled;
+  fill: @secondary-disabled;
+}
+
 .warning {
   color: @warning;
   fill: @warning;

app/less/comparison.less

@@ -4,29 +4,41 @@
   text-align: left;
   border-collapse: collapse;
   text-transform: uppercase;
-  font-size: 0.9em;
+  font-size: 0.8em;
 
   td {
     border: 1px solid @primary-disabled;
     padding: 0;
 
     h3 {
+      font-size: 1.1em;
       margin: 0 1em;
       line-height: 2em;
       display: inline-block;
     }
 
     .tablet({
-      font-size: 0.8em;
+      font-size: 0.9em;
     });
   }
 
   input {
+    background: none;
+    line-height: 1.3em;
+    width: 20em;
     height: 100%;
-    width: 100%;
+    display: inline-block;
-    box-sizing: border-box;
+    padding: 0.3em;
+    vertical-align: middle;
     border: none;
-    padding-left: 1em;
+    border-right: 1px solid @primary-disabled;
+
+    .largePhone({
+      width: 100%;
+      height: 2em;
+      border-right: none;
+      border-bottom: 1px solid @primary-disabled;
+    });
   }
 
   .head {
@@ -57,7 +69,7 @@
   cursor: pointer;
   background-color: @primary-bg;
   margin: 0;
-  padding: 0.5em 1em;
+  padding: 0.5em 0.5em;
   list-style: none;
   white-space: nowrap;
   color: @disabled;
@@ -124,6 +136,10 @@
   white-space: nowrap;
   font-size: 0.8em;
 
+  td {
+    padding: 0 0.5em;
+  }
+
   .tablet({
     font-size: 0.7em;
   });

app/less/modal.less

@@ -16,8 +16,7 @@
   left:50%; top:50%;
   transform:translate(-50%,-50%);
   -webkit-transform:translate(-50%,-50%);
-  width: 75%;
+  width: 800px;
-  max-width: 1000px;
   max-height: 100%;
   padding: 2em;
   background-color: @bgBlack;
@@ -27,6 +26,10 @@
   -webkit-overflow-scrolling: touch;
 
   .smallTablet({
+    width: 90%;
+  });
+
+  .largePhone({
     padding: 1em;
     width: 100%;
   });

app/less/outfit.less

@@ -3,22 +3,29 @@
   max-width: 1600px;
   margin: 0 auto;
   .user-select-none();
+  font-size: 0.9em;
 
   .tablet({
+    font-size: 0.8em;
     width: 100%;
   });
+
+  .smallTablet({
+    font-size: 1em;
+  });
+
+  table {
+    white-space: nowrap;
+  }
 }
 
 #overview {
-  .tablet({
-      font-size: 0.9em;
-  });
-
   h1 {
     margin: 0;
     float: left;
   }
   overflow: hidden;
+  margin: 0.5em;
 }
 
 #summary {
@@ -27,48 +34,77 @@
   box-sizing: border-box;
   width: 100%;
   padding: 0.5em 0.2em;
+  font-size: 0.9em;
 
   #summaryTable {
     .user-select-none();
     width: 100%;
-    white-space: nowrap;
     border-collapse: collapse;
-    font-size: 0.8em;
-
   }
 }
 
 #build {
   float: right;
   line-height: 2em;
-  font-size: 0.8em;
+  text-align: left;
 
   input {
     background: none;
-    line-height: 1.5em;
+    line-height: 1.3em;
-    font-size: 0.8em;
     width: 20em;
+    font-size: 0.9em;
     box-sizing: border-box;
     display: inline-block;
-    padding: 0.5em;
+    padding: 0.3em;
+    vertical-align: middle;
 
     &:focus {
       border: 1px solid @primary;
       color: @primary;
     }
-  }
+
-  button {
+    .largePhone({
-    .smallPhone({
+      width: 70%;
-      padding: 0.25em;
+    });
+
+    .medPhone({
+      width: 100%;
     });
   }
 
   .largePhone({
     float: left;
     clear: left;
+    width: 100%;
   });
 }
 
+.sortable {
+  &:hover {
+    color: @primary;
+  }
+}
+
+.shorten {
+  overflow: hidden;
+  max-width: 8em;
+  text-overflow: ellipsis;
+}
+
+table.total {
+  width: 100%;
+
+  &, td {
+    border-collapse: collapse;
+    border: 1px solid @primary-disabled;
+  }
+  .lbl {
+    text-transform: uppercase;
+    color: @primary-bg;
+    background-color: @primary-disabled;
+  }
+}
+
 .group {
   width: 25%;
   padding: 0.5em 0.2em;
@@ -78,20 +114,27 @@
   .user-select-none();
   cursor: default;
 
+  [ng-click] {
+    cursor: pointer;
+  }
+
+
   h1 {
     font-family: @fStandard;
     color: @bgBlack;
     background-color: @primary-disabled;
     text-transform: uppercase;
     margin: 0;
+    padding-top: 2px;
     font-size: 1em;
     line-height: 1.3em;
     font-weight: normal;
   }
 
-  .tablet({
+  tbody tr:hover {
-    font-size: 0.9em;
+    background-color: @warning-bg;
-  });
+  }
+
 
   .smallTablet({
     width: 50%;
@@ -104,9 +147,15 @@
   &.dbl {
     width: 50%;
 
+    .tablet({
+      td {
+        line-height: 2em;
+      }
+    });
+
     .smallTablet({
+      overflow-x: auto;
       width: 100% !important;
     });
   }
-
 }

app/less/slot.less

@@ -3,7 +3,6 @@
   float: left;
   text-align: left;
   width: 100%;
-  font-size: 0.85em;
   margin-top: 0.25em;
   position: relative;
   z-index: 0;
@@ -16,7 +15,7 @@
   fill: @fg;
 
   .details {
-    min-height: 2.5em;
+    min-height: 2.7em;
     padding: 0.25em 0;
     box-sizing: border-box;
     overflow: hidden;
@@ -48,7 +47,7 @@
   }
 
   .empty {
-    font-size: 1.5em;
+    font-size: 1.3em;
     color: lighten(@primary-bg, 12%);
     text-align: center;
     letter-spacing: 0.1em;

app/less/table.less

@@ -14,7 +14,7 @@ thead {
   color: @bgBlack;
   background-color: @primary-disabled;
   text-transform: uppercase;
-  line-height: 1.4em;
+  line-height: 1.3em;
   .user-select-none();
 
   .main th {
@@ -26,8 +26,9 @@ thead {
   }
 
   th {
+    vertical-align: middle;
     font-weight: normal;
-    padding: 0 0.75em;
+    padding: 2px 0.4em 0; // Padding top for font vertical alignment
 
     &.prop {
       cursor: pointer;
@@ -50,15 +51,13 @@ tbody tr {
     text-align: right;
 
     &:hover {
-      color: @fg;
-      fill: @warning;
       background-color: @warning-bg;
     }
   }
 
   td {
     line-height: 1.4em;
-    padding: 0 0.7em;
+    padding: 0 0.3em;
   }
 
 }

app/views/_header.html

@@ -18,7 +18,7 @@
     <div class="menu-header" ng-class="{selected: openedMenu=='b', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'b')">
       <svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#hammer"></use></svg><span class="menu-item-label"> Builds</span>
     </div>
-    <div class="menu-list" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
+    <div class="menu-list dbl" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
       <ul ng-repeat="shipId in buildsList">
         {{ships[shipId].properties.name}}
         <li ng-repeat="(name, build) in allBuilds[shipId]">

app/views/_slot-hardpoint.html

@@ -1,7 +1,7 @@
 <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.class}}{{hp.c.rating}}<span ng-if="hp.c.mode">/{{hp.c.mode}}{{hp.c.missile}}</span> {{hp.c.name || lbl}}</div>
+  {{hp.c.class}}{{hp.c.rating}}<span ng-if="hp.c.mode">/{{hp.c.mode}}{{hp.c.missile}}</span> {{hp.c.name || lbl}}
   <div class="r">{{hp.c.mass}} <u>T</u></div>
   <div class="cb">
     <div class="l" ng-if="hp.c.damage">Damage: {{hp.c.damage}} <span ng-if="hp.c.ssdam">({{$r.fCrd(hp.c.ssdam)}} <u>Mj</u>)</span></div>

app/views/_slot-internal.html

@@ -1,7 +1,7 @@
 <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.class}}{{c.c.rating}} {{c.c.name || lbl}}</div>
+  {{c.c.class}}{{c.c.rating}} {{c.c.name || lbl}}
   <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>
@@ -10,9 +10,9 @@
   <div class="l" ng-if="c.c.rate">Rate: {{c.c.rate}} <u>Kg/s</u>&nbsp;&nbsp;&nbsp;Refuel Time: {{$r.fTime(fuel * 1000 / c.c.rate)}}</div>
   <div class="l" ng-if="c.c.ammo">Ammo: {{c.c.ammo}}</div>
   <div class="l" ng-if="c.c.cells">Cells: {{c.c.cells}}</div>
-  <div class="l" ng-if="c.c.recharge">Recharge: {{c.c.recharge}} <u>Mj</u></div>
+  <div class="l" ng-if="c.c.recharge">Recharge: {{c.c.recharge}} <u>MJ</u></div>
   <div class="l" ng-if="c.c.repair">Repair: {{c.c.repair}}</div>
-  <div class="l" ng-if="c.c.range">Range {{c.c.range}} <u>Km</u></div>
+  <div class="l" ng-if="c.c.range">Range {{c.c.range}} <u>km</u></div>
   <div class="l" ng-if="c.c.time">Time: {{$r.fTime(c.c.time)}}</div>
   <div class="l" ng-if="c.c.maximum">Max: {{(c.c.maximum)}}</div>
   <div class="l" ng-if="c.c.rangeLS">{{c.c.rangeLS}} <u>LS</u></div>

app/views/page-comparison.html

@@ -4,8 +4,6 @@
     <td class="head">Comparison</td>
     <td>
       <input ng-model="name" ng-change="nameChange()" placeholder="Enter Comparison Name"  maxlength="50" />
-    </td>
-    <td>
       <button ng-click="save()" ng-disabled="!name || name == 'all' || saved">
         <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="button-lbl"> Save</span>
       </button>
@@ -23,17 +21,17 @@
   </tr>
   <tr ng-show="!compareMode">
     <td class="head">Comparison</td>
-    <td colspan="2">
+    <td>
       <h3 ng-bind="name"></h3>
       <button class="r" ui-sref="modal.import({obj:importObj})"><svg class="icon lg "><use xlink:href="#download"></use></svg> Import Builds</button>
     </td>
   </tr>
   <tr>
     <td class="head">Compare</td>
-    <td colspan="2">
+    <td>
       <ul id="facet-container" as-sortable="facetSortOpts" ng-model="facets" class="sortable" update="tblUpdate">
         <li ng-repeat="(i,f) in facets" as-sortable-item class="facet" ng-class="{active: f.active}" ng-click="toggleFacet(i)">
-          <div as-sortable-item-handle><span ng-bind="f.title"></span></div>
+          <div as-sortable-item-handle>↔ <span ng-bind="f.title"></span></div>
         </li>
       </ul>
     </td>

app/views/page-shipyard.html

@@ -4,6 +4,6 @@
     <div class="subtitle">
       <small ng-bind="s.properties.manufacturer"></small>
     </div>
-    {{fCrd(s.properties.cost)}} <u>CR</u>
+    {{fCrd(s.retailCost)}} <u>CR</u>
   </a>
 </div>