Frontpage facelift

6 files changed, 208 insertions, 177 deletions

diff --git a/public/css/coinos.css b/public/css/coinos.css
index dc2a3e50..2f2a2b98 100644
--- a/public/css/coinos.css
+++ b/public/css/coinos.css
@@ -1,12 +1,23 @@
+@media (min-width: 580px) {
+  .mobile {
+    display: none;
+  }
+}
+@media (max-width: 360px) {
+  .tablet {
+    display: none;
+  }
+}
 h1 {
   margin-top: 0;
 }
 div.container-fluid {
-  max-width: 480px;
+  max-width: 580px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
-  padding-bottom: 50px;
+  padding: 0;
+  padding-bottom: 10px;
 }
 .navbar-toggle {
   background-color: #428bca;
@@ -33,6 +44,35 @@ div.container-fluid {
 #connection {
   display: none;
 }
+.numpad .btn,
+.tippad .btn {
+  margin-bottom: 5px;
+  padding: 10px;
+  width: 4.5em;
+}
+.numpad h2,
+.tippad h2 {
+  margin-bottom: 2px;
+  margin-top: 1px;
+}
+.numpad {
+  width: 18em;
+}
+.rates {
+  width: 14em;
+  margin-top: -15px;
+  text-align: right;
+}
+#payment h2 {
+  margin-bottom: 2px;
+}
+.no-transition {
+  -webkit-transition: height 0.01s;
+  -moz-transition: height 0.01s;
+  -ms-transition: height 0.01s;
+  -o-transition: height 0.01s;
+  transition: height 0.01s;
+}
 #nav .nav {
   margin-top: 30px;
 }
@@ -77,12 +117,12 @@ div#calculator #received {
 div#calculator strong#total {
   font-size: 30px;
 }
-div#calculator p#address {
-  font-size: 16px;
+div#calculator #address {
   padding-top: 10px;
 }
-div#calculator p#address a {
-  color: #000;
+div#calculator #address a {
+  color: #fff;
+  text-decoration: none;
 }
 div#calculator #title {
   display: none;
@@ -95,12 +135,15 @@ div#calculator #logo {
   display: none;
   padding: 10px 0;
   margin-bottom: 10px;
-  max-height: 250px;
+  max-height: 225px;
   width: 100%;
 }
 div#calculator #error {
   margin-top: 10px;
 }
+div#calculator #qr {
+  padding-bottom: 10px;
+}
 td#total {
   font-weight: bold;
   text-align: right;
@@ -116,29 +159,6 @@ td#total {
   background-image: url('../img/coinos_logo.svg') !important;
   background-size: 300px 80px;
 }
-#modal .tab-pane {
-  padding-top: 15px;
-}
-@media screen and (min-width: 768px) {
-  .modal-dialog {
-    width: 400px;
-    /* either % (e.g. 60%) or px (400px) */
-  }
-  #modal #qr {
-    padding-left: 40px;
-  }
-}
 @page {
   margin: 0;
 }
-div.pass-container {
-  height: 30px;
-}
-div.pass-bar {
-  height: 11px;
-  margin-top: 2px;
-}
-div.pass-hint {
-  font-family: arial;
-  font-size: 11px;
-}
diff --git a/public/css/coinos.less b/public/css/coinos.less
index 11f19007..de35aaf7 100644
--- a/public/css/coinos.less
+++ b/public/css/coinos.less
@@ -1,11 +1,15 @@
+@media (min-width: 580px) { .mobile { display: none; } }
+@media (max-width: 360px) { .tablet { display: none; } }
+
 h1 { margin-top: 0; }
 	
 div.container-fluid {
-  max-width: 480px;
+  max-width: 580px;
   margin-left: auto;
   margin-right: auto;
   text-align:left;
-  padding-bottom: 50px;
+  padding: 0;
+  padding-bottom: 10px;
 }
 
 .navbar-toggle { background-color: #428bca; width: 100%; position: absolute; top: 0px; height: 30px; margin: 0; float: none; z-index: 1; margin-bottom: -30px; }
@@ -14,6 +18,22 @@ div.container-fluid {
 .navbar-collapse.in { overflow-y: visible; }
 #connection { display: none; }
 
+.numpad .btn, .tippad .btn { margin-bottom: 5px; padding: 10px; width: 4.5em; }
+.numpad h2, .tippad h2 { margin-bottom: 2px; margin-top: 1px; }
+.numpad { width: 18em; }
+
+.rates { width: 14em; margin-top: -15px; text-align: right; }
+
+#payment h2 { margin-bottom: 2px; }
+
+.no-transition {
+  -webkit-transition: height 0.01s;
+  -moz-transition: height 0.01s;
+  -ms-transition: height 0.01s;
+  -o-transition: height 0.01s;
+  transition: height 0.01s;
+}
+
 #nav {
   .nav { margin-top: 30px; }
   .nav li a { padding: 10px 0 10px 10px; }
@@ -33,12 +53,13 @@ div#calculator {
   #amount { width: 5em; }
   #received { font-size: 16px; width: 100%; }
   strong#total { font-size: 30px; }
-  p#address { font-size: 16px; padding-top: 10px; }
-  p#address a { color: #000 }
+  #address { padding-top: 10px; }
+  #address a { color: #fff; text-decoration: none; }
   #title { display: none; }
   #title a { color: #000; text-decoration: none; }
-  #logo { display: none; padding: 10px 0; margin-bottom: 10px; max-height: 250px; width: 100%; }
+  #logo { display: none; padding: 10px 0; margin-bottom: 10px; max-height: 225px; width: 100%; }
   #error { margin-top: 10px; }
+  #qr { padding-bottom: 10px; }
 }
 
 td#total { font-weight: bold; text-align: right; }
@@ -56,29 +77,6 @@ td#total { font-weight: bold; text-align: right; }
   background-size: 300px 80px;
 }
 
-#modal .tab-pane { padding-top: 15px; }
-
-@media screen and (min-width: 768px) {
-  .modal-dialog {
-      width: 400px; /* either % (e.g. 60%) or px (400px) */
-  }
-
-  #modal #qr { padding-left: 40px; }
-}
-
 @page {
    margin: 0;
 }
-
-div.pass-container {
-    height: 30px;
-}
-
-div.pass-bar {
-    height: 11px;
-    margin-top: 2px;
-}
-div.pass-hint {
-    font-family: arial;
-    font-size: 11px;
-}
diff --git a/public/css/index.css b/public/css/index.css
deleted file mode 100644
index 8a3cd940..00000000
--- a/public/css/index.css
+++ /dev/null
@@ -1,49 +0,0 @@
-@import "bootstrap.min.css";
-@import "bootstrap-responsive.min.css";
-@import "font-awesome.css";
-.hero-unit {
-  background: url(/img/vancouver.jpg);
-  background-size: 100% 100%;
-}
-.hero-unit p {
-  background: rgba(255, 255, 255, 0.5);
-}
-.navbar-inverse,
-.navbar-inverse .navbar-link,
-.navbar-inverse .brand,
-.navbar-inverse .nav > li > a {
-  color: #eee;
-}
-footer {
-  background: black;
-  color: #ddd;
-  padding: 10px 0px 2px 5px;
-  margin: 0;
-  text-align: right;
-}
-#ask,
-#bid {
-  color: white;
-}
-div.directory {
-  width: 500px;
-  float: left;
-  border: 1px dashed #ccc;
-  padding: 10px;
-  margin: 10px;
-}
-div.directory img {
-  height: 180px;
-  float: left;
-  padding-right: 10px;
-}
-div.directory p {
-  font-size: 13px;
-}
-div.directory h2 a {
-  text-decoration: none;
-  color: #000;
-}
-div.row-fluid td.first {
-  text-align: right;
-}
diff --git a/public/css/index.less b/public/css/index.less
deleted file mode 100644
index a470c098..00000000
--- a/public/css/index.less
+++ /dev/null
@@ -1,30 +0,0 @@
-@import "bootstrap.min.css";
-@import "bootstrap-responsive.min.css";
-@import "font-awesome.css";
-
-.hero-unit {
-  background: url(/img/vancouver.jpg);
-  background-size: 100% 100%;
-}
-
-.hero-unit p {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.navbar-inverse, .navbar-inverse .navbar-link, .navbar-inverse .brand, .navbar-inverse .nav > li > a { color: #eee; }
-
-footer { 
-  background: black; 
-  color: #ddd; 
-  padding: 10px 0px 2px 5px; 
-  margin: 0;
-  text-align: right;
-}
-
-#ask, #bid { color: white; }
-div.directory { width: 500px; float: left;  border: 1px dashed #ccc; padding: 10px; margin: 10px; }
-div.directory img { height: 180px; float: left; padding-right: 10px; }
-div.directory p { font-size: 13px; }
-div.directory h2 a { text-decoration: none; color: #000; }
-div.row-fluid td.first { text-align: right; }
-
diff --git a/public/js/calculator.coffee b/public/js/calculator.coffee
index 407a80f5..69b24642 100644
--- a/public/js/calculator.coffee
+++ b/public/js/calculator.coffee
@@ -7,6 +7,7 @@ ADDRESS_FAIL = "Invalid address"
 g = exports ? this
 g.errors = []
 g.amount_requested = 0
+g.amount = 0.toFixed(2)
 g.tip = 1
 g.transactions = []
 
@@ -19,7 +20,44 @@ $(->
       setup()
   )
 
-  $('#tip button').click(->
+  $('button').click((e) ->
+    e.preventDefault()
+  )
+
+  $('.numpad .btn').off('click').click((e) ->
+    e.preventDefault()
+
+    m = $(this).html()
+    n = parseFloat($('.amount').html())
+
+    if m is 'C'
+      g.amount = 0.toFixed(2)
+      updateTotal()
+      return
+
+    return if n > 1000
+    
+    if m is '00'
+      n = 100 * n
+    else
+      n = 10 * n + parseFloat(m) / 100
+
+    g.amount = n.toFixed(2)
+
+    updateTotal()
+  )
+
+  $('.numpad .btn:last').off('click').click((e) ->
+    e.preventDefault()
+
+    g.amount = (Math.floor(100 * (parseFloat($('.amount').html()) / 10)) / 100).toFixed(2)
+    updateTotal()
+  )
+
+  $('.tippad .btn').off('click').click((e) ->
+    e.preventDefault()
+
+    $(this).addClass('active')
     value = $(this).html().slice(0, -1)
     $(this).siblings().css('font-weight','normal').removeClass('active')
     $(this).css('font-weight','bold')
@@ -27,15 +65,11 @@ $(->
     updateTotal()
   )
 
-  $('#amount').keyup(updateTotal)
-  $('#amount').focus(->
-    $('#received').hide()
-    $('#payment').fadeIn('slow')
-    $(this).val('')
-    updateTotal()
-  )
-
   $('#received').click(-> window.location = "/#{g.user.username}/report")
+  $('#slide').click(-> 
+    $('#controls').slideToggle() 
+    $(this).find('i').toggleClass('fa-sort-up').toggleClass('fa-sort-down')
+  )
 )
 
 setup = ->
@@ -55,11 +89,11 @@ setup = ->
 
   getAddress()
 
-  $('#symbol').html(g.user.currency)
-  $('#currency').html(g.user.currency)
-  $('#unit').html(g.user.unit)
+  $('.symbol').html(g.user.currency)
+  $('.currency').html(g.user.currency)
+  $('.unit').html(g.user.unit)
+
   $('#received').hide()
-  $('#tip button').first().click()
 
   fetchExchangeRate()
   listen()
@@ -79,7 +113,6 @@ fetchExchangeRate = ->
       updateTotal()
 
       unless g.setupComplete
-        $('#amount').focus()
         g.setupComplete = true
 
     error: -> fail(EXCHANGE_FAIL)
@@ -88,16 +121,37 @@ fetchExchangeRate = ->
 
 updateTotal = ->
   precision = 9 - multiplier().toString().length
-  amount = parseFloat($('#amount').val() * g.tip)
-  total = (amount * multiplier() / g.exchange).toFixed(precision)
-  g.amount_requested = (amount / g.exchange).toFixed(8)
+  subtotal = parseFloat(g.amount * g.tip).toFixed(2)
+  total = (subtotal * multiplier() / g.exchange).toFixed(precision)
+  g.amount_requested = (subtotal / g.exchange).toFixed(8)
 
   unless $.isNumeric(total)
     total = ''
 
+  $('#received').hide()
+  $('#payment').fadeIn('slow')
+
+  $('.tip').html((subtotal - g.amount).toFixed(2))
+  $('.subtotal').html(subtotal.toString())
+  $('.amount').html(g.amount)
+  $('.exchange').html(g.exchange)
+  $('.symbol').html(g.user.symbol)
+
+  if g.user.commission < 0
+    $('.commission').html("+#{Math.abs(g.user.commission)}%")
+
+
   $('#total').html(total.toString())
   $('#qr').html('')
-  new QRCode('qr', text: "bitcoin:#{g.user.address}?amount=#{g.amount_requested.toString()}", width: 280, height: 280)
+ 
+  # size = $('#calculator').width() * 0.7
+  size = 300
+  $('#qr').css('height', size)
+  new QRCode('qr', 
+    text: "bitcoin:#{g.user.address}?amount=#{g.amount_requested.toString()}"
+    width: size
+    height: size
+  )
 
 listen = ->
   g.attempts++
@@ -142,7 +196,6 @@ listen = ->
 
 logTransaction = (txid, amount) ->
   if $('#received').is(":hidden") and amount >= g.amount_requested
-    $('#amount').blur()
     $('#payment').hide()
     $('#received').fadeIn('slow')
     $('#success')[0].play()
diff --git a/public/js/calculator.js b/public/js/calculator.js
index 2808ad64..d8eb7217 100644
--- a/public/js/calculator.js
+++ b/public/js/calculator.js
@@ -16,6 +16,8 @@
 
   g.amount_requested = 0;
 
+  g.amount = 0..toFixed(2);
+
   g.tip = 1;
 
   g.transactions = [];
@@ -29,24 +31,52 @@
         return setup();
       }
     });
-    $('#tip button').click(function() {
+    $('button').click(function(e) {
+      return e.preventDefault();
+    });
+    $('.numpad .btn').off('click').click(function(e) {
+      var m, n;
+      e.preventDefault();
+      m = $(this).html();
+      n = parseFloat($('.amount').html());
+      if (m === 'C') {
+        g.amount = 0..toFixed(2);
+        updateTotal();
+        return;
+      }
+      if (n > 1000) {
+        return;
+      }
+      if (m === '00') {
+        n = 100 * n;
+      } else {
+        n = 10 * n + parseFloat(m) / 100;
+      }
+      g.amount = n.toFixed(2);
+      return updateTotal();
+    });
+    $('.numpad .btn:last').off('click').click(function(e) {
+      e.preventDefault();
+      g.amount = (Math.floor(100 * (parseFloat($('.amount').html()) / 10)) / 100).toFixed(2);
+      return updateTotal();
+    });
+    $('.tippad .btn').off('click').click(function(e) {
       var value;
+      e.preventDefault();
+      $(this).addClass('active');
       value = $(this).html().slice(0, -1);
       $(this).siblings().css('font-weight', 'normal').removeClass('active');
       $(this).css('font-weight', 'bold');
       g.tip = 1 + (parseFloat(value) / 100);
       return updateTotal();
     });
-    $('#amount').keyup(updateTotal);
-    $('#amount').focus(function() {
-      $('#received').hide();
-      $('#payment').fadeIn('slow');
-      $(this).val('');
-      return updateTotal();
-    });
-    return $('#received').click(function() {
+    $('#received').click(function() {
       return window.location = "/" + g.user.username + "/report";
     });
+    return $('#slide').click(function() {
+      $('#controls').slideToggle();
+      return $(this).find('i').toggleClass('fa-sort-up').toggleClass('fa-sort-down');
+    });
   });
 
   setup = function() {
@@ -65,11 +95,10 @@
       $('#logo').attr('src', src).show();
     }
     getAddress();
-    $('#symbol').html(g.user.currency);
-    $('#currency').html(g.user.currency);
-    $('#unit').html(g.user.unit);
+    $('.symbol').html(g.user.currency);
+    $('.currency').html(g.user.currency);
+    $('.unit').html(g.user.unit);
     $('#received').hide();
-    $('#tip button').first().click();
     fetchExchangeRate();
     return listen();
   };
@@ -88,7 +117,6 @@
         $('#exchange').html(g.exchange);
         updateTotal();
         if (!g.setupComplete) {
-          $('#amount').focus();
           return g.setupComplete = true;
         }
       },
@@ -100,20 +128,32 @@
   };
 
   updateTotal = function() {
-    var amount, precision, total;
+    var precision, size, subtotal, total;
     precision = 9 - multiplier().toString().length;
-    amount = parseFloat($('#amount').val() * g.tip);
-    total = (amount * multiplier() / g.exchange).toFixed(precision);
-    g.amount_requested = (amount / g.exchange).toFixed(8);
+    subtotal = parseFloat(g.amount * g.tip).toFixed(2);
+    total = (subtotal * multiplier() / g.exchange).toFixed(precision);
+    g.amount_requested = (subtotal / g.exchange).toFixed(8);
     if (!$.isNumeric(total)) {
       total = '';
     }
+    $('#received').hide();
+    $('#payment').fadeIn('slow');
+    $('.tip').html((subtotal - g.amount).toFixed(2));
+    $('.subtotal').html(subtotal.toString());
+    $('.amount').html(g.amount);
+    $('.exchange').html(g.exchange);
+    $('.symbol').html(g.user.symbol);
+    if (g.user.commission < 0) {
+      $('.commission').html("+" + (Math.abs(g.user.commission)) + "%");
+    }
     $('#total').html(total.toString());
     $('#qr').html('');
+    size = 300;
+    $('#qr').css('height', size);
     return new QRCode('qr', {
       text: "bitcoin:" + g.user.address + "?amount=" + (g.amount_requested.toString()),
-      width: 280,
-      height: 280
+      width: size,
+      height: size
     });
   };
 
@@ -166,7 +206,6 @@
 
   logTransaction = function(txid, amount) {
     if ($('#received').is(":hidden") && amount >= g.amount_requested) {
-      $('#amount').blur();
       $('#payment').hide();
       $('#received').fadeIn('slow');
       $('#success')[0].play();