Display and sizing adjustments to handle larger numbers and fit better on small screens (fixes #48)

1 files changed, 33 insertions, 29 deletions

diff --git a/views/users/show.html b/views/users/show.html
index c65b4efd..aa1e9006 100644
--- a/views/users/show.html
+++ b/views/users/show.html
@@ -18,56 +18,60 @@ Your email has been verified. Thank you!
   <img id="logo" src="/img/bitcoin.png" alt="Logo" />
 
   <div id="controls">
-    <div class="rates tablet pull-right" style="margin-top: -20px; width: 9em">
-      <h2><small>@</small><span class="exchange"></span></h2>
-      <h3 style="margin-top: 0"><span class="label label-default symbol"></span></h3>
-      <h3><span class="label label-success commission"></span></h3>
-    </div>
-
     <div class="numpad pull-left">
       <h2><span class="amount">0.00</span> <small class="currency"></small></h2>
-      <button class="btn btn-lg btn-primary">1</button>
-      <button class="btn btn-lg btn-primary">2</button>
-      <button class="btn btn-lg btn-primary">3</button>
+      <button class="btn btn-lg btn-default">1</button>
+      <button class="btn btn-lg btn-default">2</button>
+      <button class="btn btn-lg btn-default">3</button>
       <br />
-      <button class="btn btn-lg btn-primary">4</button>
-      <button class="btn btn-lg btn-primary">5</button>
-      <button class="btn btn-lg btn-primary">6</button>
+      <button class="btn btn-lg btn-default">4</button>
+      <button class="btn btn-lg btn-default">5</button>
+      <button class="btn btn-lg btn-default">6</button>
       <br />
-      <button class="btn btn-lg btn-primary">7</button>
-      <button class="btn btn-lg btn-primary">8</button>
-      <button class="btn btn-lg btn-primary">9</button>
+      <button class="btn btn-lg btn-default">7</button>
+      <button class="btn btn-lg btn-default">8</button>
+      <button class="btn btn-lg btn-default">9</button>
       <br />
-      <button class="btn btn-lg btn-primary">C</button>
-      <button class="btn btn-lg btn-primary">0</button>
-      <button class="btn btn-lg btn-primary" style="padding: 13px 0"><i class="fa fa-arrow-left"></i></button>
+      <button class="btn btn-lg btn-default">C</button>
+      <button class="btn btn-lg btn-default">0</button>
+      <button class="btn btn-lg btn-default" style="padding: 13px 0"><i class="fa fa-arrow-left"></i></button>
     </div>
 
     <div class="tippad tablet">
       <h2><small>+</small><span class="tip"></span></h2>
-        <button type="button" class="active btn btn-lg btn-default">0%</button><br />
-        <button type="button" class="btn btn-lg btn-default">10%</button><br />
-        <button type="button" class="btn btn-lg btn-default">15%</button><br />
-        <button type="button" class="btn btn-lg btn-default">20%</button>
+        <button type="button" class="active btn btn-lg btn-default">No Tip</button><br />
+        <button type="button" class="btn btn-lg btn-default">+10%</button><br />
+        <button type="button" class="btn btn-lg btn-default">+15%</button><br />
+        <button type="button" class="btn btn-lg btn-default">+20%</button>
+    </div>
+
+    <div class="rates tablet">
+      <h2>
+        <small>Exchange rate</small> 
+        <span class="exchange"></span>
+        <span class="label label-default symbol"></span> 
+        <span class="label label-success commission"></span>
+      </h2>
     </div>
 
     <div class="clearfix mobile"></div>
     <div class="tippad mobile" style="margin-top: 10px">
       <h2><small>+</small><span class="tip"></span> <small>TIP</small></h2>
       <div class="btn-group">
-        <button type="button" class="active btn btn-lg btn-default">0%</button>
-        <button type="button" class="btn btn-lg btn-default">10%</button>
-        <button type="button" class="btn btn-lg btn-default">15%</button>
-        <button type="button" class="btn btn-lg btn-default">20%</button>
+        <button type="button" class="active btn btn-lg btn-default">No Tip</button>
+        <button type="button" class="btn btn-lg btn-default">+10%</button>
+        <button type="button" class="btn btn-lg btn-default">+15%</button>
+        <button type="button" class="btn btn-lg btn-default">+20%</button>
       </div>
     </div>
 
     <div class="rates mobile">
-      <h3 class="pull-right" style="margin-top: -2px">
+      <h2>
+        <small>Exchange Rate</small><br />
+        <span class="exchange"></span>
         <span class="label label-default symbol"></span> 
         <span class="label label-success commission"></span>
-      </h3>
-      <h2><small>@</small><span class="exchange"></span></h2>
+      </h2>
     </div>
   </div>