item tx new style

css/main.css

@@ -103,13 +103,13 @@ html, body {height: 100%;}
 .pending .txheader {
   margin-bottom: 10px;
   padding-bottom: 10px;
-  border-bottom: 1px solid #eee;
+  /* border-bottom: 1px solid #eee; */
 }
 
 .pending .txbottom {
   margin-top: 10px;
   padding-top: 10px;
-  border-top: 1px solid #eee;
+  /* border-top: 1px solid #eee; */
   font-size: 12px;
 }
 
@@ -236,7 +236,7 @@ hr { margin: 2.25rem 0;}
 .m10h {margin:0 10px;}
 .m30a {margin: 30px auto;}
 .br100 {border-radius: 100%;}
-
+.lh {line-height: 0;}
 .signin input.ng-dirty.ng-invalid { 
   border: 2px red solid;
 }
@@ -255,4 +255,43 @@ hr { margin: 2.25rem 0;}
   border: 10px solid gray;
 }
 
+.tx-copayers {
+  overflow: hidden;
+  padding: 0.5rem;
+}
+
+.box-copayers {
+  padding: 0.5rem 2rem 0.5rem 1rem;
+  float: left;
+}
+
+.box-copayers figure {
+  width: 51px;
+  height: 55px;
+  border-top-left-radius: 4px 4px;
+  border-bottom-left-radius: 4px 4px;
+  overflow: hidden;
+  margin-right: 0.8px;
+}
+
+.box-status {
+  width: 16px;
+  height: 55px;
+  border-top-right-radius: 4px 4px;
+  border-bottom-right-radius: 4px 4px;
+  float: left;
+  overflow: hidden;
+}
+
+.icon-status {
+  background: #2C3E50;
+  width: 16px;
+  float: left;
+  text-align: center;
+  display: block;
+  margin: 0.8px;
+  padding: 2.7px;
+}
+
+
 

css/tpl-default.css

@@ -100,10 +100,6 @@ body {
   background-color: #fff; 
 }
 
-.pending .txbottom {
-  border-top: 1px solid #eee;
-}
-
 .btransactions .panel {
   background: #fff;
 }
@@ -141,6 +137,30 @@ a.box-backup {
   color:#C0392A;
 }
 
+.tx-copayers {
+  background: #F8F8F8;
+  -moz-box-shadow:    inset 0px 0px 4px 0px rgba(0,0,0,0.05), inset 0px 1px 1px 0px rgba(0,0,0,0.05);
+  box-shadow:         inset 0px 0px 4px 0px rgba(0,0,0,0.05), inset 0px 1px 1px 0px rgba(0,0,0,0.05);
+}
+
+.box-copayers .icon-inactive {
+  color: #4C5B69;
+}
+
+.box-copayers .icon-active {
+  color: #fff;
+}
+
+.box-copayers .icon-active-check {
+  color: #fff;
+  background: #3FBC9C;
+}
+
+.box-copayers .icon-active-x {
+  color: #fff;
+  background: #C0392B;
+}
+
 small.is-valid {
   color: #04B404;
 }

index.html

@@ -164,7 +164,7 @@
         </div>
       </div>
     </script>
-
+ 
     <script type="text/ng-template" id="import.html">
       <div ng-controller="ImportController">
         <h3>{{title}}</h3>
@@ -271,7 +271,6 @@
         </div> 
       </div>
     </script>
-
     
     <!-- TRANSACTIONS -->
     <script type="text/ng-template" id="transactions.html">
@@ -283,13 +282,11 @@
               <div class="txheader">
                 <div class="row">
                   <div class="large-8 columns">
-                    <table style="width:100%">
+                    <div class="row" ng-repeat="out in tx.outs">
-                    <tr ng-repeat="out in tx.outs">
+                      <p class="large-3 columns"> {{out.value}} <i class="fi-bitcoin size-18"></i></p>
-                      <td class="text-right size-24"> <i class="fi-bitcoin"></i> {{out.value}}</td>
+                      <i class="large-1 columns fi-arrow-right size-24"> </i>
-                      <td class="text-center size-48"> <i class="fi-arrow-right size-24"> </i></td>
+                      <p class="large-8 columns"> {{out.address}} </p>
-                      <td class="text-left size-24">{{out.address}}</td>
+                    </div>
-                    </tr>
-                    </table>
                   </div>
                   <div class="large-4 columns text-right">
                     <h6> created at {{tx.createdTs | date:'medium'}} </h6>
@@ -297,19 +294,47 @@
                 </div>
               </div>
 
-              <div class="row">
+              <div class="tx-copayers"> 
-                <div class="large-12 columns">
+                <div class="box-copayers">
-                  <table style="width:100%">
+                  <figure class="left">
-                    <tbody>
+                      <img src="./img/avatar.jpg" alt="" width="200">
-                      <tr>
+                  </figure>
-                        <small class="right text-gray"> 
+                  <div class="box-status">
-                           Fee: <strong> <i class="fi-bitcoin"></i> {{tx.fee}}  </strong>
+                    <i class="fi-crown size-12 icon-inactive icon-status"></i>
-                          <strong> Proposal ID: </strong> {{tx.ntxid}} 
+                    <i class="fi-eye size-12 icon-active icon-status"></i>
-                        </small>
+                    <i class="fi-check size-12 icon-active-check icon-status"></i>
-                      </tr>                     
+                  </div>
+                </div>
+
+                <div class="box-copayers">
+                  <figure class="left">
+                      <img src="./img/avatar.jpg" alt="" width="200">
+                  </figure>
+                  <div class="box-status">
+                    <i class="fi-crown size-12 icon-inactive icon-status"></i>
+                    <i class="fi-eye size-12 icon-active icon-status"></i>
+                    <i class="fi-check size-12 icon-active-check icon-status"></i>
+                  </div>
+                </div>
+
+                <div class="box-copayers">
+                  <figure class="left">
+                      <img src="./img/avatar.jpg" alt="" width="200">
+                  </figure>
+                  <div class="box-status">
+                    <i class="fi-crown size-12 icon-inactive icon-status"></i>
+                    <i class="fi-eye size-12 icon-active icon-status"></i>
+                    <i class="fi-check size-12 icon-active-check icon-status"></i>
+                  </div>
+                </div>
+                <small class="right text-gray"> 
+                  Fee: <strong> <i class="fi-bitcoin"></i> {{tx.fee}}  </strong>
+                  <strong> Proposal ID: </strong> {{tx.ntxid}} 
+                </small>
+                <!-- 
+                    <table>
                       <tr ng-repeat="(peer, actions) in tx.peerActions">
                         <td colspan="3">
-                          <div class="panel status">
                             <span ng-if="peer === $root.wallet.getMyCopayerId()"> You</span>
                              {{peer}}
 
@@ -321,12 +346,9 @@
 
                               <a title="{{ts | date:'medium'}}"></a>
                             </span>
-                          </div>
                         </td>
-                      </tr>
+                    </table>
-                    </tbody>
+                 -->
-                  </table>
-                </div>
               </div>
 
               <div class="txbottom">