From 898d21a7cc1fe23a48896618e638b63130ac7c8c Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 17 Sep 2016 19:02:51 -0700 Subject: Display and sizing adjustments to handle larger numbers and fit better on small screens (fixes #48) --- public/css/coinos.css | 43 ++++++++++++++++++++++++++++--- public/css/coinos.less | 40 ++++++++++++++++++++++++++--- public/js/calculator.coffee | 14 ++++++---- public/js/calculator.js | 16 +++++++----- views/users/show.html | 62 ++++++++++++++++++++++++--------------------- 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!
-
-

@

-

-

-
-

0.00

- - - + + +
- - - + + +
- - - + + +
- - - + + +

+

-
-
-
- +
+
+
+ +
+ +
+

+ Exchange rate + + + +

+ TIP

- - - - + + + +
-

+

+ Exchange Rate
+ -

-

@

+
-- cgit v1.2.3