From ab0345f34200b5ebef1e40554b4328b70611b1a9 Mon Sep 17 00:00:00 2001
From: Bechi <bechilandia@gmail.com>
Date: Tue, 8 Apr 2014 14:16:38 -0300
Subject: [PATCH] transaction page

---
 css/main.css | 20 +++++++++----
 index.html   | 84 +++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/css/main.css b/css/main.css
index 4446c57c5..9ceb2b6fc 100644
--- a/css/main.css
+++ b/css/main.css
@@ -78,7 +78,7 @@ body {
 }
 
 .panel:hover {
-  background: #111;
+  background: #efefef;
 }
 
 .box-backup {
@@ -91,21 +91,31 @@ a.box-backup {
   color: #111;
 }
 
-a.panel:hover, a.panel:hover p {
-  color:#fff;
-}
-
 .box-backup i {
   margin-bottom: 2rem;
   display: block;
 }
 
+p {
+  margin-bottom: 0.5rem;
+}
+
+.pending button {
+  margin: 0;
+}
+
+.line {
+  border-top: 1px solid #ccc;
+  padding-bottom: 1rem;
+}
+
 button.primary { background-color: #111; }
 button.secondary { background-color: #FAE448 !important; }
 
 button.primary:hover { background-color: #333;}
 button.secondary:hover { background-color: #D7C020 !important;}
 
+.m0 {margin: 0;}
 .db {display: block;}
 .size-12 { font-size: 12px; }      
 .size-14 { font-size: 14px; }
diff --git a/index.html b/index.html
index 20b6ecdcd..534d427a2 100644
--- a/index.html
+++ b/index.html
@@ -123,38 +123,68 @@
       </div>
     </script>
 
-
+    
     <!-- TRANSACTIONS -->
     <script type="text/ng-template" id="transactions.html">
       <div class="transactions" data-ng-controller="TransactionsController">
-      <h2>{{title}}</h2>
-      <div class="row">
-        <div class="large-6 columns">
-          <h3>Input</h3>
-          <accordion close-others="oneAtATime">
-            <accordion-group ng-repeat="tx in txsinput">
-              <accordion-heading>
-                {{tx.fromAddr}} -> {{tx.toAddr}} : {{tx.amount}}
-              </accordion-heading>
+      
+        <div class="row">
+          <div class="large-6 columns">
+            <h2>Output</h2>
+            <div class="panel pending">
               <div class="row">
-                <div class="col-xs-6 col-md-4">ignore</div>
-                <div class="col-xs-6 col-md-4">(Required 3 copay)</div>
-                <div class="col-xs-6 col-md-4">sign</div>
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-right size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+                <div class="large-12 columns m0">
+                  <div class="line"></div>
+                  <button class="primary round large-4 columns"><i class="large-2 columns fi-x size-16 text-center"></i> Ignore</button>
+                  <small class="large-4 columns text-center">Faltan 3 cosigners</small>
+                  <button class="secondary round large-4 columns"><i class="large-2 columns fi-check size-16 text-center"></i> Sign</button>
+                </div>
+              </div> <!-- end of row -->
+            </div> <!-- end of pending -->
+            <div class="line"></div>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-right size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
               </div>
-            </accordion-group>
-          </accordion> 
-        </div>
-        <div class="large-6 columns">
-          <h3>Output</h3>
-          <accordion close-others="oneAtATime">
-            <accordion-group ng-repeat="tx in txsoutput">
-              <accordion-heading>
-                {{tx.fromAddr}} <- {{tx.toAddr}} : {{tx.amount}}
-              </accordion-heading>
-              Details...
-            </accordion-group>
-          </accordion>
-        </div>
+            </div>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-right size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+              </div>
+            </div>
+          </div>
+          <div class="large-6 columns">
+            <h2>Input</h2>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-left size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+              </div>
+            </div>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-left size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+              </div>
+            </div>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-left size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+              </div>
+            </div>
+          </div>
+        </div>    
       </div>
    </script>