diff --git a/app/js/directives/directive-area-chart.js b/app/js/directives/directive-area-chart.js index 7cbfcf23..a7222eb7 100755 --- a/app/js/directives/directive-area-chart.js +++ b/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 = []; diff --git a/app/js/directives/directive-slider.js b/app/js/directives/directive-slider.js index 80192ff2..4ab39544 100644 --- a/app/js/directives/directive-slider.js +++ b/app/js/directives/directive-slider.js @@ -50,10 +50,10 @@ 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"); + .select(".domain"); lbl.attr('x', w + 20); slider.call(brush.extent([val, val])).call(brush.event); slider.selectAll(".extent,.resize").remove(); diff --git a/app/less/app.less b/app/less/app.less index fa92591c..faca6634 100755 --- a/app/less/app.less +++ b/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; } diff --git a/app/less/buttons.less b/app/less/buttons.less index e5e42973..c2cdb2a5 100755 --- a/app/less/buttons.less +++ b/app/less/buttons.less @@ -6,7 +6,7 @@ button { } border: none; font-family: @fStandard; - + vertical-align: middle; padding: 0.5em; cursor: pointer; background: none; diff --git a/app/less/charts.less b/app/less/charts.less index 196b4958..1c1e77c9 100755 --- a/app/less/charts.less +++ b/app/less/charts.less @@ -13,7 +13,7 @@ width: 50%; }); - .smallTablet({ + .largePhone({ width: 100%; }); diff --git a/app/less/colors.less b/app/less/colors.less index afbc3f31..1a238c3e 100755 --- a/app/less/colors.less +++ b/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; diff --git a/app/less/comparison.less b/app/less/comparison.less index 559c169c..3479f37c 100755 --- a/app/less/comparison.less +++ b/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%; - box-sizing: border-box; + display: inline-block; + 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; }); diff --git a/app/less/modal.less b/app/less/modal.less index 3bbfa50d..228926a2 100755 --- a/app/less/modal.less +++ b/app/less/modal.less @@ -16,8 +16,7 @@ left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); - width: 75%; - max-width: 1000px; + width: 800px; max-height: 100%; padding: 2em; background-color: @bgBlack; @@ -27,6 +26,10 @@ -webkit-overflow-scrolling: touch; .smallTablet({ + width: 90%; + }); + + .largePhone({ padding: 1em; width: 100%; }); diff --git a/app/less/outfit.less b/app/less/outfit.less index e3801c6c..ff0d4fd4 100755 --- a/app/less/outfit.less +++ b/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; - font-size: 0.8em; + line-height: 1.3em; 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 { - .smallPhone({ - padding: 0.25em; + + .largePhone({ + width: 70%; + }); + + .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({ - font-size: 0.9em; - }); + tbody tr:hover { + 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; }); } - } diff --git a/app/less/slot.less b/app/less/slot.less index c30717fd..3258f021 100755 --- a/app/less/slot.less +++ b/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; diff --git a/app/less/table.less b/app/less/table.less index 63076b71..d9ddc0c4 100755 --- a/app/less/table.less +++ b/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; } } diff --git a/app/views/_header.html b/app/views/_header.html index a94ada8d..03107920 100755 --- a/app/views/_header.html +++ b/app/views/_header.html @@ -18,7 +18,7 @@
-