From f0d762e2fa6029637a5c606d6849b5394d1e109a Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Fri, 22 Mar 2019 16:30:01 -0300
Subject: [PATCH] (add) dashboard gradient and layout

---
 .../css/components/_dashboard-banner.scss     | 105 +++++++++---------
 .../assets/css/theme/_posdao_variables.scss   |   7 +-
 .../templates/chain/show.html.eex             |  93 ++++++++--------
 3 files changed, 103 insertions(+), 102 deletions(-)

diff --git a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
index 4cedaefe3b..c6ffc1f904 100644
--- a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
+++ b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
@@ -1,31 +1,24 @@
+$dashboard-banner-gradient-start: $primary !default;
+$dashboard-banner-gradient-end: lighten($dashboard-banner-gradient-start, 5%) !default;
+$dashboard-banner-network-graph-background-color: #fff !default;
+
 .dashboard-banner-container {
-  position: relative;
+  background-color: $primary;
+  background-image: linear-gradient(to bottom, $dashboard-banner-gradient-start, $dashboard-banner-gradient-end);
+  box-shadow: 0 5px 40px -5px rgba(#000, 0.25);
   margin-top: -3rem;
-  background-color: $white;
-  box-shadow: 0 5px 40px -5px rgba($black, 0.25);
-
-  &:before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 68px;
-    background-color: $white;
-    box-shadow: 0 0 40px -5px rgba($black, 0.25);
-  }
+  padding: 48px 0 0 0;
+  position: relative;
 
   &:after {
+    background-color: $dashboard-banner-network-graph-background-color;
+    bottom: 0;
     content: "";
     display: block;
+    left: 70%;
     position: absolute;
-    top: 3rem;
     right: 0;
-    bottom: 0;
-    left: 70%;
-    background-color: $primary;
-    box-shadow: 0 0 40px -5px rgba($black, 0.25);
+    top: 3rem;
 
     @media (max-width: 992px) {
       top: 2rem;
@@ -35,46 +28,31 @@
 }
 
 .dashboard-banner {
-  position: relative;
-  display: grid;
-  grid-template-rows: 3rem 2fr 1fr;
-  grid-template-columns: 1fr 4fr;
-  grid-template-areas:
-    "chart ."
-    "chart stats"
-    "legend stats";
-  margin-top: -1rem;
+  align-items: flex-end;
+  display: flex;
+  justify-content: space-between;
   margin-bottom: 3rem;
+  position: relative;
   z-index: 9;
 
   @media (max-width: 992px) {
-    grid-template-rows: 2rem auto;
-    grid-template-columns: auto;
+    flex-direction: column;
   }
 }
 
-.dashboard-banner-graphic {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-}
-
 .dashboard-banner-chart {
-  grid-area: chart;
+  height: calc(152px + 1rem);
   padding: 1rem 1rem 1rem 0;
   width: calc(350px + 1rem);
-  height: calc(152px + 1rem);
 }
 
 .dashboard-banner-chart-legend {
-  grid-area: legend;
   display: flex;
   padding: 1rem 0.3rem;
 
   &-item {
-    padding-left: 0.5rem;
     flex-grow: 1;
+    padding-left: 0.5rem;
 
     &:first-of-type {
       border-left: 4px solid $primary;
@@ -86,8 +64,8 @@
   }
 
   &-label {
-    display: block;
     color: $text-muted;
+    display: block;
   }
 
   &-value {
@@ -96,24 +74,33 @@
 }
 
 .dashboard-banner-network-stats {
-  grid-area: stats;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  padding-right: 1rem;
-  background-color: $primary;
-  box-shadow: -10px 0 15px 0 rgba($black, 0.14);
+  column-gap: 40px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding-bottom: 30px;
+  row-gap: 45px;
 
   @media (max-width: 992px) {
-    flex-direction: column;
     align-items: flex-start;
+    flex-direction: column;
     padding: 0.5rem 2rem;
   }
 
   &-item {
+    color: #fff;
     padding-left: 1rem;
-    color: $white;
-    border-left: 4px solid rgba($white, 0.6);
+    position: relative;
+
+    &::before {
+      background-color: rgba(#fff, 0.5);
+      border-radius: 2px;
+      content: "";
+      height: 100%;
+      left: -4px;
+      position: absolute;
+      top: 0;
+      width: 4px;
+    }
   }
 
   &-label {
@@ -125,9 +112,21 @@
     display: block;
     font-size: 1.5rem;
     font-weight: 200;
+    white-space: nowrap;
 
     @media (max-width: 992px) {
       font-size: 1.25rem;
     }
   }
 }
+
+.dashboard-banner-network-graph {
+  align-items: center;
+  background-color: $dashboard-banner-network-graph-background-color;
+  border-top-left-radius: 10px;
+  display: flex;
+  height: 205px;
+  justify-content: space-around;
+  margin: 0 0 0 60px;
+  width: 750px;
+}
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/theme/_posdao_variables.scss b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss
index 0c36d8acb3..9d591d04a9 100644
--- a/apps/block_scout_web/assets/css/theme/_posdao_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss
@@ -1,8 +1,7 @@
 $primary: #15bba6;
-$secondary: #ff0000;
+$secondary: #17314f;
 $tertiary: #00FF00;
 
 $header-links-color-active: #333;
-
-$gradient-start: #17314f;
-$gradient-end: #1e4168;
+$dashboard-banner-gradient-start: $secondary;
+$dashboard-banner-gradient-end: #1e4168;
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
index aa1621622a..4b63c12189 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
@@ -1,36 +1,7 @@
 <div class="dashboard-banner-container d-none d-md-block" data-page="chain-details">
-  <img src="<%= static_path(@conn, "/images/cube.svg") %>" alt="cube_graphic" class="dashboard-banner-graphic">
   <div class="container">
     <div class="dashboard-banner">
-      <div class="dashboard-banner-chart">
-        <div data-chart-loading-message class="tile tile-muted text-center mt-5">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading chart") %>...
-        </div>
-        <button data-chart-error-message class="alert alert-danger col-12 text-left mt-5" style="display: none;">
-          <span><%= gettext("There was a problem loading the chart.") %></span>
-        </button>
-        <canvas data-chart="marketHistoryChart" data-market_history_chart_path="<%= @chart_data_path %>" width="350" height="152" style="display: none;"></canvas>
-      </div>
-      <div class="dashboard-banner-chart-legend">
-        <div class="dashboard-banner-chart-legend-item">
-          <span class="dashboard-banner-chart-legend-label">
-            <%= gettext "Price" %>
-          </span>
-          <span class="dashboard-banner-chart-legend-value" data-selector="exchange-rate" data-wei-value="<%= Explorer.Chain.Wei.from(Decimal.new(1), :ether).value %>" data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
-          </span>
-        </div>
-        <div class="dashboard-banner-chart-legend-item">
-          <span class="dashboard-banner-chart-legend-label">
-            <%= gettext "Market Cap" %>
-          </span>
-          <span class="dashboard-banner-chart-legend-value" data-selector="market-cap" data-usd-value="<%= @exchange_rate.market_cap_usd %>">
-          </span>
-        </div>
-      </div>
+      <!-- -->
       <div class="dashboard-banner-network-stats">
         <%= case @average_block_time do %>
           <% {:error, :disabled} -> %>
@@ -44,22 +15,54 @@
                 <%= Timex.format_duration(average_block_time, Explorer.Counters.AverageBlockTimeDurationFormat) %>
               </span>
             </div>
-        <% end %>
-        <div class="dashboard-banner-network-stats-item">
-          <span class="dashboard-banner-network-stats-label">
-            <%= gettext "Total transactions" %>
-          </span>
-          <span class="dashboard-banner-network-stats-value" data-selector="transaction-count">
-            <%= Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###") %>
-          </span>
+          <% end %>
+          <div class="dashboard-banner-network-stats-item">
+            <span class="dashboard-banner-network-stats-label">
+              <%= gettext "Total transactions" %>
+            </span>
+            <span class="dashboard-banner-network-stats-value" data-selector="transaction-count">
+              <%= Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###") %>
+            </span>
+          </div>
+          <div class="dashboard-banner-network-stats-item">
+            <span class="dashboard-banner-network-stats-label">
+              <%= gettext "Wallet addresses" %>
+            </span>
+            <span class="dashboard-banner-network-stats-value" data-selector="address-count">
+              <%= Cldr.Number.to_string!(@address_count, format: "#,###") %>
+            </span>
+          </div>
+      </div>
+      <!-- -->
+      <div class="dashboard-banner-network-graph">
+        <div class="dashboard-banner-chart">
+          <div data-chart-loading-message class="tile tile-muted text-center mt-5">
+            <span class="loading-spinner-small mr-2">
+              <span class="loading-spinner-block-1"></span>
+              <span class="loading-spinner-block-2"></span>
+            </span>
+            <%= gettext("Loading chart") %>...
+          </div>
+          <button data-chart-error-message class="alert alert-danger col-12 text-left mt-5" style="display: none;">
+            <span><%= gettext("There was a problem loading the chart.") %></span>
+          </button>
+          <canvas data-chart="marketHistoryChart" data-market_history_chart_path="<%= @chart_data_path %>" width="350" height="152" style="display: none;"></canvas>
         </div>
-        <div class="dashboard-banner-network-stats-item">
-          <span class="dashboard-banner-network-stats-label">
-            <%= gettext "Wallet addresses" %>
-          </span>
-          <span class="dashboard-banner-network-stats-value" data-selector="address-count">
-            <%= Cldr.Number.to_string!(@address_count, format: "#,###") %>
-          </span>
+        <div class="dashboard-banner-chart-legend">
+          <div class="dashboard-banner-chart-legend-item">
+            <span class="dashboard-banner-chart-legend-label">
+              <%= gettext "Price" %>
+            </span>
+            <span class="dashboard-banner-chart-legend-value" data-selector="exchange-rate" data-wei-value="<%= Explorer.Chain.Wei.from(Decimal.new(1), :ether).value %>" data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
+            </span>
+          </div>
+          <div class="dashboard-banner-chart-legend-item">
+            <span class="dashboard-banner-chart-legend-label">
+              <%= gettext "Market Cap" %>
+            </span>
+            <span class="dashboard-banner-chart-legend-value" data-selector="market-cap" data-usd-value="<%= @exchange_rate.market_cap_usd %>">
+            </span>
+          </div>
         </div>
       </div>
     </div>