From 24d9690b094883349aa595629381868ae020cdb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Thu, 4 Sep 2014 16:15:24 +0200 Subject: [PATCH] New icons from IcoMoon --- Gruntfile.js | 33 ++++++ README.md | 2 + app/node_views/index.html | 3 +- app/node_views/results.html | 18 ++- app/public/fonts/icons.woff | Bin 0 -> 2092 bytes app/public/fonts/svg-icons/arrow-left3.svg | 1 + app/public/fonts/svg-icons/drawer3.svg | 1 + app/public/fonts/svg-icons/lab.svg | 1 + app/public/fonts/svg-icons/list.svg | 1 + app/public/fonts/svg-icons/question.svg | 1 + app/public/fonts/svg-icons/tree.svg | 1 + app/public/fonts/svg-icons/warning.svg | 1 + app/public/styles/index.css | 4 + app/public/styles/less/icons.less | 56 +++++++++ app/public/styles/less/main.less | 49 ++++++++ app/public/styles/main.css | 131 ++++++++++++++++++--- app/public/styles/results.css | 44 ++++--- package.json | 5 +- 18 files changed, 299 insertions(+), 53 deletions(-) create mode 100644 app/public/fonts/icons.woff create mode 100755 app/public/fonts/svg-icons/arrow-left3.svg create mode 100755 app/public/fonts/svg-icons/drawer3.svg create mode 100755 app/public/fonts/svg-icons/lab.svg create mode 100755 app/public/fonts/svg-icons/list.svg create mode 100755 app/public/fonts/svg-icons/question.svg create mode 100755 app/public/fonts/svg-icons/tree.svg create mode 100755 app/public/fonts/svg-icons/warning.svg create mode 100644 app/public/styles/less/icons.less create mode 100644 app/public/styles/less/main.less diff --git a/Gruntfile.js b/Gruntfile.js index 3afa0f6..6a271d1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,6 +4,30 @@ module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), + font: { + icons: { + src: ['app/public/fonts/svg-icons/*.svg'], + destCss: 'app/public/styles/less/icons.less', + destFonts: 'app/public/fonts/icons.woff', + + // Optional: Custom routing of font filepaths for CSS + cssRouter: function (fontpath) { + var pathArray = fontpath.split('/'); + var fileName = pathArray[pathArray.length - 1]; + return '/public/fonts/' + fileName; + } + } + }, + less: { + icons: { + files: { + 'app/public/styles/main.css': [ + //'app/public/styles/less/icons.less', + 'app/public/styles/less/main.less' + ] + } + } + }, jshint: { all: [ '*.js', @@ -14,6 +38,9 @@ module.exports = function(grunt) { ] }, clean: { + icons: { + src: ['tmp'] + }, coverage: { src: ['coverage/'] } @@ -53,6 +80,12 @@ module.exports = function(grunt) { require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); + grunt.registerTask('build', [ + 'jshint', + 'font:icons', + 'less:icons', + 'clean:icons' + ]); grunt.registerTask('hint', [ 'jshint' diff --git a/README.md b/README.md index dae6a51..053b8cf 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,8 @@ vagrant up ## License Please read the [license](LICENSE). +Icons are the property of [IcoMoon.io](https://icomoon.io/) + ## Author Gaël Métais. I'm a webperf freelance based in Paris. If you understand french, you can visit [my website](http://www.gaelmetais.com). \ No newline at end of file diff --git a/app/node_views/index.html b/app/node_views/index.html index 4ff5f45..011aa3a 100644 --- a/app/node_views/index.html +++ b/app/node_views/index.html @@ -6,12 +6,13 @@ -

Yellow Lab Tools

+

Yellow Lab Tools

Free online test to help speeding up heavily javascripted pages

+

(This is an early BETA, so please don't spread on the web)

Yellow Lab Tools is an open source project by Gaël Métais, based on Phantomas.
If you like it, give it a ★ on GitHub!

diff --git a/app/node_views/results.html b/app/node_views/results.html index dffb7f6..cc85c2e 100644 --- a/app/node_views/results.html +++ b/app/node_views/results.html @@ -18,10 +18,10 @@
Tested url:   {{phantomasResults.url}}
- New test -
Summary
-
Spaghetti
-
Metrics
+
New test +
Summary
+
Spaghetti
+
Metrics
@@ -166,11 +166,9 @@
- +
✖
@@ -230,7 +228,7 @@
{{node.data.time}} ms -
+
{{node.data.timestamp}}
diff --git a/app/public/fonts/icons.woff b/app/public/fonts/icons.woff new file mode 100644 index 0000000000000000000000000000000000000000..926f2de4e560b9a4916c9dc06263f2b892b4afea GIT binary patch literal 2092 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 literal 0 HcmV?d00001 diff --git a/app/public/fonts/svg-icons/arrow-left3.svg b/app/public/fonts/svg-icons/arrow-left3.svg new file mode 100755 index 0000000..d96cc70 --- /dev/null +++ b/app/public/fonts/svg-icons/arrow-left3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/public/fonts/svg-icons/drawer3.svg b/app/public/fonts/svg-icons/drawer3.svg new file mode 100755 index 0000000..18e9b46 --- /dev/null +++ b/app/public/fonts/svg-icons/drawer3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/public/fonts/svg-icons/lab.svg b/app/public/fonts/svg-icons/lab.svg new file mode 100755 index 0000000..28b3aa8 --- /dev/null +++ b/app/public/fonts/svg-icons/lab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/public/fonts/svg-icons/list.svg b/app/public/fonts/svg-icons/list.svg new file mode 100755 index 0000000..403a80a --- /dev/null +++ b/app/public/fonts/svg-icons/list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/public/fonts/svg-icons/question.svg b/app/public/fonts/svg-icons/question.svg new file mode 100755 index 0000000..49e9fc3 --- /dev/null +++ b/app/public/fonts/svg-icons/question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/public/fonts/svg-icons/tree.svg b/app/public/fonts/svg-icons/tree.svg new file mode 100755 index 0000000..7e08238 --- /dev/null +++ b/app/public/fonts/svg-icons/tree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/public/fonts/svg-icons/warning.svg b/app/public/fonts/svg-icons/warning.svg new file mode 100755 index 0000000..85f8300 --- /dev/null +++ b/app/public/fonts/svg-icons/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/public/styles/index.css b/app/public/styles/index.css index ecf5094..e706d18 100644 --- a/app/public/styles/index.css +++ b/app/public/styles/index.css @@ -1,3 +1,7 @@ +h1 span { + color: #ffa319; +} + .promess { padding: 0em 2em 3em; font-weight: normal; diff --git a/app/public/styles/less/icons.less b/app/public/styles/less/icons.less new file mode 100644 index 0000000..0868f48 --- /dev/null +++ b/app/public/styles/less/icons.less @@ -0,0 +1,56 @@ +@warning-font-family: "fontsmith-icons"; +@warning-value: "\e000"; +@warning: '"fontsmith-icons"' '"\\e000"'; +@arrow-left3-font-family: "fontsmith-icons"; +@arrow-left3-value: "\e006"; +@arrow-left3: '"fontsmith-icons"' '"\\e006"'; +@drawer3-font-family: "fontsmith-icons"; +@drawer3-value: "\e005"; +@drawer3: '"fontsmith-icons"' '"\\e005"'; +@list-font-family: "fontsmith-icons"; +@list-value: "\e003"; +@list: '"fontsmith-icons"' '"\\e003"'; +@lab-font-family: "fontsmith-icons"; +@lab-value: "\e004"; +@lab: '"fontsmith-icons"' '"\\e004"'; +@tree-font-family: "fontsmith-icons"; +@tree-value: "\e001"; +@tree: '"fontsmith-icons"' '"\\e001"'; +@question-font-family: "fontsmith-icons"; +@question-value: "\e002"; +@question: '"fontsmith-icons"' '"\\e002"'; + +.icon-font-family(@char) { + font-family: ~`@{char}[0]`; +} + +.icon-font() { + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} + +.icon-content(@char) { + content: ~`@{char}[1]`; +} + +.icon(@char) { + .icon-font-family(@char); + .icon-font(); + + &:before { + .icon-content(@char); + } +} + +@font-face { + font-family: "fontsmith-icons"; + src:url("/public/fonts/icons.woff") format("woff"), + ; + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/app/public/styles/less/main.less b/app/public/styles/less/main.less new file mode 100644 index 0000000..105f3b4 --- /dev/null +++ b/app/public/styles/less/main.less @@ -0,0 +1,49 @@ +@import "icons.less"; + +html { + margin: 100px 50px; +} + +body { + margin: 0 auto; + max-width: 1280px; + background: #9c4274; + color: #fff; + font-size: 16px; + text-align: center; +} + +body, input[type=submit], input[type=text], input[type=number], button { + font-family: 'Century Gothic', helvetica, arial, sans-serif; +} + +input[type=text] { + +} + +input[type=submit] { + cursor: pointer; +} + +/* Icons */ +.icon-lab { + .icon(@lab); +} +.icon-question { + .icon(@question); +} +.icon-warning { + .icon(@warning); +} +.icon-back { + .icon(@arrow-left3); +} +.icon-summary { + .icon(@list); +} +.icon-spaghetti { + .icon(@tree); +} +.icon-metrics { + .icon(@drawer3); +} \ No newline at end of file diff --git a/app/public/styles/main.css b/app/public/styles/main.css index 2f49947..212d49a 100644 --- a/app/public/styles/main.css +++ b/app/public/styles/main.css @@ -1,24 +1,119 @@ +@font-face { + font-family: "fontsmith-icons"; + src: url("/public/fonts/icons.woff") format("woff"); + font-weight: normal; + font-style: normal; +} html { - margin: 100px 50px; + margin: 100px 50px; } - body { - margin: 0 auto; - max-width: 1280px; - background: #9c4274; - color: #fff; - font-size: 16px; - text-align: center; + margin: 0 auto; + max-width: 1280px; + background: #9c4274; + color: #fff; + font-size: 16px; + text-align: center; } - -body, input[type=submit], input[type=text], input[type=number], button { - font-family: 'Century Gothic', helvetica, arial, sans-serif; +body, +input[type=submit], +input[type=text], +input[type=number], +button { + font-family: 'Century Gothic', helvetica, arial, sans-serif; } - -input[type=text] { - -} - input[type=submit] { - cursor: pointer; -} \ No newline at end of file + cursor: pointer; +} +/* Icons */ +.icon-lab { + font-family: "fontsmith-icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-lab:before { + content: "\e004"; +} +.icon-question { + font-family: "fontsmith-icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-question:before { + content: "\e002"; +} +.icon-warning { + font-family: "fontsmith-icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-warning:before { + content: "\e000"; +} +.icon-back { + font-family: "fontsmith-icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-back:before { + content: "\e006"; +} +.icon-summary { + font-family: "fontsmith-icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-summary:before { + content: "\e003"; +} +.icon-spaghetti { + font-family: "fontsmith-icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-spaghetti:before { + content: "\e001"; +} +.icon-metrics { + font-family: "fontsmith-icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-metrics:before { + content: "\e005"; +} diff --git a/app/public/styles/results.css b/app/public/styles/results.css index 52bb0b2..3ca839f 100644 --- a/app/public/styles/results.css +++ b/app/public/styles/results.css @@ -6,21 +6,32 @@ display: inline-block; margin: 1em; width: 8em; - height: 8em; - background: #fff; + height: 7em; + color: #fff; + border: 3px solid #fff; border-radius: 0.5em; - color: #9c4274; cursor: pointer; text-decoration: none; } - -.resultsMenu .active, .resultsMenu .menuItem:hover { - color: #e74c3c; +.resultsMenu .back { + color: #5e2846; + border-color: #5e2846; +} +.resultsMenu .menuItem div { + padding-top: 0.5em; + font-size: 3em; +} +.resultsMenu .active, .resultsMenu .menuItem.active:hover { + color: #ffa319; + border-color: #ffa319; +} +.resultsMenu .menuItem:hover { + color: #ffa319; } .resultsMenu span { position: relative; - top: 6em; + top: 0.5em; } .testedUrl { @@ -202,20 +213,10 @@ input.textFilter { .table > div > .details { position: relative; } -.table > div > .details button { +.table .details .icon-question { color: #f1c40f; - font-weight: bold; - border: 2px solid #f1c40f; - border-radius: 50%; - background: transparent; - height: 2em; - width: 2em; cursor: pointer; } -.table > div > .details button.warningDetails { - color: #e74c3c; - border-color: #e74c3c; -} .detailsOverlay { position: absolute; @@ -254,9 +255,6 @@ input.textFilter { white-space:nowrap; } -.warningIcon { - display: inline-block; - width: 1.5em; - height: 1.5em; - background: url('data:image/svg+xml;utf8,') no-repeat 0 3px; +.table .icon-warning { + color: #e74c3c; } \ No newline at end of file diff --git a/package.json b/package.json index 410b574..3b3b930 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,10 @@ "grunt-contrib-copy": "^0.5.0", "grunt-blanket": "0.0.8", "chai": "^1.9.1", - "mocha": "^1.21.4" + "mocha": "^1.21.4", + "phantomjs": "^1.9.7-15", + "grunt-fontsmith": "^0.9.1", + "grunt-contrib-less": "^0.11.4" }, "scripts": {} }