Update styles

12 files changed, 54 insertions, 86 deletions

diff --git a/public/css/calculator.css b/public/css/calculator.css
index 7e98a3ba..d2211ff9 100644
--- a/public/css/calculator.css
+++ b/public/css/calculator.css
@@ -9,11 +9,10 @@ body {
   line-height: 100%;
 }
 h1 {
-  width: 100%;
   margin-top: 0;
 }
 div.container-fluid {
-  width: 480px;
+  max-width: 480px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
@@ -21,36 +20,28 @@ div.container-fluid {
 }
 .navbar-toggle {
   background-color: #428bca;
-  width: 480px;
+  width: 100%;
   position: absolute;
   top: 0px;
-  height: 20px;
-  padding: 0 10px 10px 0;
+  height: 30px;
   margin: 0;
   float: none;
   z-index: 1;
 }
+.navbar-toggle .glyphicon {
+  margin-top: -5px;
+}
 .navbar {
   margin: 0;
-  padding: 0;
-}
-.navbar-collapse {
-  padding: 0;
 }
 .navbar-collapse.in {
   overflow-y: visible;
 }
 .nav {
-  margin-top: 20px;
-  padding: 0;
+  margin-top: 30px;
 }
-.nav li {
-  margin-left: 15px;
-  width: 480px;
-}
-.form-group .form-control {
-  height: 40px;
-  padding: 3px;
+.nav li a {
+  padding: 10px 0 10px 10px;
 }
 .form-group label {
   font-weight: normal;
@@ -59,8 +50,7 @@ div.container-fluid {
 }
 .form-group p,
 .form-group span,
-.form-group input[type="text"],
-.form-group select {
+.form-group .form-control {
   font-size: 18px;
 }
 .form-group span,
@@ -68,12 +58,10 @@ div.container-fluid {
   color: #999;
 }
 .form-group .form-control {
+  height: auto;
+  padding: 3px;
   display: inline-block;
 }
-form#setup .form-control,
-form#register .form-control {
-  width: 400px;
-}
 div#calculator #exchange,
 div#calculator #amount {
   width: 5em;
@@ -83,7 +71,10 @@ div#calculator span.btn {
   width: 80%;
 }
 div#calculator strong#total {
-  font-size: 2em;
+  font-size: 30px;
+}
+div#calculator p#address {
+  padding-top: 10px;
 }
 div#calculator #title {
   display: none;
@@ -101,10 +92,6 @@ td#total {
   font-weight: bold;
   text-align: right;
 }
-div#calculator p#address {
-  font-size: 1em;
-  margin-top: 20px;
-}
 #main-logo {
   background-image: url('../img/coinos_logo.png');
   width: 300px;
diff --git a/public/css/calculator.less b/public/css/calculator.less
index ad0cef53..f48f2dba 100644
--- a/public/css/calculator.less
+++ b/public/css/calculator.less
@@ -5,48 +5,41 @@
 
 body { text-align: center; }
 body { line-height: 100%; }
-h1 { width: 100%; margin-top: 0; }
+h1 { margin-top: 0; }
 	
 div.container-fluid {
-  width: 480px;
+  max-width: 480px;
   margin-left: auto;
   margin-right: auto;
   text-align:left;
   padding-bottom: 50px;
 }
 
-.navbar-toggle { background-color: #428bca; width: 480px; position: absolute; top: 0px; height: 20px; padding: 0 10px 10px 0; margin: 0; float: none; z-index: 1; }
-.navbar { margin: 0; padding: 0; }
-.navbar-collapse { padding: 0; } 
+.navbar-toggle { background-color: #428bca; width: 100%; position: absolute; top: 0px; height: 30px; margin: 0; float: none; z-index: 1; }
+.navbar-toggle .glyphicon { margin-top: -5px; }
+.navbar { margin: 0; }
 .navbar-collapse.in { overflow-y: visible; }
-.nav { margin-top: 20px; padding: 0; }
-.nav li { margin-left: 15px; width: 480px; }
+.nav { margin-top: 30px; }
+.nav li a { padding: 10px 0 10px 10px; }
 
 .form-group {
-  .form-control { height: 40px; padding: 3px; } 
   label { font-weight: normal; font-size: 14px; display: block; }
-  p, span, input[type="text"], select { font-size: 18px; }
+  p, span, .form-control { font-size: 18px; }
   span, label { color: #999; }
-  .form-control { display: inline-block; }
+  .form-control { height: auto; padding: 3px; display: inline-block; }
 }
 
-form#setup, form#register {
-  .form-control { width: 400px; }
-}
-
-
 div#calculator {
   #exchange, #amount { width: 5em; }
   span.btn { font-size: 1.4em; width: 80%; }
-  strong#total { font-size: 2em; }
+  strong#total { font-size: 30px; }
+  p#address { padding-top: 10px; }
   #title { display: none; }
   #logo { display: none; padding: 10px 0; margin-bottom: 10px; max-height: 250px; }
   #error { margin-top: 10px; }
 }
 
 td#total { font-weight: bold; text-align: right; }
-div#calculator p#address { font-size: 1em; margin-top: 20px; }
-
 
 #main-logo {
   background-image: url('../img/coinos_logo.png');
@@ -54,6 +47,7 @@ div#calculator p#address { font-size: 1em; margin-top: 20px; }
   height: 80px;
   margin-top: 10px;
 }
+
 .svg #main-logo {
   background-image: url('../img/coinos_logo.svg') !important;
   background-size: 300px 80px;
diff --git a/public/css/signin.css b/public/css/signin.css
index e25b5c9d..2f3291ff 100644
--- a/public/css/signin.css
+++ b/public/css/signin.css
@@ -2,11 +2,9 @@
   margin-bottom: 15px;
 }
 .form-signin {
-  max-width: 330px;
   margin-bottom: 10px;
 }
 .form-signin .form-control {
-  position: relative;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -14,18 +12,6 @@
   padding: 10px;
   font-size: 16px;
 }
-.form-signin .form-control:focus {
-  z-index: 2;
-}
-.form-signin input[type="text"] {
-  margin-bottom: -1px;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.form-signin input[type="password"] {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
 .notice {
   border: 1px solid gray;
   background: #eee;
diff --git a/public/css/signin.less b/public/css/signin.less
index 8d00db0f..1e109616 100644
--- a/public/css/signin.less
+++ b/public/css/signin.less
@@ -1,12 +1,10 @@
 #main-logo { margin-bottom: 15px; }
 
 .form-signin {
-  max-width: 330px;
   margin-bottom: 10px;
 }
 
 .form-signin .form-control {
-  position: relative;
   height: auto;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
@@ -15,19 +13,4 @@
   font-size: 16px;
 }
 
-.form-signin .form-control:focus {
-  z-index: 2;
-}
-
-.form-signin input[type="text"] {
-  margin-bottom: -1px;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.form-signin input[type="password"] {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .notice { border: 1px solid gray; background: #eee; padding: 10px; margin-bottom: 15px; }
diff --git a/public/img/blockchain.png b/public/img/blockchain.png
new file mode 100644
index 00000000..1d620cbe
--- /dev/null
+++ b/public/img/blockchain.png
diff --git a/public/js/calculator.coffee b/public/js/calculator.coffee
index 039ffd73..0ccea5ce 100644
--- a/public/js/calculator.coffee
+++ b/public/js/calculator.coffee
@@ -80,7 +80,7 @@ setup = ->
   $('#logo').click -> $(location).attr("href","/#{g.user}/edit")
   address = g.address
   if g.user? and g.user
-    address = "<a href='http://blockchain.info/address/#{address}'>#{address}</a>"
+    address = "#{address} <a href='http://blockchain.info/address/#{address}' target='_blank'><img src='/img/blockchain.png' /></a>"
 
   if check_address(g.address)
     $('#address').html(address)
diff --git a/public/js/calculator.js b/public/js/calculator.js
index 88fcbd22..d552b895 100644
--- a/public/js/calculator.js
+++ b/public/js/calculator.js
@@ -78,7 +78,7 @@
     });
     address = g.address;
     if ((g.user != null) && g.user) {
-      address = "<a href='http://blockchain.info/address/" + address + "'>" + address + "</a>";
+      address = "" + address + " <a href='http://blockchain.info/address/" + address + "' target='_blank'><img src='/img/blockchain.png' /></a>";
     }
     if (check_address(g.address)) {
       $('#address').html(address);
diff --git a/public/js/signin.coffee b/public/js/signin.coffee
new file mode 100644
index 00000000..df7dbb39
--- /dev/null
+++ b/public/js/signin.coffee
@@ -0,0 +1,6 @@
+$(->
+  $('#register').click(->
+    window.location.href = '/register'
+    $(this).preventDefault()
+  )
+)
diff --git a/public/js/signin.js b/public/js/signin.js
new file mode 100644
index 00000000..3383de15
--- /dev/null
+++ b/public/js/signin.js
@@ -0,0 +1,9 @@
+(function() {
+  $(function() {
+    return $('#register').click(function() {
+      window.location.href = '/register';
+      return $(this).preventDefault();
+    });
+  });
+
+}).call(this);
diff --git a/views/calculator/show.html b/views/calculator/show.html
index 31c9071a..d0be8db2 100644
--- a/views/calculator/show.html
+++ b/views/calculator/show.html
@@ -44,7 +44,7 @@
     <br />
 
     <div id="payment">
-      <p>Please send <strong id="total">0.0</strong> mBTC to</p><br />
+      <p>Please send <strong id="total">0.0</strong> mBTC to</p>
       <div id="qr"></div>
       <p id="address"></p>
     </div>
diff --git a/views/layout.html b/views/layout.html
index 03b98e4f..2a30cda2 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-		<meta name="viewport" content="width=480, height=752, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+		<meta name="viewport" content="width=device-width, height=752, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
     <title>CoinOS</title>
     <link href="img/favicon.ico" rel="shortcut icon" />
     <link rel='stylesheet' href='/css/calculator.css'>
diff --git a/views/sessions/new.html b/views/sessions/new.html
index 94eec9ac..a871e66c 100644
--- a/views/sessions/new.html
+++ b/views/sessions/new.html
@@ -7,7 +7,9 @@
     <link href="img/favicon.ico?v2" rel="shortcut icon" />
     <link rel='stylesheet' href='/css/calculator.css'>
     <link rel='stylesheet' href='/css/signin.css'>
-    <script src='modernizr-2.6.2-respond-1.1.0.min.js'></script>
+    <script src='/js/modernizr-2.6.2-respond-1.1.0.min.js'></script>
+    <script src='/js/jquery-1.8.2.min.js'></script>
+    <script src='/js/signin.js'></script>
   </head>
   <body>
     <div class="container-fluid">
@@ -33,9 +35,10 @@
         <br />
         <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
       </form>
-      <form class="form-signin" action="/users/new">
-        <button class="btn btn-lg btn-secondary btn-block">Register</button>
-      </form>
+
+      <p>
+        <button id="register" class="btn btn-lg btn-secondary btn-block">Register</button>
+      </p>
 
       <p><a href="http://bitcoincoop.org/coinos">What is this?</a></p>
     </div>