Bumping version to 1.0.4

app/index.html

@@ -7,7 +7,7 @@
   <!-- Standard headers -->
   <meta name="description" content="A ship outfitting and comparison tool for Elite Dangerous">
   <meta name="mobile-web-app-capable" content="yes">
-  <meta name="viewport" content="width = device-width, initial-scale = 1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <link rel="manifest" href="/images/logo/manifest.json">
   <link rel="icon" sizes="152x152 192x192" type="image/png" href="/images/logo/192x192.png">
   <link rel="shortcut icon" href="/images/logo/favicon.ico">

app/js/controllers/controller-outfit.js

@@ -39,7 +39,7 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
   $scope.retroPredicate = 'netCost';
   $scope.costDesc = true;
   $scope.costPredicate = 'c.cost';
-  $scope.costTab = 'retrofit';
+  $scope.costTab = Persist.getCostTab() || 'costs';
 
   if ($scope.savedCode) {
     Serializer.toShip(retrofitShip, $scope.savedCode);  // Populate components from last save
@@ -351,6 +351,11 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
     $scope.retrofitTotal = total;
   }
 
+  $scope.updateCostTab = function(tab) {
+    Persist.setCostTab(tab);
+    $scope.costTab = tab;
+  };
+
   // Hide any open menu/slot/etc if the background is clicked
   $scope.$on('close', function() {
     $scope.selectedSlot = null;

app/js/service-persist.js

@@ -204,6 +204,27 @@ angular.module('app').service('Persist', ['$window', 'lodash', function($window,
     return null;
   };
 
+  /**
+   * Persist selected cost tab
+   * @param {number} val Discount value/amount
+   */
+  this.setCostTab = function(tabName) {
+    if (this.lsEnabled) {
+      return localStorage.setItem('costTab', tabName);
+    }
+  };
+
+  /**
+   * Get the saved  discount
+   * @return {number} val Discount value/amount
+   */
+  this.getCostTab = function() {
+    if (this.lsEnabled) {
+      return localStorage.getItem('costTab');
+    }
+    return null;
+  };
+
   /**
    * Retrieve the last router state from local storage
    * @param {object} state State object containing state name and params

app/less/app.less

@@ -22,6 +22,7 @@
 
 html, body {
   height: 100%;
+  width: 100%;
   text-rendering: optimizeLegibility;
 }
 
@@ -32,6 +33,8 @@ body {
   padding: 0;
   font-family: @fStandard;
   letter-spacing: 0.05em;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
 }
 
 div, a, li {
@@ -40,7 +43,9 @@ div, a, li {
 
 #main {
   margin: 0;
-  padding: 0.5em 0;
+  padding: 0.5em 0.5em;
+  width: 100%;
+  box-sizing: border-box;
   min-height: 90%;
   clear: both;
   text-align: center;

app/less/header.less

@@ -84,6 +84,19 @@ header {
     -webkit-overflow-scrolling: touch;
     max-height: 500px;
 
+    &::-webkit-scrollbar {
+      width: 0.5em;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: @warning-disabled;
+    }
+
+
     .smallTablet({
       max-height: 400px;
       left: 0;

app/less/outfit.less

@@ -59,7 +59,7 @@
   input {
     background: none;
     line-height: 1.3em;
-    width: 20em;
+    width: 15em;
     font-size: 0.9em;
     box-sizing: border-box;
     display: inline-block;
@@ -72,7 +72,7 @@
     }
 
     .largePhone({
-      width: 70%;
+      width: 60%;
     });
 
     .medPhone({
@@ -99,6 +99,12 @@
   text-overflow: ellipsis;
 }
 
+.optional-hide {
+  .largePhone({
+    display: none;
+  });
+}
+
 table.total {
   width: 100%;
 
@@ -115,6 +121,7 @@ table.total {
 
 .tabs {
   width: 100%;
+  box-sizing: border-box;
   margin-bottom: 1px;
 
   &, th {
@@ -160,6 +167,12 @@ table.total {
 
   .smallTablet({
     width: 50%;
+
+    .axis.x {
+      g.tick:nth-child(2n + 1) text {
+        display: none;
+      }
+    }
   });
 
   .largePhone({
@@ -183,14 +196,6 @@ table.total {
   &.third {
     width: 33%;
 
-    .smallTablet({
-      .axis.x {
-        g.tick:nth-child(2n + 1) text {
-          display: none;
-        }
-      }
-    });
-
     .largePhone({
       width: 100% !important;
     });

app/less/select.less

@@ -1,12 +1,25 @@
 select {
   .border-radius(0);
+  cursor: pointer;
   background: none;
   color: @primary-disabled;
-  border: 1px solid @primary-disabled;
-  outline: none;
   font-family: @fStandard;
   font-size: 1em;
   background-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0.1em 0.5em;
+  outline:none;
+  border: 0;
+
+  &:focus {
+    outline:none;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
 }
 
 .select {
@@ -26,6 +39,19 @@ select {
   white-space: nowrap;
   text-align: center;
 
+  &::-webkit-scrollbar {
+    width: 0.5em;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-left: 1px solid @primary;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: @primary-disabled;
+  }
+
   .select-group {
     line-height: 1.5em;
     text-align: left;

app/views/page-outfit.html

@@ -33,14 +33,15 @@
           <th rowspan="2">DPS</th>
           <th rowspan="2">Armour</th>
           <th rowspan="2">Shields</th>
-          <th colspan="2">Mass</th>
+          <th colspan="3">Mass</th>
           <th rowspan="2">Cargo</th>
           <th rowspan="2">Fuel</th>
           <th colspan="3">Jump Range</th>
           <th colspan="3">Total Range</th>
         </tr>
         <tr>
-          <th class="lft">Unladen</th>
+          <th class="lft">Hull</th>
+          <th>Unladen</th>
           <th>Laden</th>
           <th class="lft">Max</th>
           <th>Full Tank</th>
@@ -59,6 +60,7 @@
           <td>{{fRound(ship.totalDps)}}</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 && ship.shieldStrength > 0">({{fRPct(ship.shieldMultiplier)}})</span></td>
+          <td>{{ship.mass}} <u>T</u></td>
           <td>{{fRound(ship.unladenMass)}} <u>T</u></td>
           <td>{{fRound(ship.ladenMass)}} <u>T</u></td>
           <td>{{fRound(ship.cargoCapacity)}} <u>T</u></td>
@@ -242,8 +244,8 @@
     <table class="tabs">
       <thead>
         <tr>
-          <th style="width:50%" ng-class="{active: costTab == 'retrofit'}" ng-click="costTab = 'retrofit'">Retrofit Costs</th>
+          <th style="width:50%" ng-class="{active: costTab == 'retrofit'}" ng-click="updateCostTab('retrofit')">Retrofit Costs</th>
-          <th style="width:50%" ng-class="{active: costTab == 'costs'}" ng-click="costTab = 'costs'">Costs</th>
+          <th style="width:50%" ng-class="{active: costTab == 'costs'}" ng-click="updateCostTab('costs')">Costs</th>
         </tr>
       </thead>
     </table>
@@ -254,10 +256,8 @@
           <tr class="main">
             <th colspan="2" class="sortable le" ng-click="sortCost(cName)">
               Component
-              <div class="r">
+              <u class="optional-hide" ng-if="discounts.ship < 1">[Ship {{fRPct(1 - discounts.ship)}} off]</u>
-                <u ng-if="discounts.ship < 1">[Ship {{fRPct(1 - discounts.ship)}} off]</u>
+              <u class="optional-hide" ng-if="discounts.components < 1">[Components {{fRPct(1 - discounts.components)}} off]</u>
-                <u ng-if="discounts.components < 1">[Components {{fRPct(1 - discounts.components)}} off]</u>
-              </div>
             </th>
             <th class="sortable le" ng-click="sortCost('discountedCost')">Credits</th>
           </tr>
@@ -283,23 +283,20 @@
     </div>
 
     <div ng-if="costTab == 'retrofit'">
-      <div style="overflow-x: auto;-webkit-overflow-scrolling: touch;">
+      <div class="scroll-x">
         <table style="width:100%">
           <thead>
             <tr class="main">
               <th colspan="2" class="sortable le" ng-click="sortRetrofit('sellName')">Sell</th>
               <th colspan="2" class="sortable le" ng-click="sortRetrofit('buyName')">Buy</th>
               <th class="sortable le" ng-click="sortRetrofit('netCost')">
-                Net Cost
+                Net Cost <u class="optional-hide" ng-if="discounts.components < 1">[{{fRPct(1 - discounts.components)}} off]</u>
-                <div class="r">
-                  <u ng-if="discounts.components < 1">[{{fRPct(1 - discounts.components)}} off]</u>
-                </div>
               </th>
             </tr>
           </thead>
           <tbody>
             <tr ng-if="!retrofitList || retrofitList.length == 0">
-              <td colspan="5">No Retrofitting changes</td>
+              <td colspan="5" style="padding: 3em 0;">No Retrofitting changes</td>
             </tr>
             <tr class="highlight" ng-repeat="item in retrofitList | orderBy:retroPredicate:retroDesc">
               <td style="width:1em;">{{item.sellClassRating}}</td>
@@ -314,14 +311,16 @@
       <table class="total">
         <tr class="ri">
           <td class="lbl">Cost</td>
-          <td ng-class="retrofitTotal > 0 ? 'warning' : 'secondary-disabled'">{{fCrd(retrofitTotal)}} <u>CR</u></td>
+          <td colspan="2" ng-class="retrofitTotal > 0 ? 'warning' : 'secondary-disabled'">{{fCrd(retrofitTotal)}} <u>CR</u></td>
         </tr>
         <tr class="ri">
-          <td class="lbl">Retrofitting from</td>
+          <td class="lbl">Retrofit from</td>
-          <td style="padding:0;">
+          <td class="cen" style="border-right:none;width: 1em;"><u class="primary-disabled">&#9662;</u></td>
-            <select style="width: 100%; border: none;" ng-model="$parent.retrofitBuild" ng-change="setRetrofitBase()" ng-options="name as name for (name, build) in allBuilds[ship.id]">
+          <td style="border-left:none;padding:0;">
+            <select style="width: 100%;padding: 0" ng-model="$parent.retrofitBuild" ng-change="setRetrofitBase()" ng-options="name as name for (name, build) in allBuilds[ship.id]">
               <option value="">Stock / Standard</option>
             </select>
+
           </td>
         </tr>
       </table>

bower.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "d3": "~3.5.5",
     "ng-lodash": "~0.2.0",
-    "ui-router-extras": "~0.0.13",
+    "ui-router-extras": "0.0.13",
     "angular-ui-router": "^0.2.15",
     "d3-tip": "~0.6.7",
     "ng-sortable": "~1.2.1",

data/components/internal/internal_fuel_tank.json

@@ -1,52 +1,12 @@
 {
   "Fuel Tank": [
-    {
+    { "id": "f1", "grp": "ft", "class": 1, "rating": "C", "cost": 1000, "capacity": 2 },
-      "id": "f1",
+    { "id": "f2", "grp": "ft", "class": 2, "rating": "C", "cost": 3750, "capacity": 4 },
-      "grp": "ft",
+    { "id": "f3", "grp": "ft", "class": 3, "rating": "C", "cost": 7063, "capacity": 8 },
-      "class": 1,
+    { "id": "f4", "grp": "ft", "class": 4, "rating": "C", "cost": 24734, "capacity": 16 },
-      "rating": "C",
+    { "id": "f5", "grp": "ft", "class": 5, "rating": "C", "cost": 97754, "capacity": 32 },
-      "cost": 1000,
+    { "id": "f6", "grp": "ft", "class": 6, "rating": "C", "cost": 341577, "capacity": 64 },
-      "capacity": 2
+    { "id": "f7", "grp": "ft", "class": 7, "rating": "C", "cost": 1780900, "capacity": 128 },
-    },
+    { "id": "f8", "grp": "ft", "class": 8, "rating": "C", "cost": 5428400, "capacity": 256 }
-    {
-      "id": "f2",
-      "grp": "ft",
-      "class": 2,
-      "rating": "C",
-      "cost": 3750,
-      "capacity": 4
-    },
-    {
-      "id": "f3",
-      "grp": "ft",
-      "class": 3,
-      "rating": "C",
-      "cost": 7063,
-      "capacity": 8
-    },
-    {
-      "id": "f4",
-      "grp": "ft",
-      "class": 4,
-      "rating": "C",
-      "cost": 24734,
-      "capacity": 16
-    },
-    {
-      "id": "f5",
-      "grp": "ft",
-      "class": 5,
-      "rating": "C",
-      "cost": 97754,
-      "capacity": 32
-    },
-    {
-      "id": "f6",
-      "grp": "ft",
-      "class": 6,
-      "rating": "C",
-      "cost": 341577,
-      "capacity": 64
-    }
   ]
 }

package.json

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