From dd4b334aff2ab9ef5e1465ce4274966a16ec1cea Mon Sep 17 00:00:00 2001 From: katibest Date: Tue, 26 Jun 2018 11:25:30 -0400 Subject: [PATCH] Dashboard and chart styling for homepage resdeign --- .../assets/css/components/_card.scss | 1 + .../css/components/_dashboard-banner.scss | 47 ++++-- .../explorer_web/assets/css/theme/_fonts.scss | 2 +- .../assets/js/lib/market_history_chart.js | 30 ++-- .../templates/chain/_transactions.html.eex | 141 ++++++++++------- .../templates/chain/show.html.eex | 147 ++++++------------ 6 files changed, 185 insertions(+), 183 deletions(-) diff --git a/apps/explorer_web/assets/css/components/_card.scss b/apps/explorer_web/assets/css/components/_card.scss index ca5074fdf3..0a501a3400 100644 --- a/apps/explorer_web/assets/css/components/_card.scss +++ b/apps/explorer_web/assets/css/components/_card.scss @@ -2,4 +2,5 @@ border-color: transparent; box-shadow: 0 5px 40px -5px rgba($black, 0.25); border-radius: 0; + margin-bottom: 4rem; } diff --git a/apps/explorer_web/assets/css/components/_dashboard-banner.scss b/apps/explorer_web/assets/css/components/_dashboard-banner.scss index e97a854688..09c6a4452e 100644 --- a/apps/explorer_web/assets/css/components/_dashboard-banner.scss +++ b/apps/explorer_web/assets/css/components/_dashboard-banner.scss @@ -1,30 +1,57 @@ +.dashboard-container { + position: relative; + 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); + } + + &:after { + content: ""; + display: block; + position: absolute; + top: 3rem; + right: 0; + bottom: 0; + left: 70%; + background-color: $primary; + } +} + .dashboard-banner { + position: relative; display: grid; - grid-template-rows: 2rem auto; - grid-template-columns: 1fr 2fr; + grid-template-rows: 3rem 2fr 1fr; + grid-template-columns: 1fr 3fr; grid-template-areas: "chart ." "chart stats" "legend stats"; margin-top: -1rem; - margin-bottom: 2rem; - background-color: $white; - box-shadow: 0 5px 40px -5px rgba($black, 0.25); + margin-bottom: 4rem; + z-index: 10; } .dashboard-banner-chart { grid-area: chart; // 15px padding matches the Bootstarp conatiner padding. - padding: 1rem 1rem 1rem 15px; - max-height: 100px; - box-shadow: -15px 0 40px -5px rgba($black, 0.25); + padding: 1rem 1rem 1rem 0; } .dashboard-banner-chart-legend { grid-area: legend; display: flex; // 15px padding matches the Bootstarp conatiner padding. - padding: 1rem 15px; + padding: 1rem 1rem; &-item { padding-left: 0.5rem; @@ -57,7 +84,6 @@ // 15px padding matches the Bootstarp conatiner padding. padding-right: 15px; background-color: $primary; - box-shadow: -5px -5px 40px -5px rgba($black, 0.25); &-item { padding-left: 1rem; @@ -72,5 +98,6 @@ &-value { display: block; font-size: 1.5rem; + font-weight: 200; } } diff --git a/apps/explorer_web/assets/css/theme/_fonts.scss b/apps/explorer_web/assets/css/theme/_fonts.scss index 8029217558..2fc2eb95d8 100644 --- a/apps/explorer_web/assets/css/theme/_fonts.scss +++ b/apps/explorer_web/assets/css/theme/_fonts.scss @@ -1,2 +1,2 @@ -@import url('https://fonts.googleapis.com/css?family=Nunito'); +@import url('https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700'); @import url('https://fonts.googleapis.com/css?family=Roboto'); diff --git a/apps/explorer_web/assets/js/lib/market_history_chart.js b/apps/explorer_web/assets/js/lib/market_history_chart.js index 3b873f4b90..b19b755ccf 100644 --- a/apps/explorer_web/assets/js/lib/market_history_chart.js +++ b/apps/explorer_web/assets/js/lib/market_history_chart.js @@ -41,7 +41,7 @@ function createMarketHistoryChart (ctx) { yAxisID: 'marketCap', data: currentMarketHistoryData.map(({ date, closingPrice }) => ({x: date, y: closingPrice * availableSupply})), fill: false, - pointRadius: 0.5, + pointRadius: 0, backgroundColor: sassVariables.secondary, borderColor: sassVariables.secondary, lineTension: 0 @@ -53,19 +53,28 @@ function createMarketHistoryChart (ctx) { }, scales: { xAxes: [{ + gridLines: { + display: false + }, type: 'time', time: { unit: 'week', displayFormats: { week: 'MMM D' } + }, + ticks: { + callback: (value, index, values) => value, } }], yAxes: [{ id: 'price', + gridLines: { + display: false + }, ticks: { beginAtZero: true, - callback: (value, index, values) => formatPrice(value), + callback: (value, index, values) => "", maxTicksLimit: 6 } }, { @@ -75,27 +84,14 @@ function createMarketHistoryChart (ctx) { display: false }, ticks: { - callback: (value, index, values) => formatMarketCap(value), + callback: (value, index, values) => "", maxTicksLimit: 6, drawOnChartArea: false } }] }, tooltips: { - mode: 'index', - intersect: false, - callbacks: { - label: ({datasetIndex, yLabel}, {datasets}) => { - const label = datasets[datasetIndex].label - if (datasets[datasetIndex].label === 'Price') { - return `${label}: ${formatPrice(yLabel)}` - } else if (datasets[datasetIndex].label === 'Market Cap') { - return `${label}: ${formatMarketCap(yLabel)}` - } else { - return yLabel - } - } - } + enabled: false } } }) diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex index 8d479ac715..5b46c055a8 100644 --- a/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex @@ -3,68 +3,97 @@ <%= link(gettext("View All Transactions →"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>

<%= gettext "Transactions" %>

<%= for transaction <- @chain.transactions do %> - <%= if transaction.created_contract_address_hash do %> -
-
-
- <%= gettext("Contract Creation") %> -
-
- <%= link(transaction.hash , - to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction), - "class": "tile-title", - "data-test": "transaction_hash", - "data-transaction-hash": transaction.hash) %> -
- <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %> - → - <%= link( - transaction.created_contract_address_hash, - class: "tile-label", - "data-address-hash": transaction.created_contract_address_hash, - to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash), - title: transaction.created_contract_address_hash - ) %> + <%= cond do %> + <%= transaction.created_contract_address_hash != nil -> %> +
+
+
+ <%= gettext("Contract Creation") %> +
+
+ <%= link(transaction.hash , + to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction), + "class": "tile-title", + "data-test": "transaction_hash", + "data-transaction-hash": transaction.hash) %> +
+ <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %> + → + <%= link( + transaction.created_contract_address_hash, + class: "tile-label", + "data-address-hash": transaction.created_contract_address_hash, + to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash), + title: transaction.created_contract_address_hash + ) %> +
+ <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA +
+
+ + <%= link( + gettext("Block #") <> "#{transaction.block.number}", + to: block_path(@conn, :show, @conn.assigns.locale, transaction.block) + ) %>
- <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA -
-
- - <%= link( - gettext("Block #") <> "#{transaction.block.number}", - to: block_path(@conn, :show, @conn.assigns.locale, transaction.block) - ) %>
-
- <% else %> -
-
-
- <%= gettext("Transaction") %> -
-
- <%= link(transaction.hash , - to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction), - "class": "tile-title", - "data-test": "transaction_hash", - "data-transaction-hash": transaction.hash) %> -
- <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %> - → - <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %> + <% contract?(transaction.from_address) || contract?(transaction.to_address) -> %> +
+
+
+ <%= gettext("Transaction") %> +
+
+ <%= link(transaction.hash , + to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction), + "class": "tile-title", + "data-test": "transaction_hash", + "data-transaction-hash": transaction.hash) %> +
+ <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %> + → + <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %> +
+ <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA +
+
+ + <%= link( + gettext("Block #") <> "#{transaction.block.number}", + to: block_path(@conn, :show, @conn.assigns.locale, transaction.block) + ) %>
- <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA -
-
- - <%= link( - gettext("Block #") <> "#{transaction.block.number}", - to: block_path(@conn, :show, @conn.assigns.locale, transaction.block) - ) %>
-
+ <% true -> %> +
+
+
+ <%= gettext("Transaction") %> +
+
+ <%= link(transaction.hash , + to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction), + "class": "tile-title", + "data-test": "transaction_hash", + "data-transaction-hash": transaction.hash) %> +
+ <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %> + → + <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %> +
+ <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA +
+
+ + <%= link( + gettext("Block #") <> "#{transaction.block.number}", + to: block_path(@conn, :show, @conn.assigns.locale, transaction.block) + ) %> +
+
+
<% end %> <% end %>
diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex index 8dd7fadfc7..01522b7b53 100644 --- a/apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex @@ -1,108 +1,57 @@ -
-
- -
-
-
- - Price - - - $0.0498 USD - -
-
- - Market cap - - - $100,350,800 USD - -
-
-
-
- - Block time - - - 69.2105s - -
-
- - Total transactions - - - 12,106,123 - -
-
- - Wallet addresses - - - 1,400,500 - -
-
-
- -
- <%= render ExplorerWeb.ChainView, "_blocks.html", assigns %> - <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %> - -
-
-
-
- <%= render ExplorerWeb.IconsView, "_block_icon.html", assigns %> -
<%= gettext("Block") %>
-
#<%= @chain.number %>
+
+
+
+
+ +
+
+
+ + Price + + + $0.0498 USD +
-
- <%= render ExplorerWeb.IconsView, "_hourglass_icon.html", assigns %> -
<%= gettext("Last Block") %>
-
+
+ + Market cap + + + $100,350,800 USD +
-
-
<%= render ExplorerWeb.IconsView, "_guage_icon.html", assigns %>
-
<%= gettext("Avg Block Time") %>
- <%= @chain.average_time |> Timex.format_duration(:humanized) %> +
+
+
+ + Block time + + + 69.2105s +
-
- <%= render ExplorerWeb.IconsView, "_transaction_icon.html", assigns %> -
<%= gettext("TPM") %>
-
<%= @chain.transaction_velocity |> Cldr.Number.to_string! %>
+
+ + Total transactions + + + 12,106,123 +
-
-
- -
-
- -
-
-
- <%= gettext "Price" %>
- <%= format_exchange_rate(@exchange_rate) %> -
-
-
- <%= gettext "Market Cap" %>
- <%= format_market_cap(@exchange_rate) %> -
-
- <%= gettext "24h Volume" %>
- <%= format_volume_24h(@exchange_rate) %> -
+
+ + Wallet addresses + + + 1,400,500 +
- -
- - -
+
+
+ <%= render ExplorerWeb.ChainView, "_blocks.html", assigns %> + <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %>