Further improvement to size ratio

app/js/app.js

@@ -51,7 +51,7 @@ function($rootScope, $location, $window, $doc, $state, $translate, localeFormat,
   $rootScope.discounts = { opts: Discounts };
   $rootScope.STATUS = ['', 'disabled', 'off', 'on'];
   $rootScope.STATUS_CLASS = ['', 'disabled', 'warning', 'secondary-disabled'];
-  $rootScope.sizeRatio =  1;
+  $rootScope.sizeRatio = Persist.getSizeRatio();
   $rootScope.title = 'Coriolis';
 
   $rootScope.changeLanguage = function() {

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

@@ -11,7 +11,7 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop
     for (var i = 0; i < words.length; i++) {
       var tspan = el.append('tspan').text(words[i]);
       if (i > 0) {
-        tspan.attr('x', -9).attr('dy', 12);
+        tspan.attr('x', -9).attr('dy', '1em');
       }
     }
   }
@@ -71,7 +71,7 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop
         var data = scope.data,
             width = element[0].offsetWidth,
             w = width - margin.left - margin.right,
-            height = 45 + (30 * data.length),
+            height = 45 + (30 * data.length * $rootScope.sizeRatio),
             h = height - margin.top - margin.bottom,
             maxVal = d3.max(data, function(d) { return d3.max(properties, function(p) {return d[p]; }); });
 

app/js/directives/directive-header.js

@@ -1,4 +1,4 @@
-angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $rootScope, $state, Persist, Serializer, ships) {
+angular.module('app').directive('shipyardHeader', ['lodash', '$window', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $window, $rootScope, $state, Persist, Serializer, ships) {
 
 
   return {
@@ -84,6 +84,7 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta
       scope.textSizeChange = function(size) {
         $rootScope.sizeRatio = size;
         document.getElementById('main').style.fontSize = size + 'em';
+        Persist.setSizeRatio(size);
         win.triggerHandler('resize');
       };
 

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

@@ -51,7 +51,7 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
           .text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')');
 
       // Create and Add tooltip
-      var tipWidth = (Math.max(labels.yAxis.unit.length, labels.xAxis.unit.length) * 1.25) + 2;
+      var tipWidth = (Math.max(labels.yAxis.unit.length, labels.xAxis.unit.length) * 1.25) + 2.5;
       var tips = vis.append('g').style('display', 'none');
 
       var background = vis.append('rect') // Background to capture hover/drag
@@ -83,7 +83,7 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
 
       function render() {
         var width = element[0].parentElement.offsetWidth,
-            height = width * 0.5,
+            height = width * 0.5 * $rootScope.sizeRatio,
             xMax = seriesConfig.xMax,
             xMin = seriesConfig.xMin,
             yMax = seriesConfig.yMax,

app/js/directives/directive-power-bands.js

@@ -1,8 +1,4 @@
-<<<<<<< HEAD
 angular.module('app').directive('powerBands', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) {
-=======
-angular.module('app').directive('powerBands', ['$window', '$rootScope', function($window, $rootScope) {
->>>>>>> Another improvement to font-size adjustments
   return {
     restrict: 'A',
     scope: {
@@ -44,6 +40,7 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function
       // Create Y Axis SVG Elements
       vis.append('g').attr('class', 'watt axis');
       vis.append('g').attr('class', 'pct axis');
+
       var retLbl = vis.append('text').attr('x', -35).attr('y', 16).attr('class', 'primary upp');
       var depLbl = vis.append('text').attr('x', -35).attr('y', barHeight + 18).attr('class', 'primary upp');
       var retVal = vis.append('text').attr('y', 16);
@@ -81,7 +78,7 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function
       }
 
       function render() {
-        var size = $rootScope.sizeRatio;
+        var size = $rootScope.sizeRatio,
             mTop = Math.round(25 * size),
             mRight = Math.round(130 * size),
             mBottom = Math.round(25 * size),
@@ -110,7 +107,6 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function
         vis.selectAll('.watt.axis').call(wattAxis);
         vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis);
 
-<<<<<<< HEAD
         for (var b = 0, l = bands.length; b < l; b++) {
           if (bands[b].retSelected) {
             retractedSum += bands[b].retracted + bands[b].retOnly;
@@ -173,16 +169,16 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function
 
       }
 
-      function updateLabel(lbl, width, y, selected, sum, available) {
+      function updateLabel(lbl, width, y, selected, sum, avail) {
         lbl
           .attr('x', width + 5 )
           .attr('y', y)
-          .attr('class', getClass(selected, sum, available))
+          .attr('class', getClass(selected, sum, avail))
-          .text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / available)) + ')');
+          .text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / avail)) + ')');
       }
 
-      function getClass(selected, sum, available) {
+      function getClass(selected, sum, avail) {
-        return selected ? 'secondary' : (sum > available) ? 'warning' : 'primary';
+        return selected ? 'secondary' : (sum > avail) ? 'warning' : 'primary';
       }
 
       function bandText(val, index) {

app/js/directives/directive-slider.js

@@ -21,7 +21,7 @@ angular.module('app').directive('slider', ['$window', function($window) {
           vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'),
           xAxisContainer = vis.append('g').attr('class', 'x slider-axis').attr('transform', 'translate(0,' + h / 2 + ')'),
           x = d3.scale.linear(),
-          xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d) { return d + unit; }).tickSize(0).tickPadding(12);
+          xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d) { return d + unit; }).tickSize(0).tickPadding(12),
           slider = vis.append('g').attr('class', 'slider'),
           filled = slider.append('path').attr('class', 'filled').attr('transform', 'translate(0,' + h / 2 + ')'),
           brush = d3.svg.brush().x(x).extent([scope.max, scope.max]).on('brush', brushed),

app/js/service-persist.js

@@ -257,7 +257,7 @@ angular.module('app').service('Persist', ['$window', 'lodash', function($window,
 
   /**
    * Retrieve the last router state from local storage
-   * @param {object} state State object containing state name and params
+   * @return {object} state State object containing state name and params
    */
   this.getState = function() {
     if (this.lsEnabled) {
@@ -279,6 +279,30 @@ angular.module('app').service('Persist', ['$window', 'lodash', function($window,
     }
   };
 
+  /**
+   * Retrieve the last router state from local storage
+   * @return {number} size Ratio
+   */
+  this.getSizeRatio = function() {
+    if (this.lsEnabled) {
+      var ratio = localStorage.getItem('sizeRatio');
+      if (!isNaN(ratio) && ratio > 0.6) {
+        return ratio
+      }
+    }
+    return 1;
+  };
+
+  /**
+   * Save the current size ratio to localstorage
+   * @param {number} sizeRatio
+   */
+  this.setSizeRatio = function(sizeRatio) {
+    if (this.lsEnabled) {
+      localStorage.setItem('sizeRatio', sizeRatio);
+    }
+  };
+
   /**
    * Check if localStorage is enabled/active
    * @return {Boolean} True if localStorage is enabled

app/views/_header.html

@@ -73,11 +73,14 @@
         <li><a href="#" class="block" ui-sref="modal.delete" translate="delete all"></a></li>
       </ul>
       <hr />
-      <table style="width: 100%;background-color:transparent">
+      <table style="width: 300px;background-color:transparent">
         <tr>
           <td style="width: 20px"><u>A</u></td>
           <td slider min="0.65" def="sizeRatio" max="1.2" on-change="textSizeChange(val)"></td>
-          <td style="width: 40px" ng-click="textSizeChange(1)"><span style="font-size: 30px">A</span><svg class="icon lg primary"><use xlink:href="#switch"></use></svg></td>
+          <td style="width: 20px"><span style="font-size: 30px">A</span></td>
+        </tr>
+        <tr>
+         <td></td><td style="text-align:center" class="primary-disabled" ng-click="textSizeChange(1)">Reset</td><td></td>
         </tr>
       </table>
       <hr />