We use cookies to ensure you get the best experience on our website
Domů Procházet Nápověda
Registrovat se Přihlásit se
0ct0pu5
/
YellowLabTools
1
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

New icons from IcoMoon

Gaël Métais před 10 roky
rodič
a8af5915e3
revize
24d9690b09
18 změnil soubory, kde provedl 294 přidání a 55 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 33 0
      Gruntfile.js
  2. 2 0
      README.md
  3. 2 1
      app/node_views/index.html
  4. 8 10
      app/node_views/results.html
  5. binární
      app/public/fonts/icons.woff
  6. 0 0
      app/public/fonts/svg-icons/arrow-left3.svg
  7. 0 0
      app/public/fonts/svg-icons/drawer3.svg
  8. 0 0
      app/public/fonts/svg-icons/lab.svg
  9. 0 0
      app/public/fonts/svg-icons/list.svg
  10. 0 0
      app/public/fonts/svg-icons/question.svg
  11. 0 0
      app/public/fonts/svg-icons/tree.svg
  12. 0 0
      app/public/fonts/svg-icons/warning.svg
  13. 4 0
      app/public/styles/index.css
  14. 56 0
      app/public/styles/less/icons.less
  15. 49 0
      app/public/styles/less/main.less
  16. 115 20
      app/public/styles/main.css
  17. 21 23
      app/public/styles/results.css
  18. 4 1
      package.json

+ 33 - 0
Gruntfile.js
Zobrazit soubor 

@@ -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'

+ 2 - 0
README.md
Zobrazit soubor 

@@ -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).

+ 2 - 1
app/node_views/index.html
Zobrazit soubor 

@@ -6,12 +6,13 @@
 
     <link rel="stylesheet" type="text/css" href="/public/styles/index.css">
 
 </head>
 
 <body>
 
-    <h1>Yellow Lab Tools</h1>
 
+    <h1>Yellow Lab <span class="icon-lab"></span> Tools</h1>
 
     <h2 class="promess">Free online test to help speeding up heavily javascripted pages</h2>
 
     <form method="post" action="/launchTest">
 
         <input type="text" name="url" placeholder="http://www.mysite.com" class="url" />
 
         <input type="submit" value="Launch test" class="launchBtn" onclick="this.className += ' clicked'" />
 
     </form>
 
+    <p>(This is an early BETA, so please don't spread on the web)</p>
 
 
     <div class="footer">
 
         <p><b>Yellow Lab Tools</b> is an open source project by <a href="http://www.gaelmetais.com" target="_blank">Gaël Métais</a>, based on <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>.<br>If you like it, <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">give it a <span>&#9733;</span> on GitHub</a>!</p>

+ 8 - 10
app/node_views/results.html
Zobrazit soubor 

@@ -18,10 +18,10 @@
 
         <div>Tested url: &nbsp; <a class="testedUrl" href="{{phantomasResults.url}}" target="_blank">{{phantomasResults.url}}</a></div>
 
 
         <div class="resultsMenu">
 
-            <a class="menuItem" href="/"><span>New test<span></a>
 
-            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'summary'}" ng-click="setView('summary')"><span>Summary</span></div>
 
-            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="setView('execution')"><span>Spaghetti</span></div>
 
-            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'metrics'}" ng-click="setView('metrics')"><span>Metrics</span></div>
 
+            <a class="menuItem back" href="/"><div class="icon-back"></div><span>New test<span></a>
 
+            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'summary'}" ng-click="setView('summary')"><div class="icon-summary"></div><span>Summary</span></div>
 
+            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="setView('execution')"><div class="icon-spaghetti"></div><span>Spaghetti</span></div>
 
+            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'metrics'}" ng-click="setView('metrics')"><div class="icon-metrics"></div><span>Metrics</span></div>
 
         </div>
 
 
         <div ng-if="phantomasResults.error">
 
@@ -166,11 +166,9 @@
 
                     </div>
 
                     
                     <div class="details">
 
-                        <button ng-click="onNodeDetailsClick(node)" 
-                                ng-class="{
 
-                                    'warningDetails': node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5
 
-                                }"
 
-                                ng-if="node.data.type != 'script loaded' && node.data.type != 'jQuery loaded'">i</button>
 
+                        <div class="icon-question"
 
+                                ng-click="onNodeDetailsClick(node)"
 
+                                ng-if="node.data.type != 'script loaded' && node.data.type != 'jQuery loaded'"></div>
 
                         <div class="detailsOverlay" ng-show="node.data.showDetails">
 
                             <div class="closeBtn" ng-click="onNodeDetailsClick(node)">✖</div>
 
 
@@ -230,7 +228,7 @@
 
                     </div>
 
                     <div class="duration" ng-if="node.data.time != undefined">
 
                         {{node.data.time}} ms
 
-                        <div ng-if="node.data.time > slowRequestsLimit" class="warningIcon" title="Slower than {{slowRequestsLimit}} ms"></div>
 
+                        <span ng-if="node.data.time > slowRequestsLimit" class="icon-warning" title="Slower than {{slowRequestsLimit}} ms"></span>
 
                     </div>
 
                     <div class="duration" ng-if="node.data.time == undefined"></div>
 
                     <div class="startTime">{{node.data.timestamp}}</div>

binární
app/public/fonts/icons.woff
Zobrazit soubor


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
app/public/fonts/svg-icons/arrow-left3.svg


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
app/public/fonts/svg-icons/drawer3.svg


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
app/public/fonts/svg-icons/lab.svg


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
app/public/fonts/svg-icons/list.svg


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
app/public/fonts/svg-icons/question.svg


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
app/public/fonts/svg-icons/tree.svg


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
app/public/fonts/svg-icons/warning.svg


+ 4 - 0
app/public/styles/index.css
Zobrazit soubor 

@@ -1,3 +1,7 @@
 
+h1 span {
 
+    color: #ffa319;
 
+}
 
+
 
 .promess {
 
     padding: 0em 2em 3em;
 
     font-weight: normal;

+ 56 - 0
app/public/styles/less/icons.less
Zobrazit soubor 

@@ -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;
 
+}

+ 49 - 0
app/public/styles/less/main.less
Zobrazit soubor 

@@ -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);
 
+}

+ 115 - 20
app/public/styles/main.css
Zobrazit soubor 

@@ -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;
 
-}
 
-
 
-body, input[type=submit], input[type=text], input[type=number], button {
 
-    font-family: 'Century Gothic', helvetica, arial, sans-serif;
 
-}
 
-
 
-input[type=text] {
 
-
 
-}
 
-
 
+  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=submit] {
 
-    cursor: pointer;
 
-}
 
+  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";
 
+}

+ 21 - 23
app/public/styles/results.css
Zobrazit soubor 

@@ -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,<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs/><g fill="none" fill-rule="evenodd" id="Icons new Arranged Names Color" stroke="none" stroke-width="1"><g fill="#e74c3c" id="101 Warning"><path d="M14.4242327,6.14839275 C15.2942987,4.74072976 16.707028,4.74408442 17.5750205,6.14839275 L28.3601099,23.59738 C29.5216388,25.4765951 28.6755462,27 26.4714068,27 L5.5278464,27 C3.32321557,27 2.47386317,25.4826642 3.63914331,23.59738 Z M16,20 C16.5522847,20 17,19.5469637 17,19.0029699 L17,12.9970301 C17,12.4463856 16.5561352,12 16,12 C15.4477153,12 15,12.4530363 15,12.9970301 L15,19.0029699 C15,19.5536144 15.4438648,20 16,20 Z M16,24 C16.5522848,24 17,23.5522848 17,23 C17,22.4477152 16.5522848,22 16,22 C15.4477152,22 15,22.4477152 15,23 C15,23.5522848 15.4477152,24 16,24 Z M16,24" id="Triangle 29"/></g></g></svg>') no-repeat 0 3px;
 
+.table .icon-warning {
 
+    color: #e74c3c;
 
 }

+ 4 - 1
package.json
Zobrazit soubor 

@@ -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": {}
 
 }

Některé soubory nejsou zobrazeny, neboť je v těchto rozdílových datech změněno mnoho souborů

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5