From 7ecd7c4a649a040edaa15e5105b8b461c22e50e1 Mon Sep 17 00:00:00 2001
From: Matthew Fettig <matthew@ripple.com>
Date: Tue, 15 Nov 2016 18:50:16 -0800
Subject: [PATCH] update style

---
 .../external-markets/external-markets.less    |  5 --
 src/app/landing/landing.less                  | 66 +++++++++++--------
 src/app/landing/landing.tpl.html              | 12 ++--
 src/common/valueSummary.js                    |  3 +-
 src/less/valueSummary.less                    |  3 +-
 5 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/src/app/external-markets/external-markets.less b/src/app/external-markets/external-markets.less
index 28c08bb..d8f17f9 100644
--- a/src/app/external-markets/external-markets.less
+++ b/src/app/external-markets/external-markets.less
@@ -5,9 +5,6 @@
 
 .external-markets sign {
   margin-right: -.25em;
-}
-
-.external-markets .market sign {
   display: inline-block;
 }
 
@@ -22,8 +19,6 @@
 }
 
 .external-markets .valueCurrencySelect {
-  border: 1px solid #aaa;
-  border-radius: 1px;
   float: none;
 }
 
diff --git a/src/app/landing/landing.less b/src/app/landing/landing.less
index aab9c6d..c4c6dfd 100644
--- a/src/app/landing/landing.less
+++ b/src/app/landing/landing.less
@@ -33,9 +33,17 @@
   font-size:90%;
 }
 
+.landing .stats {
+  padding-bottom: 10px;
+}
+
+.landing .stats .stat-group {
+  float: left;
+}
+
 .landing .stats ul {
   list-style:none;
-  margin:10px 5px 30px 5px;
+  margin:10px 5px 15px 5px;
   display:table;
   width:100%;
   border:1px solid #eee;
@@ -69,7 +77,7 @@
   background: #2A98D0;
 }
 
-.landing .stats label {
+.landing .stat-group label {
   vertical-align:middle;
   display:table-cell;
   text-align:left;
@@ -77,12 +85,12 @@
   border-bottom:1px solid #e5e5e5;
 }
 
-.landing .stats .volume-stats label {
+.landing .stat-group .volume-stats label {
   padding-left: 7px;
   cursor: pointer;
 }
 
-.landing .stats label small {
+.landing .stat-group label small {
   font-size: 85%;
   opacity: .65;
 }
@@ -118,9 +126,14 @@
   border-bottom:none;
 }
 
+.landing .stats .right {
+  float: right;
+  width: 50%;
+  padding: 5px 15px;
+}
+
 .landing #metricDetail {
-  height:320px;
-  margin-top:20px;
+  height: 350px;
 }
 
 #topMarkets {
@@ -181,9 +194,9 @@
   color: #fff;
 }
 
-.dark .landing .stat,
-.dark .stats label,
-.dark .stats .status {
+.dark .landing .stat-group .stat,
+.dark .stat-group label,
+.dark .stat-group .status {
   border-bottom-color:#2a2a2a;
 }
 
@@ -215,7 +228,7 @@
 }
 
 
-.dark .landing .stat small {
+.dark .landing .stat-group small {
   font-weight:bold;
 }
 
@@ -243,7 +256,7 @@
   }
 }
 
-@media (max-width: 979px) {
+@media (max-width: 989px) {
 
   #topMarkets {
     width:724px;
@@ -260,16 +273,25 @@
     margin:0;
   }
 
+  .landing .stat-group {
+    width: 100%;
+  }
+
   .landing .stats ul {
-    width:98%;
+    width: 100%;
     display:inline-table;
   }
 
- .landing h5, .landing #metricDetail {
-    width:98%;
+  .landing h5,
+  .landing .stats .right {
+    width: 100%;
     display:inline-block;
   }
 
+  .landing .stats .right {
+    margin-bottom: 30px;
+  }
+
   .landing .stats label small {
     display:inline-block;
   }
@@ -301,18 +323,6 @@
   .landing .stats ul li {
     margin: 3px 0;
   }
-
-  .landing #metricDetail {
-    padding:10px 0;
-  }
-
-}
-
-@media (max-width: 650px) {
-  #metricDetail .inner {
-    margin-left:-25%;
-  }
-
 }
 
 @media (max-width: 480px) {
@@ -331,6 +341,10 @@
     padding-left: 5px;
   }
 
+  .landing .stats .right {
+    padding: 5px;
+  }
+
   .landing #metricDetail {
     zoom :.85;
   }
diff --git a/src/app/landing/landing.tpl.html b/src/app/landing/landing.tpl.html
index f68a00b..2533bee 100644
--- a/src/app/landing/landing.tpl.html
+++ b/src/app/landing/landing.tpl.html
@@ -8,8 +8,8 @@ <h3>Welcome to Ripple Charts</h3>
         code is available <a href="https://github.com/ripple/ripplecharts-frontend" target="_blank">here</a>.
       </p>
     </div>
-    <div class="row">
-<div class="col-md-6 stats">
+    <div class="row stats">
+      <div class="stat-group col-md-6">
         <h5>
           <b>Volume Stats (24 hours)</b>
           <select class="valueCurrencySelect" ng-model="selectedCurrency"
@@ -54,6 +54,11 @@ <h5>
             </div>
           </li>
         </ul>
+      </div>
+      <div class="right">
+        <div id="metricDetail"></div>
+      </div>
+      <div class="stat-group col-md-6">
         <h5>
           Ripple Network Stats
         </h5>
@@ -91,9 +96,6 @@ <h5>
           </li>
         </ul>
       </div>
-      <div class="col-md-6">
-        <div id="metricDetail"></div>
-      </div>
     </div>
     <h5>Top Markets</h5>
     <div id="topMarkets"></div>
diff --git a/src/common/valueSummary.js b/src/common/valueSummary.js
index 0211faf..707298e 100644
--- a/src/common/valueSummary.js
+++ b/src/common/valueSummary.js
@@ -11,8 +11,9 @@ function ValueSummary(options) {
   var title = outer.append('h5')
   var inner = outer.append('div').attr('class', 'inner')
   var width = parseInt(outer.style('width'), 10)
-  var height = parseInt(outer.style('height'), 10) || width
+  var height = (parseInt(outer.style('height'), 10) || width) - 40
   var radius = (Math.min(width, height)) / 2
+
   var margin = {
     top: radius / 10,
     bottom: radius / 10,
diff --git a/src/less/valueSummary.less b/src/less/valueSummary.less
index 27a0cfc..a7f5673 100644
--- a/src/less/valueSummary.less
+++ b/src/less/valueSummary.less
@@ -105,9 +105,8 @@ donut .tooltip .title {
 
   .tooltip {
     opacity: 1;
-    filter: alpha(opacity=1);
     position:absolute;
-    bottom:-10px;
+    bottom:10px;
     right:5px;
     padding:5px;
     background:rgba(255,255,255,.9);