From b523c9373ef114a9fb954bff51d2f098d5ed8600 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Tue, 29 Apr 2014 11:56:37 -0300
Subject: [PATCH 1/3] New design: footer and header schemas

---
 css/main.css        |  7 ++++---
 css/tpl-default.css |  5 +++++
 index.html          | 27 +++++++++++++++------------
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/css/main.css b/css/main.css
index 586157771..d3e74daed 100644
--- a/css/main.css
+++ b/css/main.css
@@ -14,12 +14,13 @@ html, body {height: 100%;}
 #wrap {min-height: 100%;}
 
 #main {overflow:auto;
-	padding-bottom: 20px;}  /* must be same height as the footer */
+	padding-bottom: 30px;}  /* must be same height as the footer */
 
 #footer {position: relative;
-	margin-top: -20px; /* negative value of footer height */
-	height: 20px;
+	margin-top: -30px; /* negative value of footer height */
+	height: 30px;
 	clear:both;
+  padding: 5px 2rem;
 }
 
 .logo {
diff --git a/css/tpl-default.css b/css/tpl-default.css
index 52db7e78a..f4dddaf31 100644
--- a/css/tpl-default.css
+++ b/css/tpl-default.css
@@ -157,3 +157,8 @@ button.secondary:hover { background-color: #FFDF00 !important;}
 
 .text-gray { color: #999;}
 
+#footer {
+  background: #2C3E50;
+  color: #fff;
+}
+
diff --git a/index.html b/index.html
index 6c7f95a10..1d6a72641 100644
--- a/index.html
+++ b/index.html
@@ -14,22 +14,21 @@
       <div data-ng-init="init()" data-ng-controller="HeaderController">
         <div class="header"> 
           <div class="header-content">
-            <div class="large-3 columns">
-              <a href="#" class="logo" title="copay"></a>
+            <div class="large-2 columns">
+              <span class="logo"></span>
             </div>
-            <div class="text-center large-9 columns m10t" ng-show="$root.wallet">
-              <h6 class="large-6 columns line-dashed-v">
+            <div class="text-center large-10 columns p10t" ng-show="$root.wallet">
+              <h6 class="large-5 columns line-dashed-v">
                 <span ng-if="!$root.wallet.name && $root.wallet.id">{{$root.wallet.id}}</span>
                 <span ng-if="$root.wallet.name">Wallet: {{$root.wallet.name}} &lt;{{$root.wallet.id}}&gt;</span> 
-                ({{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}) 
                 <a class="button radius small-icon" href="#" ng-click="signout()"><i class="fi-power"></i></a>
               </h6>
-              <p class="large-3 columns line-dashed-v">
+              <div class="large-3 columns line-dashed-v">
                 Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
-              </p>
-              <p class="large-3 columns">
+              </div>
+              <div class="large-4 columns">
                 Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i>
-              </p>
+              </div>
             </div>
           </div>
 
@@ -96,9 +95,13 @@
     </div>
   </div>
 
-  <div id="footer" class="row" data-ng-controller="FooterController">
-    <div class="large-12 columns text-center">
-      <link rel="stylesheet" ng-href="{{theme}}">
+  <div id="footer" data-ng-controller="FooterController" ng-show="$root.wallet">
+    <link rel="stylesheet" ng-href="{{theme}}">
+    <div class="large-4 columns">
+      <span class="size-12">Copayers 
+        {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}</span> 
+    </div>
+    <div class="large-8 columns text-right">
       <a class="size-12" ng-if="themes.length > 1" ng-click="change_theme(th)" ng-repeat="th in themes">{{th}} {{$last ? '' : '&middot; '}}</a>
     </div>
   </div>

From 50ebb2757bfad6e264946117ebebaea3b61a50be Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Tue, 29 Apr 2014 14:24:26 -0300
Subject: [PATCH 2/3] Fixes header. Mobile support

---
 css/main.css        |  9 +++++++++
 css/tpl-default.css |  4 ++++
 index.html          | 20 +++++++++++---------
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/css/main.css b/css/main.css
index d3e74daed..a164c55d3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -29,6 +29,13 @@ html, body {height: 100%;}
   height: 51px;
 }
 
+@media (max-width: 640px) {
+  .logo {
+    margin: 0 auto;
+    margin-bottom: 10px;
+  }
+}
+
 .top-bar-section li:not(.has-form) a:not(.button) {
   line-height: 60px;
 }
@@ -60,6 +67,7 @@ html, body {height: 100%;}
 .header a.button.small-icon {
   padding: 0.1rem 0.3rem;
   font-size: 0.9rem;
+  margin-left: 5px;
 }
 
 .header h1, h5, p {
@@ -237,6 +245,7 @@ hr { margin: 2.25rem 0;}
 .m10h {margin:0 10px;}
 .m30a {margin: 30px auto;}
 .br100 {border-radius: 100%;}
+.oh {overflow:hidden;}
 
 .signin input.ng-dirty.ng-invalid { 
   border: 2px red solid;
diff --git a/css/tpl-default.css b/css/tpl-default.css
index f4dddaf31..e18e6fc66 100644
--- a/css/tpl-default.css
+++ b/css/tpl-default.css
@@ -87,6 +87,10 @@ body {
   color: #fff;
 }
 
+.header-content a {
+  color: #fff;
+}
+
 .panel {
   color: #333;
   background: #FFFFFF;
diff --git a/index.html b/index.html
index 1d6a72641..c13093ecb 100644
--- a/index.html
+++ b/index.html
@@ -14,19 +14,21 @@
       <div data-ng-init="init()" data-ng-controller="HeaderController">
         <div class="header"> 
           <div class="header-content">
-            <div class="large-2 columns">
+            <div class="large-3 medium-3 columns">
               <span class="logo"></span>
             </div>
-            <div class="text-center large-10 columns p10t" ng-show="$root.wallet">
-              <h6 class="large-5 columns line-dashed-v">
-                <span ng-if="!$root.wallet.name && $root.wallet.id">{{$root.wallet.id}}</span>
-                <span ng-if="$root.wallet.name">Wallet: {{$root.wallet.name}} &lt;{{$root.wallet.id}}&gt;</span> 
-                <a class="button radius small-icon" href="#" ng-click="signout()"><i class="fi-power"></i></a>
-              </h6>
-              <div class="large-3 columns line-dashed-v">
+            <div class="large-9 medium-9 columns text-center p10t" ng-show="$root.wallet">
+              <div class="large-4 medium-4 columns line-dashed-v">
+                <a href="#/peer" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
+                  <span ng-if="!$root.wallet.name && $root.wallet.id">{{$root.wallet.id}}</span>
+                  <span ng-if="$root.wallet.name">{{$root.wallet.name}}</span>
+                </a> 
+                <a class="button radius small-icon" href="#" title="Signout" ng-click="signout()"><i class="fi-power"></i></a>
+              </div>
+              <div class="large-4 medium-4 columns line-dashed-v">
                 Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
               </div>
-              <div class="large-4 columns">
+              <div class="large-4 medium-4 columns">
                 Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i>
               </div>
             </div>

From cf2a0103072df9167660f7a78be51817ddcf5bd4 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Tue, 29 Apr 2014 15:17:14 -0300
Subject: [PATCH 3/3] Addresses TAB: if no address, show only button.

---
 css/main.css |  4 ++++
 index.html   | 36 ++++++++++++++++++------------------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/css/main.css b/css/main.css
index a164c55d3..4dbac797c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -215,6 +215,10 @@ small.has-error {
   }
 }
 
+.new-address {
+  width: 220px;
+}
+
 hr { margin: 2.25rem 0;}
 
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
diff --git a/index.html b/index.html
index c13093ecb..e25c6e2b1 100644
--- a/index.html
+++ b/index.html
@@ -255,24 +255,24 @@
     <script type="text/ng-template" id="addresses.html">
       <div class="addresses" data-ng-controller="AddressesController">
         <div ng-show='$root.wallet.publicKeyRing.isComplete()'>
-        <h3>Addresses (available to spend)</h3>
-        <div class="row">
-          <div class="large-6 columns">
-            <a class="panel db" ng-repeat="addr in addrs" ng-click="selectAddr(addr)">{{addr}}
-
- <span ng-if="!isMain[addr]">(change)</span>
- <span class="right">({{balanceByAddr[addr] || 0}} <i class="fi-bitcoin"></i>)</span></a>
-           
-          </div>
-          <div class="large-3 columns line-dashed-v text-center">
-            <qrcode size="160" data="{{selectedAddr}}"></qrcode>
-            <p class="m10t" ng-repeat="addr in addrs" ng-if="selectedAddr==addr"> <strong> {{balanceByAddr[addr]}} <i class="fi-bitcoin"></i> </strong> </p>
-          </div>
-          <div class="large-3 columns text-center">
-            <p> Create a New <strong> Address </strong> </p>
-            <button class="secondary round expand" ng-click="newAddr()" ng-disabled="loading" loading="Creating"> Create </button>
-          </div>
-        </div> 
+          <div class="row">
+            <div class="large-9 columns" ng-if="addrs[0]">
+              <h3>Addresses (available to spend)</h3>
+              <div class="large-8 columns">
+                <a class="panel db" ng-repeat="addr in addrs" ng-click="selectAddr(addr)">{{addr}}
+                <span ng-if="!isMain[addr]">(change)</span>
+                <span class="right">({{balanceByAddr[addr] || 0}} <i class="fi-bitcoin"></i>)</span></a>
+              </div>
+              <div class="large-4 columns line-dashed-v text-center">
+                <qrcode size="160" data="{{selectedAddr}}"></qrcode>
+                <p class="m10t" ng-repeat="addr in addrs" ng-if="selectedAddr==addr"> <strong> {{balanceByAddr[addr]}} <i class="fi-bitcoin"></i> </strong> </p>
+              </div>
+            </div>
+            <div class="columns text-center" ng-class="{'large-3' : addrs[0]}">
+              <p> Create a New <strong> Address </strong> </p>
+              <button class="secondary round expandi new-address" ng-click="newAddr()" ng-disabled="loading" loading="Creating"> Create </button>
+            </div>
+          </div> 
         </div> 
       </div>
     </script>