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

Dsashboard banner styling

Browse Source
pull/346/head
katibest 7 years ago committed by jimmay5469
parent 969d0adfee
commit 7ed6585ff6
8 changed files with 91 additions and 101 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. 8
      apps/explorer_web/assets/css/components/_dashboard-banner.scss
  2. 4
      apps/explorer_web/assets/css/components/_tile.scss
  3. 18
      apps/explorer_web/assets/js/lib/market_history_chart.js
  4. 11
      apps/explorer_web/lib/explorer_web/templates/address/_link.html.eex
  5. 114
      apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex
  6. 2
      apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex
  7. 2
      apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
  8. 33
      apps/explorer_web/lib/explorer_web/views/transaction_view.ex

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

@ -1,4 +1,4 @@
.dashboard-container {
.dashboard-banner-container {
position: relative;
background-color: $white;
box-shadow: 0 5px 40px -5px rgba($black, 0.25);
@ -24,6 +24,10 @@
bottom: 0;
left: 70%;
background-color: $primary;
@media (max-width: 992px) {
left: 90%;
}
}
}
@ -31,7 +35,7 @@
position: relative;
display: grid;
grid-template-rows: 3rem 2fr 1fr;
grid-template-columns: 1fr 3fr;
grid-template-columns: 1fr 4fr;
grid-template-areas:
"chart ."
"chart stats"

4
apps/explorer_web/assets/css/components/_tile.scss
Unescape View File

@ -13,6 +13,10 @@
margin-top: 1rem;
}
@media (max-width: 767.98px) {
margin-bottom: 1rem;
}
&-type {
&-transaction {

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

@ -62,9 +62,6 @@ function createMarketHistoryChart (ctx) {
displayFormats: {
week: 'MMM D'
}
},
ticks: {
callback: (value, index, values) => value,
}
}],
yAxes: [{
@ -91,7 +88,20 @@ function createMarketHistoryChart (ctx) {
}]
},
tooltips: {
enabled: false
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
}
}
}
}
}
})

11
apps/explorer_web/lib/explorer_web/templates/address/_link.html.eex
Unescape View File

@ -1,8 +1,13 @@
<%= if @address do %>
<%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address) do %>
<%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address), "data-address-hash": @address do %>
<%= if contract?(@address) do %>
<span class="tile-label"><%= @address %></span>
<% else %>
<%= @address %>
<% end %>
<%= @address %>
<% end %>
<% else %>
<%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address_hash), "data-address-hash": @address_hash do %>
<span class="tile-label"><%= @address_hash %></span>
<% end %>
<% end %>

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

@ -3,98 +3,34 @@
<%= 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>
<%= for transaction <- @chain.transactions do %>
<%= cond do %>
<%= transaction.created_contract_address_hash != nil -> %>
<div class="tile tile-type-contract-creation">
<div class="row">
<div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
<%= gettext("Contract Creation") %>
</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;
<%= 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
) %>
</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 class="tile <%= ExplorerWeb.TransactionView.tile_class(transaction) %>">
<div class="row">
<div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
<%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %>
</div>
<% ExplorerWeb.AddressView.contract?(transaction.from_address) || ExplorerWeb.AddressView.contract?(transaction.to_address) -> %>
<div class="tile tile-type-contract">
<div class="row">
<div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
<%= gettext("Contract") %>
</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 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", Keyword.merge(ExplorerWeb.TransactionView.display_to_address(transaction), locale: @locale) %>
</div>
<%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
</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 %>
<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 %>
</div>
</div>

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

@ -1,4 +1,4 @@
<div class="dashboard-container">
<div class="dashboard-banner-container d-none d-md-block">
<div class="container">
<div class="dashboard-banner">
<div class="dashboard-banner-chart">

2
apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
Unescape View File

@ -1,4 +1,4 @@
<nav class="navbar navbar-expand-lg bg-primary">
<nav class="navbar navbar-dark navbar-expand-lg bg-primary">
<div class="container">
<%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
<img class="navbar-logo" src="<%= static_path(@conn, "/images/poa_logo.svg") %>" />

33
apps/explorer_web/lib/explorer_web/views/transaction_view.ex
Unescape View File

@ -5,9 +5,40 @@ defmodule ExplorerWeb.TransactionView do
alias Explorer.Chain
alias Explorer.Chain.{InternalTransaction, Transaction, Wei}
alias Explorer.ExchangeRates.Token
alias ExplorerWeb.BlockView
alias ExplorerWeb.{AddressView, BlockView}
alias ExplorerWeb.ExchangeRates.USD
import ExplorerWeb.Gettext
def contract_creation?(%Transaction{created_contract_address_hash: nil}), do: false
def contract_creation?(_), do: true
def contract?(%Transaction{from_address: from_address, to_address: to_address}) do
AddressView.contract?(from_address) || AddressView.contract?(to_address)
end
def tile_class(%Transaction{} = transaction) do
cond do
contract_creation?(transaction) -> "tile-type-contract-creation"
contract?(transaction) -> "tile-type-contract"
true -> "tile-type-transaction"
end
end
def transaction_display_type(%Transaction{} = transaction) do
cond do
contract_creation?(transaction) -> gettext("Contract Creation")
contract?(transaction) -> gettext("Contract")
true -> gettext("Transaction")
end
end
# This is the address to be shown in the to field
def display_to_address(%Transaction{to_address_hash: nil, created_contract_address_hash: address_hash}),
do: [address: nil, address_hash: address_hash]
def display_to_address(%Transaction{to_address: address}), do: [address: address]
def confirmations(%Transaction{block: block}, named_arguments) when is_list(named_arguments) do
case block do
nil -> 0

Write Preview
Loading…
Cancel
Save