CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Dashboard and chart styling for homepage resdeign

Browse Source
pull/346/head
katibest 7 years ago committed by jimmay5469
parent 2196450faa
commit dd4b334aff
6 changed files with 185 additions and 183 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      apps/explorer_web/assets/css/components/_card.scss
  2. 47
      apps/explorer_web/assets/css/components/_dashboard-banner.scss
  3. 2
      apps/explorer_web/assets/css/theme/_fonts.scss
  4. 30
      apps/explorer_web/assets/js/lib/market_history_chart.js
  5. 141
      apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex
  6. 147
      apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex

1
apps/explorer_web/assets/css/components/_card.scss
Unescape View File

@ -2,4 +2,5 @@
border-color: transparent; border-color: transparent;
box-shadow: 0 5px 40px -5px rgba($black, 0.25); box-shadow: 0 5px 40px -5px rgba($black, 0.25);
border-radius: 0; border-radius: 0;
margin-bottom: 4rem;
} }

47
apps/explorer_web/assets/css/components/_dashboard-banner.scss
Unescape View File

@ -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 { .dashboard-banner {
position: relative;
display: grid; display: grid;
grid-template-rows: 2rem auto; grid-template-rows: 3rem 2fr 1fr;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 3fr;
grid-template-areas: grid-template-areas:
"chart ." "chart ."
"chart stats" "chart stats"
"legend stats"; "legend stats";
margin-top: -1rem; margin-top: -1rem;
margin-bottom: 2rem; margin-bottom: 4rem;
background-color: $white; z-index: 10;
box-shadow: 0 5px 40px -5px rgba($black, 0.25);
} }
.dashboard-banner-chart { .dashboard-banner-chart {
grid-area: chart; grid-area: chart;
// 15px padding matches the Bootstarp conatiner padding. // 15px padding matches the Bootstarp conatiner padding.
padding: 1rem 1rem 1rem 15px; padding: 1rem 1rem 1rem 0;
max-height: 100px;
box-shadow: -15px 0 40px -5px rgba($black, 0.25);
} }
.dashboard-banner-chart-legend { .dashboard-banner-chart-legend {
grid-area: legend; grid-area: legend;
display: flex; display: flex;
// 15px padding matches the Bootstarp conatiner padding. // 15px padding matches the Bootstarp conatiner padding.
padding: 1rem 15px; padding: 1rem 1rem;
&-item { &-item {
padding-left: 0.5rem; padding-left: 0.5rem;
@ -57,7 +84,6 @@
// 15px padding matches the Bootstarp conatiner padding. // 15px padding matches the Bootstarp conatiner padding.
padding-right: 15px; padding-right: 15px;
background-color: $primary; background-color: $primary;
box-shadow: -5px -5px 40px -5px rgba($black, 0.25);
&-item { &-item {
padding-left: 1rem; padding-left: 1rem;
@ -72,5 +98,6 @@
&-value { &-value {
display: block; display: block;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 200;
} }
} }

2
apps/explorer_web/assets/css/theme/_fonts.scss
Unescape View File

@ -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'); @import url('https://fonts.googleapis.com/css?family=Roboto');

30
apps/explorer_web/assets/js/lib/market_history_chart.js
Unescape View File

@ -41,7 +41,7 @@ function createMarketHistoryChart (ctx) {
yAxisID: 'marketCap', yAxisID: 'marketCap',
data: currentMarketHistoryData.map(({ date, closingPrice }) => ({x: date, y: closingPrice * availableSupply})), data: currentMarketHistoryData.map(({ date, closingPrice }) => ({x: date, y: closingPrice * availableSupply})),
fill: false, fill: false,
pointRadius: 0.5, pointRadius: 0,
backgroundColor: sassVariables.secondary, backgroundColor: sassVariables.secondary,
borderColor: sassVariables.secondary, borderColor: sassVariables.secondary,
lineTension: 0 lineTension: 0
@ -53,19 +53,28 @@ function createMarketHistoryChart (ctx) {
}, },
scales: { scales: {
xAxes: [{ xAxes: [{
gridLines: {
display: false
},
type: 'time', type: 'time',
time: { time: {
unit: 'week', unit: 'week',
displayFormats: { displayFormats: {
week: 'MMM D' week: 'MMM D'
} }
},
ticks: {
callback: (value, index, values) => value,
} }
}], }],
yAxes: [{ yAxes: [{
id: 'price', id: 'price',
gridLines: {
display: false
},
ticks: { ticks: {
beginAtZero: true, beginAtZero: true,
callback: (value, index, values) => formatPrice(value), callback: (value, index, values) => "",
maxTicksLimit: 6 maxTicksLimit: 6
} }
}, { }, {
@ -75,27 +84,14 @@ function createMarketHistoryChart (ctx) {
display: false display: false
}, },
ticks: { ticks: {
callback: (value, index, values) => formatMarketCap(value), callback: (value, index, values) => "",
maxTicksLimit: 6, maxTicksLimit: 6,
drawOnChartArea: false drawOnChartArea: false
} }
}] }]
}, },
tooltips: { tooltips: {
mode: 'index', enabled: false
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
}
}
}
} }
} }
}) })

141
apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex
Unescape View File

@ -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") %> <%= link(gettext("View All Transactions →"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
<h2 class="card-title"><%= gettext "Transactions" %></h2> <h2 class="card-title"><%= gettext "Transactions" %></h2>
<%= for transaction <- @chain.transactions do %> <%= for transaction <- @chain.transactions do %>
<%= if transaction.created_contract_address_hash do %> <%= cond do %>
<div class="tile tile-type-contract-creation"> <%= transaction.created_contract_address_hash != nil -> %>
<div class="row"> <div class="tile tile-type-contract-creation">
<div class="col-md-2 d-flex align-items-center justify-content-center tile-label"> <div class="row">
<%= gettext("Contract Creation") %> <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
</div> <%= gettext("Contract Creation") %>
<div class="col-md-8"> </div>
<%= link(transaction.hash , <div class="col-md-8">
to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction), <%= link(transaction.hash ,
"class": "tile-title", to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
"data-test": "transaction_hash", "class": "tile-title",
"data-transaction-hash": transaction.hash) %> "data-test": "transaction_hash",
<div> "data-transaction-hash": transaction.hash) %>
<%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %> <div>
&rarr; <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
<%= link( &rarr;
transaction.created_contract_address_hash, <%= link(
class: "tile-label", transaction.created_contract_address_hash,
"data-address-hash": transaction.created_contract_address_hash, class: "tile-label",
to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash), "data-address-hash": transaction.created_contract_address_hash,
title: transaction.created_contract_address_hash to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash),
) %> title: transaction.created_contract_address_hash
) %>
</div>
<%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
</div>
<div class="col-md-2 d-flex flex-column justify-content-end text-right">
<span data-from-now="<%= transaction.block.timestamp %>"></span>
<%= link(
gettext("Block #") <> "#{transaction.block.number}",
to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
) %>
</div> </div>
<%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
</div>
<div class="col-md-2 d-flex flex-column justify-content-end text-right">
<span data-from-now="<%= transaction.block.timestamp %>"></span>
<%= link(
gettext("Block #") <> "#{transaction.block.number}",
to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
) %>
</div> </div>
</div> </div>
</div> <% contract?(transaction.from_address) || contract?(transaction.to_address) -> %>
<% else %> <div class="tile tile-type-transaction">
<div class="tile tile-type-transaction"> <div class="row">
<div class="row"> <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
<div class="col-md-2 d-flex align-items-center justify-content-center tile-label"> <%= gettext("Transaction") %>
<%= gettext("Transaction") %> </div>
</div> <div class="col-md-8">
<div class="col-md-8"> <%= link(transaction.hash ,
<%= link(transaction.hash , to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction), "class": "tile-title",
"class": "tile-title", "data-test": "transaction_hash",
"data-test": "transaction_hash", "data-transaction-hash": transaction.hash) %>
"data-transaction-hash": transaction.hash) %> <div>
<div> <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
<%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %> &rarr;
&rarr; <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %>
<%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %> </div>
<%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
</div>
<div class="col-md-2 d-flex flex-column justify-content-end text-right">
<span data-from-now="<%= transaction.block.timestamp %>"></span>
<%= link(
gettext("Block #") <> "#{transaction.block.number}",
to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
) %>
</div> </div>
<%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
</div>
<div class="col-md-2 d-flex flex-column justify-content-end text-right">
<span data-from-now="<%= transaction.block.timestamp %>"></span>
<%= link(
gettext("Block #") <> "#{transaction.block.number}",
to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
) %>
</div> </div>
</div> </div>
</div> <% true -> %>
<div class="tile tile-type-transaction">
<div class="row">
<div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
<%= gettext("Transaction") %>
</div>
<div class="col-md-8">
<%= link(transaction.hash ,
to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
"class": "tile-title",
"data-test": "transaction_hash",
"data-transaction-hash": transaction.hash) %>
<div>
<%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
&rarr;
<%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %>
</div>
<%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
</div>
<div class="col-md-2 d-flex flex-column justify-content-end text-right">
<span data-from-now="<%= transaction.block.timestamp %>"></span>
<%= link(
gettext("Block #") <> "#{transaction.block.number}",
to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
) %>
</div>
</div>
</div>
<% end %> <% end %>
<% end %> <% end %>
</div> </div>

147
apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex
Unescape View File

@ -1,108 +1,57 @@
<div class="dashboard-banner"> <div class="dashboard-container">
<div class="dashboard-banner-chart"> <div class="container">
<canvas data-chart="marketHistoryChart" data-current_exchange_rate ='<%= @exchange_rate.usd_value %>' data-available_supply='<%= @exchange_rate.available_supply %>' data-market_history_data='<%=raw encode_market_history_data(@market_history_data) %>' width="400" height="80"></canvas> <div class="dashboard-banner">
</div> <div class="dashboard-banner-chart">
<div class="dashboard-banner-chart-legend"> <canvas data-chart="marketHistoryChart" data-current_exchange_rate ='<%= @exchange_rate.usd_value %>' data-available_supply='<%= @exchange_rate.available_supply %>' data-market_history_data='<%=raw encode_market_history_data(@market_history_data) %>' width="350" height="152"></canvas>
<div class="dashboard-banner-chart-legend-item"> </div>
<span class="dashboard-banner-chart-legend-label"> <div class="dashboard-banner-chart-legend">
Price <div class="dashboard-banner-chart-legend-item">
</span> <span class="dashboard-banner-chart-legend-label">
<span class="dashboard-banner-chart-legend-value"> Price
$0.0498 USD </span>
</span> <span class="dashboard-banner-chart-legend-value">
</div> $0.0498 USD
<div class="dashboard-banner-chart-legend-item"> </span>
<span class="dashboard-banner-chart-legend-label">
Market cap
</span>
<span class="dashboard-banner-chart-legend-value">
$100,350,800 USD
</span>
</div>
</div>
<div class="dashboard-banner-network-stats">
<div class="dashboard-banner-network-stats-item">
<span class="dashboard-banner-network-stats-label">
Block time
</span>
<span class="dashboard-banner-network-stats-value">
69.2105s
</span>
</div>
<div class="dashboard-banner-network-stats-item">
<span class="dashboard-banner-network-stats-label">
Total transactions
</span>
<span class="dashboard-banner-network-stats-value">
12,106,123
</span>
</div>
<div class="dashboard-banner-network-stats-item">
<span class="dashboard-banner-network-stats-label">
Wallet addresses
</span>
<span class="dashboard-banner-network-stats-value">
1,400,500
</span>
</div>
</div>
</div>
<section class="container-fluid">
<%= render ExplorerWeb.ChainView, "_blocks.html", assigns %>
<%= render ExplorerWeb.ChainView, "_transactions.html", assigns %>
<div class="d-flex flex-md-row flex-column">
<div class="container__stats card mr-sm-4 mb-4 mb-sm-0">
<div class="card-body d-flex flex-md-column justify-content-around">
<div class="d-flex flex-column justify-content-center align-items-center">
<%= render ExplorerWeb.IconsView, "_block_icon.html", assigns %>
<div><%= gettext("Block") %></div>
<div> #<%= @chain.number %></div>
</div> </div>
<div class="d-flex flex-column justify-content-center align-items-center"> <div class="dashboard-banner-chart-legend-item">
<%= render ExplorerWeb.IconsView, "_hourglass_icon.html", assigns %> <span class="dashboard-banner-chart-legend-label">
<div> <%= gettext("Last Block") %></div> Market cap
<div data-from-now="<%= @chain.timestamp %>"></div> </span>
<span class="dashboard-banner-chart-legend-value">
$100,350,800 USD
</span>
</div> </div>
<div class="d-flex flex-column justify-content-center align-items-center"> </div>
<div class="stroke"> <%= render ExplorerWeb.IconsView, "_guage_icon.html", assigns %> </div> <div class="dashboard-banner-network-stats">
<div><%= gettext("Avg Block Time") %></div> <div class="dashboard-banner-network-stats-item">
<%= @chain.average_time |> Timex.format_duration(:humanized) %> <span class="dashboard-banner-network-stats-label">
Block time
</span>
<span class="dashboard-banner-network-stats-value">
69.2105s
</span>
</div> </div>
<div class="d-flex flex-column justify-content-center align-items-center"> <div class="dashboard-banner-network-stats-item">
<%= render ExplorerWeb.IconsView, "_transaction_icon.html", assigns %> <span class="dashboard-banner-network-stats-label">
<div> <%= gettext("TPM") %></div> Total transactions
<div> <%= @chain.transaction_velocity |> Cldr.Number.to_string! %></div> </span>
<span class="dashboard-banner-network-stats-value">
12,106,123
</span>
</div> </div>
</div> <div class="dashboard-banner-network-stats-item">
</div> <span class="dashboard-banner-network-stats-label">
Wallet addresses
<div class="container__graph card"> </span>
<div class="card-body"> <span class="dashboard-banner-network-stats-value">
1,400,500
<div class="d-flex justify-content-sm-around mt-2 text-muted"> </span>
<div>
<div class="graph__squares graph__squares--price"></div>
<%= gettext "Price" %> </br>
<%= format_exchange_rate(@exchange_rate) %>
</div>
<div class="mx-2">
<div class="graph__squares graph__squares--mcap"></div>
<%= gettext "Market Cap" %> </br>
<%= format_market_cap(@exchange_rate) %>
</div>
<div>
<%= gettext "24h Volume" %> </br>
<%= format_volume_24h(@exchange_rate) %>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row my-4"> <section class="container">
<%= render ExplorerWeb.ChainView, "_blocks.html", assigns %>
<%= render ExplorerWeb.ChainView, "_transactions.html", assigns %>
</div>
</section> </section>

Write Preview
Loading…
Cancel
Save