Cleaning up jade and styles

leopic · Sep 29, 2012 · 318a76b · 318a76b
1 parent a75a9a0
commit 318a76b
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 92 deletions.
diff --git a/app.js b/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());

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fee calculator",
+  "name": "feeCalculator",
   "version": "0.0.1",
   "private": true,
   "scripts": {

diff --git a/public/images/paypal.png b/public/images/paypal.png
diff --git a/public/javascripts/calc.js b/public/javascripts/calc.js
@@ -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();

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -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;

diff --git a/public/stylesheets/style.styl b/public/stylesheets/style.styl
@@ -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
 

diff --git a/views/index.jade b/views/index.jade
@@ -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: 
+          |&nbsp;initial amount
+        li
           b.amt $
           span#b2b-total-fees.amt 0.00
-        li Final amount: 
+          |&nbsp;total fees
+        li
           b.amt $
           span#b2b-final-amount.amt 0.00
+          |&nbsp;final amount