Permalink
Browse files

Cleaning up jade and styles

  • Loading branch information...
leopic committed Sep 29, 2012
1 parent a75a9a0 commit 318a76bcafb8a4d24edd7a32ff86f191281e2440
Showing with 104 additions and 92 deletions.
  1. +1 −1 app.js
  2. +1 −1 package.json
  3. BIN public/images/paypal.png
  4. +3 −0 public/javascripts/calc.js
  5. +44 −41 public/stylesheets/style.css
  6. +46 −41 public/stylesheets/style.styl
  7. +9 −8 views/index.jade
View
2 app.js
@@ -14,7 +14,7 @@ app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
- app.use(express.favicon());
+ //app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
View
@@ -1,5 +1,5 @@
{
- "name": "fee calculator",
+ "name": "feeCalculator",
"version": "0.0.1",
"private": true,
"scripts": {
View
Binary file not shown.
@@ -6,6 +6,9 @@ function init() {
// layout 'manager'
document.getElementById('compare-checkbox').onchange = switchMethod;
+
+ // add initial focus to input box
+ document.getElementById('total-amount').focus();
}
init();
@@ -1,80 +1,83 @@
body {
- padding: 2%;
- font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-}
-a {
- color: #00b7ff;
-}
-.container {
- width: 800px;
- margin: 0 auto;
-}
-.total-input {
- border: none;
- border-bottom: 1px solid #aaa;
- font-size: 24px;
- font-family: Georgia, Times New Roman, serif;
- height: 40px;
- padding: 0 10px;
- text-align: center;
- width: 80px;
+ font: 16px/24px "Lucida Grande", Helvetica, Arial, sans-serif;
}
.amt {
color: #333;
font-size: 22px;
font-weight: bold;
line-height: 28px;
}
-.receiving-amt {
+.calc-form {
+ background: $gray;
+}
+.comparison {
display: inline-block;
+ padding: 70px 15px 15px;
vertical-align: top;
+ width: 320px;
}
-.calc-form {
- background: rgba(0,0,0,0.02);
- padding: 0 0 0 10px;
+.comparison.best {
+ background-color: $gray;
+}
+.comparison.comparison-paypal {
+ text-align: right;
+}
+.comparison .b2b-initial-amount {
+ margin-bottom: 27px;
+}
+.container {
+ margin: 0 auto;
+ width: 700px;
}
.pay-breakdown {
- padding: 0;
margin: 0;
- list-style-position: inside;
+ padding: 0;
+ list-style-type: none;
}
.payment-method .pay-breakdown {
margin-right: 400px;
}
.payment-method .pay-breakdown li {
+ color: #666;
list-style-type: none;
- margin-right: 70px;
text-align: right;
- color: #666;
}
-.total-input {
- background: transparent;
- margin-left: 10px;
+.receiving-amt {
+ display: inline-block;
+ vertical-align: top;
}
-.comparison h2 {
- visibility: hidden;
+.total-input {
+ background: #fff;
+ border: 1px solid #bfbfbf;
+ border-radius: 3px;
+ font-size: 24px;
+ font-family: Georgia, Times New Roman, serif;
+ height: 40px;
+ margin: 10px 5px 0 10px;
+ padding: 0 10px;
+ text-align: center;
+ width: 80px;
}
-.comparison.best {
- background-color: rgba(0,0,0,0.02);
+.total-input:focus {
+ box-shadow: 0 0 16px #969696, 0 0 10px #c9c9c9, 0 0 4px #fcfcfc;
+ outline: 0;
}
.paypal,
.comparison-paypal {
- background: url("/images/paypal.png") top left no-repeat;
+ background: url("/images/paypal.png") -5px 35px no-repeat;
}
.bank-transfer,
.comparison-bank-transfer {
background: url("/images/bncr.gif") left 48px no-repeat;
}
.comparison-paypal {
- background-position: 0 -29px;
+ background-position: center 10px;
}
.comparison-bank-transfer {
- background-position: 0 4px;
+ background-position: top center;
}
-.comparison {
- display: inline-block;
- width: 50%;
- vertical-align: top;
+.hidden {
+ display: none;
}
.recommendation-body #comparison {
display: none;
@@ -1,81 +1,86 @@
body
- padding: 2%
- font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
-
-a
- color: #00B7FF
-
-.container
- width: 800px
- margin: 0 auto
-
-.total-input
- border: none
- border-bottom: 1px solid #aaa
- font-size: 24px
- font-family: Georgia, Times New Roman, serif
- height: 40px
- padding: 0 10px
- text-align: center
- width: 80px
+ font: 16px/24px "Lucida Grande", Helvetica, Arial, sans-serif
.amt
color: #333
font-size: 22px
font-weight: bold
line-height: 28px
-.receiving-amt
+.calc-form
+ background: $gray
+
+.comparison
display: inline-block
+ padding: 70px 15px 15px
vertical-align: top
+ width: 320px
-.calc-form
- background: rgba(0, 0, 0, 0.02)
- padding: 0 0 0 10px
+ &.best
+ background-color: $gray
+
+ &.comparison-paypal
+ text-align: right
+
+ .b2b-initial-amount
+ margin-bottom: 27px
+
+.container
+ margin: 0 auto
+ width: 700px
.pay-breakdown
- padding: 0
margin: 0
- list-style-position: inside
+ padding: 0
+ list-style-type: none
.payment-method .pay-breakdown
margin-right: 400px
li
+ color: #666
list-style-type: none
- margin-right: 70px
text-align: right
- color: #666
-.total-input
- background: transparent
- margin-left: 10px
+.receiving-amt
+ display: inline-block
+ vertical-align: top
-.comparison h2
- visibility: hidden
+.total-input
+ background: #fff
+ border: 1px solid lighten(black, 75%)
+ border-radius: 3px
+ font-size: 24px
+ font-family: Georgia, Times New Roman, serif
+ height: 40px
+ margin: 10px 5px 0 10px
+ padding: 0 10px
+ text-align: center
+ width: 80px
-.comparison.best
- background-color: rgba(0, 0, 0, 0.02)
+ &:focus
+ box-shadow: 0 0 16px lighten(black, 59%), 0 0 10px lighten(black, 79%), 0 0 4px lighten(black, 99%)
+ outline: 0
+// background images
.paypal,
.comparison-paypal
- background: url('/images/paypal.png') top left no-repeat
+ background: url('/images/paypal.png') -5px 35px no-repeat
.bank-transfer,
.comparison-bank-transfer
background: url('/images/bncr.gif') left 48px no-repeat
.comparison-paypal
- background-position: 0 -29px
+ background-position: center 10px
.comparison-bank-transfer
- background-position: 0 4px
+ background-position: top center
-.comparison
- display: inline-block
- width: 50%
- vertical-align: top
+.hidden
+ display: none
+// toggle classes, hide stuff when needed
.recommendation-body #comparison
display: none
View
@@ -4,7 +4,7 @@ block content
h1= title
form.calc-form
- h2.receiving-amt Amount to be received:
+ h2.receiving-amt Amount to receive:
input(type='text', value='', placeholder='$0.00').total-input#total-amount
label.compare-label
input(type='checkbox')#compare-checkbox
@@ -13,10 +13,10 @@ block content
div.payment-method.recommendation#recommendation
h2#preferred-method Recommended payment method
ul.pay-breakdown
- li Initial amount:
+ li Initial amount:
b.amt $
span#initial-amount.amt 0.00
- li After Paypal fees:
+ li After Paypal fees:
b.amt $
span#new-amount.amt 0.00
li Total fees:
@@ -30,7 +30,6 @@ block content
div#comparison.side-comparison
.comparison.comparison-paypal
- h2 Paypal
ul.pay-breakdown
li Initial amount:
b.amt $
@@ -47,15 +46,17 @@ block content
span#ppl-final-amount.amt 0.00
.comparison.comparison-bank-transfer
- h2 Banco Nacional
ul.pay-breakdown
- li Initial amount:
+ li.b2b-initial-amount
b.amt $
span#b2b-initial-amount.amt 0.00
- li Total fees:
+ | initial amount
+ li
b.amt $
span#b2b-total-fees.amt 0.00
- li Final amount:
+ | total fees
+ li
b.amt $
span#b2b-final-amount.amt 0.00
+ | final amount

0 comments on commit 318a76b

Please sign in to comment.