Merge branch 'development' into release-1.3.0

keysight-eggplant · May 10, 2017 · b382c93 · b382c93
2 parents 8474417 + da009e2
commit b382c93
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@
 node_modules/
 coverage/
 dist/
+.vscode/
+.DS_Store
diff --git a/app/assets/logo.png b/app/assets/logo.png
diff --git a/app/popup.html b/app/popup.html
@@ -31,6 +31,17 @@
     <div class="popup-mid">
       <h3>Image efficiency checker</h3>
       <p>Sending images that are too big can slow your site down. This tool scans a whole page to identify all images and highlights those that are sent at the wrong size.</p>
+      <p>Images are coloured by their relative scale as shown in the legend below.</p>
+    </div>
+    <div class="popup-colourscale">
+      <table class="popup-colourscale-text">
+        <tr>
+          <td>too big</td>
+          <td>just right</td>
+          <td>too small</td>
+        </tr>
+      </table>
+      <div class="popup-colourscale-scale"></div>
     </div>
     <div class="popup-bottom">
       <button class="popup-btn" id="start">Start</button>

diff --git a/app/styles/popup.css b/app/styles/popup.css
@@ -37,4 +37,35 @@ h2 {
 .popup-contact {
   margin-top: 5px;
   text-align: right;
+}
+
+.popup-colourscale {
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+.popup-colourscale-text {
+  width: 100%;
+  font-style: italic;
+}
+
+.popup-colourscale-text td {
+  width: 33.3%;
+}
+
+.popup-colourscale-text td:nth-child(2) {
+  text-align: center;
+}
+
+.popup-colourscale-text td:nth-child(3) {
+  text-align: right;
+}
+
+.popup-colourscale-scale {
+  height: 10px;
+  border-radius: 5px;
+  background: -webkit-linear-gradient(left, hsla(0, 100%, 50%, 1), hsla(10, 100%, 50%, 1), hsla(20, 100%, 50%, 1), hsla(30, 100%, 50%, 1), hsla(40, 100%, 50%, 1), hsla(50, 100%, 50%, 1), hsla(60, 100%, 50%, 1), hsla(70, 100%, 50%, 1), hsla(80, 100%, 50%, 1), hsla(90, 100%, 50%, 1), hsla(100, 100%, 50%, 1), hsla(110, 100%, 50%, 1), hsla(120, 100%, 50%, 1), hsla(130, 100%, 50%, 1), hsla(140, 100%, 50%, 1), hsla(150, 100%, 50%, 1), hsla(160, 100%, 50%, 1), hsla(170, 100%, 50%, 1), hsla(180, 100%, 50%, 1), hsla(190, 100%, 50%, 1), hsla(200, 100%, 50%, 1), hsla(210, 100%, 50%, 1), hsla(220, 100%, 50%, 1), hsla(230, 100%, 50%, 1), hsla(240, 100%, 50%, 1));
+  background: -moz-linear-gradient(left, hsla(0, 100%, 50%, 1), hsla(10, 100%, 50%, 1), hsla(20, 100%, 50%, 1), hsla(30, 100%, 50%, 1), hsla(40, 100%, 50%, 1), hsla(50, 100%, 50%, 1), hsla(60, 100%, 50%, 1), hsla(70, 100%, 50%, 1), hsla(80, 100%, 50%, 1), hsla(90, 100%, 50%, 1), hsla(100, 100%, 50%, 1), hsla(110, 100%, 50%, 1), hsla(120, 100%, 50%, 1), hsla(130, 100%, 50%, 1), hsla(140, 100%, 50%, 1), hsla(150, 100%, 50%, 1), hsla(160, 100%, 50%, 1), hsla(170, 100%, 50%, 1), hsla(180, 100%, 50%, 1), hsla(190, 100%, 50%, 1), hsla(200, 100%, 50%, 1), hsla(210, 100%, 50%, 1), hsla(220, 100%, 50%, 1), hsla(230, 100%, 50%, 1), hsla(240, 100%, 50%, 1));
+  background: -o-linear-gradient(left, hsla(0, 100%, 50%, 1), hsla(10, 100%, 50%, 1), hsla(20, 100%, 50%, 1), hsla(30, 100%, 50%, 1), hsla(40, 100%, 50%, 1), hsla(50, 100%, 50%, 1), hsla(60, 100%, 50%, 1), hsla(70, 100%, 50%, 1), hsla(80, 100%, 50%, 1), hsla(90, 100%, 50%, 1), hsla(100, 100%, 50%, 1), hsla(110, 100%, 50%, 1), hsla(120, 100%, 50%, 1), hsla(130, 100%, 50%, 1), hsla(140, 100%, 50%, 1), hsla(150, 100%, 50%, 1), hsla(160, 100%, 50%, 1), hsla(170, 100%, 50%, 1), hsla(180, 100%, 50%, 1), hsla(190, 100%, 50%, 1), hsla(200, 100%, 50%, 1), hsla(210, 100%, 50%, 1), hsla(220, 100%, 50%, 1), hsla(230, 100%, 50%, 1), hsla(240, 100%, 50%, 1));
+  background: linear-gradient(to right, hsla(0, 100%, 50%, 1), hsla(10, 100%, 50%, 1), hsla(20, 100%, 50%, 1), hsla(30, 100%, 50%, 1), hsla(40, 100%, 50%, 1), hsla(50, 100%, 50%, 1), hsla(60, 100%, 50%, 1), hsla(70, 100%, 50%, 1), hsla(80, 100%, 50%, 1), hsla(90, 100%, 50%, 1), hsla(100, 100%, 50%, 1), hsla(110, 100%, 50%, 1), hsla(120, 100%, 50%, 1), hsla(130, 100%, 50%, 1), hsla(140, 100%, 50%, 1), hsla(150, 100%, 50%, 1), hsla(160, 100%, 50%, 1), hsla(170, 100%, 50%, 1), hsla(180, 100%, 50%, 1), hsla(190, 100%, 50%, 1), hsla(200, 100%, 50%, 1), hsla(210, 100%, 50%, 1), hsla(220, 100%, 50%, 1), hsla(230, 100%, 50%, 1), hsla(240, 100%, 50%, 1));;
 }