From 1f2b2be6b70a745a311f1f8defad22fa1a6d7d4b Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Wed, 12 Feb 2014 12:48:03 -0300
Subject: [PATCH] fix layout: unconfirm txs message is too big

---
 public/src/css/common.css        | 23 ++++++++++++++++++-----
 public/views/transaction/tx.html | 12 ++++++------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/public/src/css/common.css b/public/src/css/common.css
index 4e8ea71..0f95d22 100644
--- a/public/src/css/common.css
+++ b/public/src/css/common.css
@@ -302,27 +302,40 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   border: 2px solid #6C0000;
 }
 
-.label {
+.txvalues {
+  display: inline-block;
   padding: .7em 2em;
   font-size: 13px;
   text-transform: uppercase;
   font-weight:100;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
 }
 
-.label-primary {
+@media (max-width: 768px) {
+  .txvalues {
+    display: block;
+    margin: 5px;
+  }
+}
+
+.txvalues-primary {
   background-color: #8DC429;
 }
 
-.label-default {
+.txvalues-default {
   background-color: #ffffff;
   color: #333;
 }
 
-.label-success {
+.txvalues-success {
   background-color: #2FA4D7;
 }
 
-.label-danger {
+.txvalues-danger {
   background-color: #AC0015;
 }
 
diff --git a/public/views/transaction/tx.html b/public/views/transaction/tx.html
index e0cecaa..1a8a9ed 100644
--- a/public/views/transaction/tx.html
+++ b/public/views/transaction/tx.html
@@ -135,12 +135,12 @@
   </div>
 </div>
 <div class="line-top row">
-  <div class="col-xs-4 col-md-6">
-    <span data-ng-show="!tx.isCoinBase &&  !isNaN(parseFloat(tx.fees))" class="label label-default">Fees: {{$root.currency.getConvertion(tx.fees)}} </span>
+  <div class="col-xs-12 col-sm-4 col-md-4">
+    <span data-ng-show="!tx.isCoinBase &&  !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees)}} </span>
   </div>
-  <div class="col-xs-8 col-md-6 text-right">
-    <span data-ng-show="tx.confirmations" class="label label-success">{{tx.confirmations}} Confirmations</span>
-    <span data-ng-show="!tx.confirmations" class="label label-danger">Unconfirmed Transaction!</span>
-    <span class="label label-primary">{{$root.currency.getConvertion(tx.valueOut)}}</span>
+  <div class="col-xs-12 col-sm-8 col-md-8 text-right">
+    <span data-ng-show="tx.confirmations" class="txvalues txvalues-success">{{tx.confirmations}} Confirmations</span>
+    <span data-ng-show="!tx.confirmations" class="txvalues txvalues-danger">Unconfirmed Transaction!</span>
+    <span class="txvalues txvalues-primary">{{$root.currency.getConvertion(tx.valueOut)}}</span>
   </div>
 </div>