More changes for font size adjustment

app/js/directives/directive-header.js

@@ -81,7 +81,9 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta
 
       scope.textSizeChange = function(size) {
         $rootScope.fontSize = size;
+        $rootScope.fontSizePx = size * parseFloat(getComputedStyle(document.documentElement).fontSize);
         document.getElementById('main').style.fontSize = size + 'em';
+        $rootScope.$broadcast('render');
       };
 
       scope.$watchCollection('allBuilds', function() {

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

@@ -19,18 +19,20 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
           pctAxis = d3.svg.axis().scale(pctScale).outerTickSize(0).orient('bottom').tickFormat(d3.format('%')),
           // Create chart
           svg = d3.select(element[0]).append('svg'),
-          vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'),
+          vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
           deployed = vis.append('g').attr('class', 'power-band'),
           retracted = vis.append('g').attr('class', 'power-band');
 
       svg.on('contextmenu', function() {
+        if (!d3.event.shiftKey) {
           d3.event.preventDefault();
           for (var i = 0, l = bands.length; i < l; i++) {
             bands[i].retSelected = false;
             bands[i].depSelected = false;
           }
           render();
-        });
+        }
+      });
 
       // Create Y Axis SVG Elements
       vis.append('g').attr('class', 'watt axis');

app/js/directives/directive-slider.js

@@ -11,16 +11,17 @@ angular.module('app').directive('slider', ['$window', function($window) {
     },
     link: function(scope, element) {
       var unit = scope.unit,
-          margin = unit ? { top: -10, right: 145, bottom: 0, left: 50 } : { top: 0, right: 10, bottom: 0, left: 10 },
+          margin = unit ? { top: -10, right: 145, left: 50 } : { top: 0, right: 10, left: 10 },
           height = unit ? 40 : 20,    // Height is fixed
-          h = height - margin.top - margin.bottom,
+          h = height - margin.top,
           fmt = d3.format('.2f'),
           pct = d3.format('.1%'),
           val = scope.def !== undefined ? scope.def : scope.max,
           svg = d3.select(element[0]).append('svg'),
           vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'),
-          xAxis = vis.append('g').attr('class', 'x slider-axis').attr('transform', 'translate(0,' + h / 2 + ')'),
+          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);
           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),
@@ -47,15 +48,7 @@ angular.module('app').directive('slider', ['$window', function($window) {
         x.domain([scope.min || 0, scope.max]).range([0, w]).clamp(true);
         handle.attr('cx', x(val));
         if (unit) {
-          xAxis
-            .call(d3.svg.axis()
-              .scale(x)
-              .orient('bottom')
-              .tickFormat(function(d) { return d + unit; })
-              .tickValues([0, scope.max / 4, scope.max / 2, (3 * scope.max) / 4, scope.max])
-              .tickSize(0)
-              .tickPadding(12))
-            .select('.domain');
+          xAxisContainer.call(xAxis.tickValues([0, scope.max / 4, scope.max / 2, (3 * scope.max) / 4, scope.max]));
           lbl.attr('x', w + 20);
         }
         slider.call(brush.extent([val, val])).call(brush.event);

app/less/buttons.less

@@ -7,6 +7,7 @@ button {
   border: none;
   text-transform: capitalize;
   font-family: @fStandard;
+  font-size: 0.75em;
   vertical-align: middle;
   padding: 0.5em;
   cursor: pointer;

app/less/comparison.less

@@ -29,6 +29,7 @@
     height: 100%;
     display: inline-block;
     padding: 0.3em;
+    font-size: 1em;
     vertical-align: middle;
     border: none;
     border-right: 1px solid @primary-disabled;

app/views/_header.html

@@ -73,11 +73,13 @@
         <li><a href="#" class="block" ui-sref="modal.delete" translate="delete all"></a></li>
       </ul>
       <hr />
-      <table style="width: 100%"><tr>
-        <td style="width: 20px"><u>A</u></td>
-        <td slider min="0.65" def="fontSize" max="1.5" unit="null" on-change="textSizeChange(val)"></td>
-        <td style="width: 20px"><span style="font-size: 30px">A</span></td>
-      </tr></table>
+      <table style="width: 100%;background-color:transparent">
+        <tr>
+          <td style="width: 20px"><u>A</u></td>
+          <td slider min="0.65" def="fontSize" max="1.2" on-change="textSizeChange(val)"></td>
+          <td style="width: 20px"><span style="font-size: 30px">A</span></td>
+        </tr>
+      </table>
       <hr />
       <a href="#" ui-sref="modal.about" class="block">About</a>
     </div>