diff --git a/front/src/css/dashboard.css b/front/src/css/dashboard.css index ca1c26f..104695f 100644 --- a/front/src/css/dashboard.css +++ b/front/src/css/dashboard.css @@ -109,14 +109,18 @@ .summary .notations .criteria .table { width: 100%; } -.summary .notations .criteria .table > div:hover > div { +.summary .notations .criteria .table > a { + text-decoration: none; + color: inherit; +} +.summary .notations .criteria .table > a:hover > div { background: #EBD8E2; cursor: pointer; } -.summary .notations .criteria .table > div:hover > div.info { +.summary .notations .criteria .table > a:hover > div.info { background: #FFF; } -.summary .notations .criteria .table > div:hover > div.info .icon-question { +.summary .notations .criteria .table > a:hover > div.info .icon-question { color: #EBD8E2; } .summary .notations .criteria .grade { diff --git a/front/src/css/timeline.css b/front/src/css/timeline.css index 9ecf796..5b2c872 100644 --- a/front/src/css/timeline.css +++ b/front/src/css/timeline.css @@ -152,14 +152,16 @@ width: 100%; border-spacing: 0.25em; } -.table > div { +.table > div, +.table > a { display: table-row; } .table > .headers > div { font-weight: bold; padding: 0.5em 1em; } -.table > div > div { +.table > div > div, +.table > a > div { padding: 0.1em 1em; background: #f2f2f2; display: table-cell; diff --git a/front/src/js/controllers/dashboardCtrl.js b/front/src/js/controllers/dashboardCtrl.js index 38b3f95..b8f2115 100644 --- a/front/src/js/controllers/dashboardCtrl.js +++ b/front/src/js/controllers/dashboardCtrl.js @@ -30,10 +30,6 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams $scope.tweetText = 'I\'ve discovered this cool open-source tool that audits the front-end quality of a web page: '; } - $scope.showRulePage = function(ruleName) { - $location.path('/result/' + $scope.runId + '/rule/' + ruleName); - }; - $scope.testAgain = function() { API.relaunchTest($scope.result); }; diff --git a/front/src/less/dashboard.less b/front/src/less/dashboard.less index 1eeaaa5..b46ed02 100644 --- a/front/src/less/dashboard.less +++ b/front/src/less/dashboard.less @@ -108,7 +108,11 @@ .summary .notations .criteria .table { width: 100%; - > div:hover > div { + > a { + text-decoration: none; + color: inherit; + } + > a:hover > div { background: #EBD8E2; cursor: pointer; &.info { diff --git a/front/src/less/timeline.less b/front/src/less/timeline.less index ab9bd80..d59beac 100644 --- a/front/src/less/timeline.less +++ b/front/src/less/timeline.less @@ -173,7 +173,8 @@ border-spacing: 0.25em; } -.table > div { +.table > div, +.table > a { display: table-row; } @@ -182,7 +183,8 @@ padding: 0.5em 1em; } -.table > div > div { +.table > div > div, +.table > a > div { padding: 0.1em 1em; background: #f2f2f2; display: table-cell; diff --git a/front/src/views/dashboard.html b/front/src/views/dashboard.html index 5efffa0..a7a2191 100644 --- a/front/src/views/dashboard.html +++ b/front/src/views/dashboard.html @@ -28,8 +28,8 @@
{{category.label}}
-
+
@@ -42,7 +42,7 @@
-
+
diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index 23083f5..213cad0 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -150,7 +150,7 @@ var policies = { "DOMaccessesOnScroll": { "tool": "jsExecutionTransformer", "label": "DOM access on scroll", - "message": "

This rule counts the number of DOM-accessing functions calls on a scroll event, such as queries, readings, writings, bindings and jQuery functions.

Two scroll events are triggered quickly, one after the other, and only the second one is analyzed so throttled functions are ignored.

One of the main reasons of a poor scrolling experience is when too much JS is executed on each scroll event. Note that some devices such as smartphones and MacBooks send more scroll events than others.

Reduce the number of DOM accesses inside scroll listeners. Put DOM queries outside them when possible. Use throttling or deboucing.

", + "message": "

This rule counts the number of DOM-accessing functions calls on a scroll event, such as queries, readings, writings, bindings and jQuery functions.

Two scroll events are triggered quickly, one after the other, and only the second one is analyzed so throttled functions are ignored.

One of the main reasons of a poor scrolling experience is when too much JS is executed on each scroll event. Note that some devices such as smartphones and MacBooks send more scroll events than others.

Reduce the number of DOM accesses inside scroll listeners. Put DOM queries outside them when possible. Use throttling or debouncing.

", "isOkThreshold": 1, "isBadThreshold": 12, "isAbnormalThreshold": 25, @@ -846,7 +846,7 @@ var policies = { "totalWeight": { "tool": "weightChecker", "label": "Total weight", - "message": "

The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is alreay very long to download over a slow connection.

", + "message": "

The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is alreay very long to download over a slow connection.

Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.

", "isOkThreshold": 716800, "isBadThreshold": 2097152, "isAbnormalThreshold": 3145728, @@ -856,7 +856,7 @@ var policies = { "imageOptimization": { "tool": "weightChecker", "label": "Image optimization", - "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOption on Mac. For SVG images, you can use SVGOMG

The tools in use in YellowLabTools are not set to their maximum optimization power, so you might be able to compress even more!

", + "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG

The tools in use in YellowLabTools are not set to their maximum optimization power (JPEG quality 85), so you might be able to compress even more!

Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.

", "isOkThreshold": 10240, "isBadThreshold": 122880, "isAbnormalThreshold": 307200, diff --git a/package.json b/package.json index 8a7758a..3682c0d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "name": "yellowlabtools", - "version": "1.7.3", + "version": "1.7.4", "description": "Online tool to audit a webpage for performance and front-end quality issues", + "license" : "GPL-2.0", "repository": { "type": "git", "url": "git://github.com/gmetais/YellowLabTools.git" diff --git a/server_config/server_install.sh b/server_config/server_install.sh index 0166b7d..7355ea5 100644 --- a/server_config/server_install.sh +++ b/server_config/server_install.sh @@ -21,8 +21,8 @@ sudo chown $USER /space cd /space git clone https://github.com/gmetais/YellowLabTools.git --branch master cd YellowLabTools -npm install -bower install --config.interactive=false --allow-root +npm install || exit 1 +bower install --config.interactive=false --allow-root || exit 1 # Front-end compilation grunt build diff --git a/server_config/server_update.sh b/server_config/server_update.sh index 2519d61..0da2289 100755 --- a/server_config/server_update.sh +++ b/server_config/server_update.sh @@ -12,9 +12,9 @@ git stash pop # In case something was added in package.json or bower.json rm -rf node_modules -npm install +npm install || exit 1 rm -rf bower_components -bower install --config.interactive=false --allow-root +bower install --config.interactive=false --allow-root || exit 1 # Front-end compilation rm -rf front/build