From 29a13fad099417b26416bdd0a539502d8195cd81 Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuval@y3xz.com>
Date: Mon, 6 Jul 2015 17:09:34 +0300
Subject: Dominants page styles

---
 client/button.js             | 17 ++++++---------
 client/colors.less           | 51 ++++++++++++++++++++++++++++----------------
 client/templates/photos.html | 23 +++++++++++++++++---
 3 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/client/button.js b/client/button.js
index 35f7267..93bc6c6 100644
--- a/client/button.js
+++ b/client/button.js
@@ -55,16 +55,13 @@ function animate() {
     $('div#dominant1').css('background', 'rgba(' + palette[0][0] + ',' + palette[0][1] + ',' + palette[0][2] + ',1)');
     $('div#dominant2').css('background', 'rgba(' + palette[1][0] + ',' + palette[1][1] + ',' + palette[1][2] + ',1)');
 
-    $('h5#dominant1').text('#'
-      + palette[0][0].toString(16).toUpperCase()
-      + palette[0][1].toString(16).toUpperCase()
-      + palette[0][2].toString(16).toUpperCase()
-    )
-    $('h5#dominant2').text('#'
-      + palette[1][0].toString(16).toUpperCase()
-      + palette[1][1].toString(16).toUpperCase()
-      + palette[1][2].toString(16).toUpperCase()
-    )
+    $('ol#dominant1 li.r').text('R-' + palette[0][0].toString(16).toUpperCase());
+    $('ol#dominant1 li.g').text('G-' + palette[0][1].toString(16).toUpperCase());
+    $('ol#dominant1 li.b').text('B-' + palette[0][2].toString(16).toUpperCase());
+
+    $('ol#dominant2 li.r').text('R-' + palette[1][0].toString(16).toUpperCase());
+    $('ol#dominant2 li.g').text('G-' + palette[1][1].toString(16).toUpperCase());
+    $('ol#dominant2 li.b').text('B-' + palette[1][2].toString(16).toUpperCase());
 
     $('div.dominants').show();
   }, delay + 2000);
diff --git a/client/colors.less b/client/colors.less
index 9c47dcd..3dce1dc 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -156,11 +156,14 @@ body {
         li.step {
           flex: 0 0 auto;
           display: inline;
-          padding-left: 20px;
-          padding-right: 20px;
-          color: #999;
+          margin-left: 20px;
+          margin-right: 20px;
+          padding-bottom: 5px;
+          color: #BEBEBE;
+          font-family: 'Cutive', serif;
           &.active {
-            color: #333;
+            color: #600000;
+            border-bottom: 2px #600000 solid;
           }
         }
       }
@@ -179,10 +182,6 @@ body {
           margin: 3px 8px;
           width: 72px;
           height: 92px;
-          div.title {
-            color: #999;
-            text-align: center;
-          }
           img {
             height: 72px;
             width: 72px;
@@ -191,38 +190,54 @@ body {
             width: 72px;
             height: 72px;
           }
+          div.title {
+            color: #999;
+            text-align: center;
+            font-family: 'Cutive', serif;
+          }
         }
       }
       div.dominants {
         margin: 0 auto;
         width: 305px;
+        text-align: center;
         div.dominant {
-          text-align: center;
           flex: 0 0 auto;
           margin-top: 45px;
           h3 {
-            color: #2636F9;
+            color: black;
             font-size: 1.2em;
           }
           div.color {
             background-color: red;
             height: 50px;
           }
-          h5 {
-            color: #808080;
+          ol {
+            display: block;
+            text-align: center;
+            list-style: none;
+            padding-left: 0px;
+            font-family: 'Cutive', serif;
+            color: #6D6D6D;
+            margin-top: 6px;
+            li {
+              display: inline;
+              margin-left: 7px;
+              margin-right: 7px;
+            }
           }
         }
         button.continue {
-          font-size: 1.2em;
-          width: 100%;
+          font-size: 2.8em;
+          font-weight: bold;
           margin-top: 45px;
-          color: #2636F9;
-          padding: 7px 35px;
+          color: black;
           background-color: white;
-          border: 1px #2636F9 solid;
+          border: 0px;
+          border-bottom: 6px black solid;
           &:hover, &:active {
             color: white;
-            background-color: #2636F9;
+            background-color: black;
           }
         }
       }
diff --git a/client/templates/photos.html b/client/templates/photos.html
index aa0c3c4..bfcb6d9 100644
--- a/client/templates/photos.html
+++ b/client/templates/photos.html
@@ -14,12 +14,20 @@
       <div class="dominant">
         <h3>Dominant color #1</h3>
         <div id="dominant1" class="color"></div>
-        <h5 id="dominant1">#AABBCC</h5>
+        <ol id="dominant1">
+          <li class="r">R-XX</li>
+          <li class="g">G-XX</li>
+          <li class="b">B-XX</li>
+        </ol>
       </div>
       <div class="dominant">
         <h3>Dominant color #2</h3>
         <div id="dominant2" class="color"></div>
-        <h5 id="dominant2">#AABBCC</h5>
+        <ol id="dominant2">
+          <li class="r">R-XX</li>
+          <li class="g">G-XX</li>
+          <li class="b">B-XX</li>
+        </ol>
       </div>
       <button class="continue">Continue</button>
     </div>
@@ -28,8 +36,17 @@
       <div class="final-dominants">
         <div id="dominant1" class="color"></div>
         <h5 id="dominant1">#AABBCC</h5>
+        <ol id="dominant1">
+          <li class="r">R-XX</li>
+          <li class="g">G-XX</li>
+          <li class="b">B-XX</li>
+        </ol>
         <div id="dominant2" class="color"></div>
-        <h5 id="dominant2">#AABBCC</h5>
+        <ol id="dominant2">
+          <li class="r">R-XX</li>
+          <li class="g">G-XX</li>
+          <li class="b">B-XX</li>
+        </ol>
       </div>
       <div class="share" style="display: none;">
         <p>Now what...?</p>
-- 
cgit v1.3.1