Display and sizing adjustments to handle larger numbers and fit better on small screens (fixes #48)

5 files changed, 127 insertions, 48 deletions

diff --git a/public/css/coinos.css b/public/css/coinos.css
index 59765af1..63198679 100644
--- a/public/css/coinos.css
+++ b/public/css/coinos.css
@@ -47,7 +47,6 @@ div.container-fluid {
 .numpad .btn,
 .tippad .btn {
   margin-bottom: 5px;
-  padding: 10px;
   width: 6em;
 }
 .numpad h2,
@@ -56,11 +55,15 @@ div.container-fluid {
   margin-top: 1px;
 }
 .numpad {
-  width: 24em;
+  width: 26em;
 }
 .rates {
   margin-top: -15px;
-  text-align: right;
+}
+.rates h2 .label {
+  font-size: 14px;
+  position: relative;
+  top: -5px;
 }
 #slide {
   height: 1.8em;
@@ -69,7 +72,10 @@ div.container-fluid {
 }
 @media (max-width: 360px) {
   .tippad .btn {
-    width: 4.8em;
+    width: 4.3em;
+  }
+  .numpad .btn {
+    width: 5.7em;
   }
   .numpad,
   .tippad,
@@ -167,6 +173,9 @@ div#calculator #qr {
   padding-bottom: 10px;
   margin-left: 20px;
 }
+div#calculator .numpad .btn-primary {
+  background: #abc;
+}
 td.total {
   font-weight: bold;
   text-align: right;
@@ -185,3 +194,29 @@ td.total {
 @page {
   margin: 0;
 }
+.btn-sample {
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #DBDBDB;
+  *background-color: #DBDBDB;
+  background-image: -moz-linear-gradient(top, #B5B5B5, #DBDBDB);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B5B5B5), to(#DBDBDB));
+  background-image: -webkit-linear-gradient(top, #B5B5B5, #DBDBDB);
+  background-image: -o-linear-gradient(top, #B5B5B5, #DBDBDB);
+  background-image: linear-gradient(to bottom, #B5B5B5, #DBDBDB);
+  background-repeat: repeat-x;
+  border-color: #DBDBDB;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B5B5B5', endColorstr='#DBDBDB', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+.btn-sample:hover,
+.btn-sample:focus,
+.btn-sample:active,
+.btn-sample.active,
+.btn-sample.disabled,
+.btn-sample[disabled] {
+  color: #FFFFFF;
+  background-color: #DBDBDB;
+  *background-color: #003bb3;
+}
diff --git a/public/css/coinos.less b/public/css/coinos.less
index 6bc2cb6a..2ded7095 100644
--- a/public/css/coinos.less
+++ b/public/css/coinos.less
@@ -18,15 +18,19 @@ div.container-fluid {
 .navbar-collapse.in { overflow-y: visible; }
 #connection { display: none; }
 
-.numpad .btn, .tippad .btn { margin-bottom: 5px; padding: 10px; width: 6em; }
+.numpad .btn, .tippad .btn { margin-bottom: 5px; width: 6em; }
 .numpad h2, .tippad h2 { margin-bottom: 2px; margin-top: 1px; }
-.numpad { width: 24em; }
-.rates { margin-top: -15px; text-align: right; }
+.numpad { width: 26em; }
+.rates { 
+  margin-top: -15px; 
+  h2 .label { font-size: 14px; position: relative; top: -5px; }
+}
 
 #slide { height: 1.8em; width: 100%; margin-bottom: 2px; }
 
 @media (max-width: 360px) { 
-  .tippad .btn { width: 4.8em; } 
+  .tippad .btn { width: 4.3em; } 
+  .numpad .btn { width: 5.7em; }
   .numpad, .tippad, .rates, #payment { padding-left: 5px; }
   .rates { width: 100%; text-align: left; }
   #address{ font-size: 16px; }
@@ -69,6 +73,7 @@ div#calculator {
   #logo { display: none; padding: 10px 0; margin-bottom: 10px; max-height: 225px; width: 100%; }
   #error { margin-top: 10px; }
   #qr { padding-bottom: 10px; margin-left: 20px; }
+  .numpad .btn-primary { background: #abc; }
 }
 
 td.total { font-weight: bold; text-align: right; }
@@ -89,3 +94,30 @@ td.total { font-weight: bold; text-align: right; }
 @page {
    margin: 0;
 }
+
+.btn-sample {
+	color: #FFFFFF;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	background-color: #DBDBDB;
+	*background-color: #DBDBDB;
+	background-image: -moz-linear-gradient(top, #B5B5B5, #DBDBDB);
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B5B5B5), to(#DBDBDB));
+	background-image: -webkit-linear-gradient(top, #B5B5B5, #DBDBDB);
+	background-image: -o-linear-gradient(top, #B5B5B5, #DBDBDB);
+	background-image: linear-gradient(to bottom, #B5B5B5, #DBDBDB);
+	background-repeat: repeat-x;
+	border-color: #DBDBDB;
+	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B5B5B5', endColorstr='#DBDBDB', GradientType=0);
+	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+.btn-sample:hover,
+.btn-sample:focus,
+.btn-sample:active,
+.btn-sample.active,
+.btn-sample.disabled,
+.btn-sample[disabled] {
+	color: #FFFFFF;
+	background-color: #DBDBDB;
+	*background-color: #003bb3;
+}
diff --git a/public/js/calculator.coffee b/public/js/calculator.coffee
index 1b5f5034..cf1e1d24 100644
--- a/public/js/calculator.coffee
+++ b/public/js/calculator.coffee
@@ -35,7 +35,7 @@ $(->
       updateTotal()
       return
 
-    return if n > 1000
+    return if n > 100000
     
     if m is '00'
       n = 100 * n
@@ -57,10 +57,14 @@ $(->
   $('.tippad .btn').off('click').click((e) ->
     e.preventDefault()
 
+    text = $(this).html()
+    if text is 'No Tip'
+      value = 0
+    else
+      value = text.slice(1, -1)
+
     $(this).addClass('active')
-    value = $(this).html().slice(0, -1)
-    $(this).siblings().css('font-weight','normal').removeClass('active')
-    $(this).css('font-weight','bold')
+    $(this).siblings().removeClass('active')
     g.tip = 1 + (parseFloat(value)/100)
     updateTotal()
   )
@@ -149,7 +153,7 @@ updateTotal = ->
 
   time = 0
   if g.timeout
-    time = 1500
+    time = 10
 
   clearTimeout(g.timeout)
   g.timeout = setTimeout(->
diff --git a/public/js/calculator.js b/public/js/calculator.js
index f54e70bd..4dccce40 100644
--- a/public/js/calculator.js
+++ b/public/js/calculator.js
@@ -44,7 +44,7 @@
         updateTotal();
         return;
       }
-      if (n > 1000) {
+      if (n > 100000) {
         return;
       }
       if (m === '00') {
@@ -61,12 +61,16 @@
       return updateTotal();
     });
     $('.tippad .btn').off('click').click(function(e) {
-      var value;
+      var text, value;
       e.preventDefault();
+      text = $(this).html();
+      if (text === 'No Tip') {
+        value = 0;
+      } else {
+        value = text.slice(1, -1);
+      }
       $(this).addClass('active');
-      value = $(this).html().slice(0, -1);
-      $(this).siblings().css('font-weight', 'normal').removeClass('active');
-      $(this).css('font-weight', 'bold');
+      $(this).siblings().removeClass('active');
       g.tip = 1 + (parseFloat(value) / 100);
       return updateTotal();
     });
@@ -151,7 +155,7 @@
     $('#qr').css('height', size);
     time = 0;
     if (g.timeout) {
-      time = 1500;
+      time = 10;
     }
     clearTimeout(g.timeout);
     return g.timeout = setTimeout(function() {
diff --git a/views/users/show.html b/views/users/show.html
index c65b4efd..aa1e9006 100644
--- a/views/users/show.html
+++ b/views/users/show.html
@@ -18,56 +18,60 @@ Your email has been verified. Thank you!
   <img id="logo" src="/img/bitcoin.png" alt="Logo" />
 
   <div id="controls">
-    <div class="rates tablet pull-right" style="margin-top: -20px; width: 9em">
-      <h2><small>@</small><span class="exchange"></span></h2>
-      <h3 style="margin-top: 0"><span class="label label-default symbol"></span></h3>
-      <h3><span class="label label-success commission"></span></h3>
-    </div>
-
     <div class="numpad pull-left">
       <h2><span class="amount">0.00</span> <small class="currency"></small></h2>
-      <button class="btn btn-lg btn-primary">1</button>
-      <button class="btn btn-lg btn-primary">2</button>
-      <button class="btn btn-lg btn-primary">3</button>
+      <button class="btn btn-lg btn-default">1</button>
+      <button class="btn btn-lg btn-default">2</button>
+      <button class="btn btn-lg btn-default">3</button>
       <br />
-      <button class="btn btn-lg btn-primary">4</button>
-      <button class="btn btn-lg btn-primary">5</button>
-      <button class="btn btn-lg btn-primary">6</button>
+      <button class="btn btn-lg btn-default">4</button>
+      <button class="btn btn-lg btn-default">5</button>
+      <button class="btn btn-lg btn-default">6</button>
       <br />
-      <button class="btn btn-lg btn-primary">7</button>
-      <button class="btn btn-lg btn-primary">8</button>
-      <button class="btn btn-lg btn-primary">9</button>
+      <button class="btn btn-lg btn-default">7</button>
+      <button class="btn btn-lg btn-default">8</button>
+      <button class="btn btn-lg btn-default">9</button>
       <br />
-      <button class="btn btn-lg btn-primary">C</button>
-      <button class="btn btn-lg btn-primary">0</button>
-      <button class="btn btn-lg btn-primary" style="padding: 13px 0"><i class="fa fa-arrow-left"></i></button>
+      <button class="btn btn-lg btn-default">C</button>
+      <button class="btn btn-lg btn-default">0</button>
+      <button class="btn btn-lg btn-default" style="padding: 13px 0"><i class="fa fa-arrow-left"></i></button>
     </div>
 
     <div class="tippad tablet">
       <h2><small>+</small><span class="tip"></span></h2>
-        <button type="button" class="active btn btn-lg btn-default">0%</button><br />
-        <button type="button" class="btn btn-lg btn-default">10%</button><br />
-        <button type="button" class="btn btn-lg btn-default">15%</button><br />
-        <button type="button" class="btn btn-lg btn-default">20%</button>
+        <button type="button" class="active btn btn-lg btn-default">No Tip</button><br />
+        <button type="button" class="btn btn-lg btn-default">+10%</button><br />
+        <button type="button" class="btn btn-lg btn-default">+15%</button><br />
+        <button type="button" class="btn btn-lg btn-default">+20%</button>
+    </div>
+
+    <div class="rates tablet">
+      <h2>
+        <small>Exchange rate</small> 
+        <span class="exchange"></span>
+        <span class="label label-default symbol"></span> 
+        <span class="label label-success commission"></span>
+      </h2>
     </div>
 
     <div class="clearfix mobile"></div>
     <div class="tippad mobile" style="margin-top: 10px">
       <h2><small>+</small><span class="tip"></span> <small>TIP</small></h2>
       <div class="btn-group">
-        <button type="button" class="active btn btn-lg btn-default">0%</button>
-        <button type="button" class="btn btn-lg btn-default">10%</button>
-        <button type="button" class="btn btn-lg btn-default">15%</button>
-        <button type="button" class="btn btn-lg btn-default">20%</button>
+        <button type="button" class="active btn btn-lg btn-default">No Tip</button>
+        <button type="button" class="btn btn-lg btn-default">+10%</button>
+        <button type="button" class="btn btn-lg btn-default">+15%</button>
+        <button type="button" class="btn btn-lg btn-default">+20%</button>
       </div>
     </div>
 
     <div class="rates mobile">
-      <h3 class="pull-right" style="margin-top: -2px">
+      <h2>
+        <small>Exchange Rate</small><br />
+        <span class="exchange"></span>
         <span class="label label-default symbol"></span> 
         <span class="label label-success commission"></span>
-      </h3>
-      <h2><small>@</small><span class="exchange"></span></h2>
+      </h2>
     </div>
   </div>