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

Implement new design style to the transactions section of the block details page

Browse Source
pull/438/head
Ryan Arthur 6 years ago committed by katibest
parent 154c53ecfe
commit 0122454f54
5 changed files with 87 additions and 202 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/lib/explorer_web/templates/address_transaction/_transaction.html.eex
  2. 44
      apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex
  3. 38
      apps/explorer_web/lib/explorer_web/templates/block_transaction/_transaction.html.eex
  4. 204
      apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex
  5. 2
      apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex

1
apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex
Unescape View File

@ -18,6 +18,7 @@
<% end %>
&rarr;
<%= if @address.hash == ExplorerWeb.TransactionView.to_address_hash(@transaction) do %>
<%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address) %>
<% else %>

44
apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex
Unescape View File

@ -11,9 +11,6 @@
<!-- # of Transactions -->
<span class="mr-4"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span>
<!-- # of Contracts -->
<span class="mr-4"> 10 Contracts </span>
<!-- Block Size -->
<span class="mr-4"> <%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %> </span>
@ -28,7 +25,7 @@
<!-- Block Hash -->
<dl class="row">
<dt class="col-sm-3 text-muted"> <%= gettext "Hash" %> </dt>
<dd class="col-sm-9"> <%= @block.hash %> </dd>
<dd class="col-sm-9"> <%= to_string(@block.hash) %> </dd>
</dl>
<!-- Parent Hash -->
@ -43,26 +40,25 @@
</dd>
</dl>
<!-- Gas Used -->
<!-- Difficulty value -->
<dl class="row">
<dt class="col-sm-3 text-muted"> <%= gettext "Gas Used" %> </dt>
<dt class="col-sm-3 text-muted"> <%= gettext "Difficulty" %> </dt>
<dd class="col-sm-9">
<%= @block.gas_used |> Cldr.Number.to_string! %> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>)
<%= @block.difficulty |> Cldr.Number.to_string! %>
</dd>
</dl>
<!-- Gas Limit -->
<!-- Total Difficulty -->
<dl class="row">
<dt class="col-sm-3 text-muted"> <%= gettext "Gas Limit" %> </dt>
<dd class="col-sm-9"> <%= @block.gas_limit |> Cldr.Number.to_string! %> </dd>
<dt class="col-sm-3 text-muted"> <%= gettext "Total Difficulty" %> </dt>
<dd class="col-sm-9"> <%= @block.total_difficulty |> Cldr.Number.to_string! %> </dd>
</dl>
<!-- Nonce -->
<dl class="row">
<dl class="row mb-0">
<dt class="col-sm-3 text-muted"> <%= gettext "Nonce" %> </dt>
<dd class="col-sm-9"> <%= @block.nonce %> </dd>
<dd class="col-sm-9"> <%= to_string(@block.nonce) %> </dd>
</dl>
</div>
</div>
</div>
@ -74,24 +70,26 @@
<h2 class="card-title text-white"> <%= gettext "Miner" %> </h2>
<div class="text-right">
<!-- Validator's Name -->
<h3 class="text-white"> Lester McTester </h3>
<!-- Until we can get the validator's name we are using the Validator's address hash -->
<h3 class="text-white text-truncate"> <%= link @block.miner, class: "text-white", to: address_path(ExplorerWeb.Endpoint, :show, @locale, @block.miner) %> </h3>
<!-- Validator's address hash -->
<span class="text-light">
<%= link @block.miner, to: address_path(ExplorerWeb.Endpoint, :show, @locale, @block.miner) %>
</span>
<span class="text-light text-truncate"> </span>
</div>
</div>
</div>
<!-- Difficulty -->
<!-- Gas -->
<div class="card">
<div class="card-body">
<h2 class="card-title"> <%= gettext "Difficulty" %> </h2>
<h2 class="card-title"> <%= gettext "Gas Used" %> </h2>
<div class="text-right">
<!-- Difficulty value -->
<h3> <%= @block.difficulty |> Cldr.Number.to_string! %> </h3>
<!-- Total Difficulty -->
<span class="text-muted"> <%= @block.total_difficulty |> Cldr.Number.to_string! %> </span>
<!-- Gas Used -->
<h3>
<%= @block.gas_used |> Cldr.Number.to_string! %>
<span class="text-muted"> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>) </span>
</h3>
<!-- Gas Limit -->
<span class="text-muted"> <%= @block.gas_limit |> Cldr.Number.to_string! %> <%= gettext "Gas Limit" %> </span>
</div>
</div>
</div>

38
apps/explorer_web/lib/explorer_web/templates/block_transaction/_transaction.html.eex
Unescape View File

@ -0,0 +1,38 @@
<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> fade-in tile-status--<%= ExplorerWeb.TransactionView.status(@transaction) %>" data-transaction-hash="<%= @transaction.hash %>">
<div class="row">
<div class="pl-5 col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center">
<span class="tile-label">
<%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
</span>
<div class="tile-status-label" data-test="transaction_status">
<%= ExplorerWeb.TransactionView.formatted_status(@transaction) %>
</div>
</div>
<div class="col-md-7 col-lg-8 d-flex flex-column">
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %>
<span>
<%= render ExplorerWeb.AddressView, "_link.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), locale: @locale %>
&rarr;
<%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), locale: @locale %>
</span>
<span>
<span data-from-now="<%= @transaction.block.timestamp %>"></span>
<span class="ml-1">
<%= link(
gettext("Block #%{number}", number: to_string(@transaction.block.number)),
to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
) %>
</span>
</span>
</div>
<div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start align-items-end text-md-right">
<span class="tile-title">
<%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %>
</span>
<span class="mr-2 mr-sm-0 text-muted"> <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
</div>
</div>
</div>

204
apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex
Unescape View File

@ -2,128 +2,12 @@
<%= render ExplorerWeb.BlockView, "overview.html", assigns %>
</section>
<section class="container-fluid">
<section>
<h1><%= gettext("Block Details") %></h1>
<p data-test="block_detail_number"><%= @block.number %></p>
<div class="card mb-3">
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<table class="table table-font table-responsive-sm table-horizontal">
<tbody>
<tr>
<th scope="row">
<%= gettext "Timestamp" %>
</th>
<td>
<span data-from-now="<%= @block.timestamp %>"></span> (<%= formatted_timestamp(@block) %>)
</td>
</tr>
<tr>
<th scope="row">
<%= gettext "Transaction" %>
</th>
<td>
<%= gettext "%{count} transactions in this block", count: @block_transaction_count %>
</td>
</tr>
<tr>
<th scope="row">
<%= gettext "Hash" %>
</th>
<td title="<%= @block.hash %>">
<%= @block.hash %>
</td>
</tr>
<tr>
<th scope="row">
<%= gettext "Parent Hash" %>
</th>
<td title="<%= @block.parent_hash %>">
<%= link(
@block.parent_hash,
to: block_path(@conn, :show, @conn.assigns.locale, @block.number - 1)
) %>
</td>
</tr>
<tr>
<th scope="row">
<%= gettext "Miner" %>
</th>
<td title="<%= @block.miner %>">
<%= @block.miner %>
</td>
</tr>
<tr>
<th scope="row">
<%= gettext "Difficulty" %>
</th>
<td title="<%= @block.difficulty %>">
<%= @block.difficulty |> Cldr.Number.to_string! %>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-6">
<table class="table table-font table-responsive-sm table-horizontal">
<tbody>
<tr>
<th scope="row">
<%= gettext "Total Difficulty" %>
</th>
<td title="<%= @block.total_difficulty %>">
<%= @block.total_difficulty |> Cldr.Number.to_string! %>
</td>
</tr>
<tr>
<th scope="row">
<%= gettext "Size" %>
</th>
<td>
<%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %>
</td>
</tr>
<tr>
<th scope="row">
<%= gettext "Gas Used" %>
</th>
<td>
<%= @block.gas_used |> Cldr.Number.to_string! %> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>)
</td>
</tr>
<tr>
<th scope="row">
<%= gettext "Gas Limit" %>
</th>
<td>
<%= @block.gas_limit |> Cldr.Number.to_string! %>
</td>
</tr>
<tr>
<th scope="Nonce">
<%= gettext "Nonce" %>
</th>
<td>
<%= @block.nonce %>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="card mb-3">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<!-- DESKTOP TAB NAV -->
<ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex">
<li class="nav-item">
<%= link(
gettext("Transactions"),
@ -132,69 +16,33 @@
) %>
</li>
</ul>
<!-- MOBILE DROPDOWN NAV -->
<ul class="nav nav-tabs card-header-tabs d-md-none">
<li class="nav-item dropdown flex-fill text-center">
<a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Transactions</a>
<div class="dropdown-menu">
<%= link(
gettext("Transactions"),
class: "dropdown-item",
to: block_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["block_id"])
) %>
</div>
</li>
</ul>
</div>
<div class="card-body">
<%= if Enum.count(@transactions) > 0 do %>
<table class="table table-responsive-sm table-font">
<thead>
<tr>
<th>
<%= gettext "Status" %>
</th>
<th><%= gettext "Hash" %></th>
<th><%= gettext "Block" %></th>
<th><%= gettext "Age" %></th>
<th><%= gettext "From" %></th>
<th></th>
<th><%= gettext "To" %></th>
<th><%= gettext "Value" %></th>
</tr>
</thead>
<tbody>
<%= for transaction <- @transactions do %>
<tr data-transaction-hash="<%= transaction.hash %>">
<td data-test="transaction_status">
<div class="transaction__dot transaction__dot--<%= ExplorerWeb.TransactionView.status(transaction) %>" data-toggle="tooltip" title="<%= ExplorerWeb.TransactionView.formatted_status(transaction) %>"></div>
</td>
<td>
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
</td>
<td>
<%= link(
transaction.block,
to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
) %>
</td>
<td data-from-now="<%= transaction.block.timestamp %>"></td>
<td class="address-cell">
<%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), locale: @locale %>
</td>
<td class="u-text-center"><i class="fas fa-arrow-circle-right"></i></td>
<td>
<%= cond do %>
<% transaction.to_address_hash != nil -> %>
<%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.to_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.to_address), locale: @locale %>
<% transaction.created_contract_address_hash != nil -> %>
<i class="fas fa-plus-square"></i>
<%= link(
"Contract Creation",
class: "transaction__link",
"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
) %>
<% true -> %>
<% end %>
</td>
<td>
<%= ExplorerWeb.TransactionView.value(transaction) %>
</td>
</tr>
<% end %>
</tbody>
</table>
<h2 class="card-title"><%= gettext "Transactions" %></h2>
<span data-selector="transactions-list">
<%= for transaction <- @transactions do %>
<%= render "_transaction.html", locale: @locale, transaction: transaction %>
<% end %>
</span>
<% else %>
<p><%= gettext "There are no Transactions" %></p>
<div class="tile tile-muted text-center">
<span data-selector="empty-transactions-list"><%= gettext "There are no transactions for this address." %></span>
</div>
<% end %>
</div>
</div>

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

@ -12,7 +12,7 @@
<%= link(block, to: block_path(@conn, :show, @conn.assigns.locale, block), class: "tile-title") %>
<div>
<%= block.transactions |> Enum.count %> Transactions
<span class="ml-2 ml-md-0 d-md-block" data-from-now="<%= block.timestamp %>"> </span>
<span class="ml-2" data-from-now="<%= block.timestamp %>"> </span>
</div>
<span class="text-truncate">
Validated by

Write Preview
Loading…
Cancel
Save