From c2fcb67347aea9337f490b8d9d41ad0f8a1d4ee7 Mon Sep 17 00:00:00 2001
From: Bechi <bechilandia@gmail.com>
Date: Tue, 15 Apr 2014 17:45:53 -0300
Subject: [PATCH] tx-page details

---
 css/main.css | 39 ++++++++++++++++++++++++++++++++++++---
 index.html   | 36 +++++++++++++++++++++++-------------
 2 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/css/main.css b/css/main.css
index 9029a4484..3be265826 100644
--- a/css/main.css
+++ b/css/main.css
@@ -77,7 +77,16 @@ body {
   border:0;
 }
 
-.panel:hover {
+.transactions .panel {
+  background: #ECECEC;
+}
+
+.transactions .panel.pending {
+  background-color: #fff; 
+  padding: 1rem;
+}
+
+.home .panel:hover {
   background: #efefef;
 }
 
@@ -105,17 +114,40 @@ h3 {
   border-right: 2px dashed #E3E3E3;
 }
 
+.line-dashed-h {
+  margin: 1rem 0;
+  border-bottom: 2px dashed #E3E3E3;
+}
+
 .panel p {
   margin-bottom: 0;
 }
 
+span.panel-res {
+  float: right;
+  width: 3%;
+  padding: 0.4rem 0.55rem;
+  margin: 0 1rem;
+  border-radius: 1rem;
+}
+
+.panel-sign {
+  color: #111;
+  background: #FAE448;
+}
+
+.panel-ignore {
+  color: #fff;
+  background: #111;
+}
+
 .pending button {
   margin: 0;
 }
 
 .line {
-  border-top: 1px solid #ccc;
-  padding-bottom: 1rem;
+  border-top: 1px solid #f2f2f2;
+  margin: 0.5rem 0 1rem;
 }
 
 button.primary { background-color: #111; }
@@ -124,6 +156,7 @@ button.secondary { background-color: #FAE448 !important; }
 button.primary:hover { background-color: #333;}
 button.secondary:hover { background-color: #FFDF00 !important;}
 
+.pr {position: relative;}
 .m0 {margin: 0;}
 .db {display: block;}
 .size-12 { font-size: 12px; }      
diff --git a/index.html b/index.html
index 305557eb3..057c049b5 100644
--- a/index.html
+++ b/index.html
@@ -152,14 +152,13 @@
       
         <div class="row">
           <div class="large-12 columns">
-            <h2>Pending Transactions <small>({{txsoutput.length}})</small></h2>
-            <div class="panel pending" ng-repeat="txp in txsoutput ">
+            <h3>Pending Transactions <small>({{txsoutput.length}})</small></h3>
+            <div class="panel pending" > <!-- ng-repeat="txp in txsoutput " -->
               {{txp}}
               <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"> Address 2</p>
-                <p>Transaction description</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>
@@ -168,28 +167,39 @@
                 </div>
               </div> <!-- end of row -->
             </div> <!-- end of pending -->
+            <div class="line-dashed-h"></div>
           </div>
+
           <div class="large-12 columns">
-            <h2>Last Transactions</h2>
+            <h3>Last Transactions</h3>
             <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>
+                <p class="large-5 columns"> Address 1 <small class="right"> 1231 BTC </small></p>
+                <i class="large-1 columns fi-arrow-left size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2 <small class="right"> 1231 BTC </small></p>
+                <span class="panel-res panel-sign">
+                  <i class="fi-check size-16"></i>
+                </span>
               </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>
+                <p class="large-5 columns"> Address 1 <small class="right"> 1231 BTC </small></p>
+                <i class="large-1 columns fi-arrow-left size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2 <small class="right"> 1231 BTC </small></p>
+                <span class="panel-res panel-sign">
+                  <i class="fi-check size-16"></i>
+                </span>
               </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>
+                <p class="large-5 columns"> Address 1 <small class="right"> 1231 BTC </small></p>
+                <i class="large-1 columns fi-arrow-left size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2 <small class="right"> 1231 BTC </small></p>
+                <span class="panel-res panel-ignore">
+                  <i class="fi-x size-16"></i>
+                </span>
               </div>
             </div>
           </div>