Merge pull request #479 from poanetwork/371-update-block-list-page-design
Update block list page designpull/483/head
Jimmy Lauzau
6 years ago
committed by
GitHub
commit
d3193d2773
@ -1,70 +1,79 @@ |
|||||||
<section class="container-fluid"> |
<section class="container"> |
||||||
<div> |
|
||||||
<h1>Blocks</h1> |
|
||||||
<p> |
|
||||||
<%= gettext( |
|
||||||
"Showing #%{start_block} to #%{end_block}", |
|
||||||
start_block: List.first(@blocks).number, |
|
||||||
end_block: List.last(@blocks).number |
|
||||||
) %> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
<div class="card"> |
<div class="card"> |
||||||
<div class="card-body"> |
<div class="card-body"> |
||||||
<table class="table table-responsive-sm table-font"> |
|
||||||
<thead> |
<h1>Blocks</h1> |
||||||
<tr> |
<p> |
||||||
<th><%= gettext "Height" %></th> |
<%= gettext( |
||||||
<th><%= gettext "Age" %></th> |
"Showing #%{start_block} to #%{end_block}", |
||||||
<th><%= gettext "Transactions" %></th> |
start_block: List.first(@blocks).number, |
||||||
<th><%= gettext "Gas Used" %> (<%= gettext("Gas") %>)</th> |
end_block: List.last(@blocks).number |
||||||
<th><%= gettext "Gas Limit" %> (<%= gettext("Gas") %>)</th> |
) %> |
||||||
<th><%= gettext "Gas Price" %></th> |
</p> |
||||||
</tr> |
|
||||||
</thead> |
<%= for block <- @blocks do %> |
||||||
<tbody> |
<div class="tile"> |
||||||
<%= for block <- @blocks do %> |
<div class="row"> |
||||||
<tr> |
<div class="col-md-6"> |
||||||
<td> |
<!-- block height --> |
||||||
<%= link( |
<%= link( |
||||||
block, |
block, |
||||||
class: "blocks__link", |
class: "tile-title", |
||||||
to: block_path(@conn, :show, @conn.assigns.locale, block), |
to: block_path(@conn, :show, @conn.assigns.locale, block), |
||||||
"data-test": "block_number", |
"data-test": "block_number", |
||||||
"data-block-number": to_string(block.number) |
"data-block-number": to_string(block.number) |
||||||
) %> |
) %> |
||||||
</td> |
<div> |
||||||
<td data-from-now="<%= block.timestamp %>"></td> |
<!-- transactions --> |
||||||
<td> |
<span class="mr-2"> |
||||||
<%= gettext("%{count} transactions", count: block.transactions |> Enum.count) %> |
<%= ngettext("%{count} transaction", "%{count} transactions", Enum.count(block.transactions)) %> |
||||||
</td> |
</span> |
||||||
<td> |
<!-- size --> |
||||||
<%= block.gas_used |> Cldr.Number.to_string! %> (<%= |
<span class="mr-2"> <%= Cldr.Unit.new(:byte, block.size) |> Cldr.Unit.to_string! %> </span> |
||||||
block.gas_used / block.gas_limit |> Cldr.Number.to_string!(format: "#.#%") |
<!-- age --> |
||||||
%>) |
<span data-from-now="<%= block.timestamp %>"></span> |
||||||
</td> |
</div> |
||||||
<td> |
<div class=""> |
||||||
<%= block.gas_limit |> Cldr.Number.to_string! %> |
<!-- validator --> |
||||||
</td> |
<%= gettext "Miner" %> |
||||||
<td> |
<span class="ml-2"> |
||||||
<%= average_gas_price(block) %> |
<%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, block.miner_hash) do %> |
||||||
</td> |
<%= block.miner_hash %> |
||||||
</tr> |
<% end %> |
||||||
<% end %> |
</span> |
||||||
</tbody> |
</div> |
||||||
</table> |
</div> |
||||||
|
<div class="col-md-6 text-right d-flex flex-column align-items-end justify-content-end"> |
||||||
|
<!-- Gas Used --> |
||||||
|
<div class=""> |
||||||
|
<%= formatted_gas(block.gas_used) %> |
||||||
|
(<%= formatted_gas(block.gas_used / block.gas_limit, format: "#.#%") %>) |
||||||
|
<%= gettext "Gas Used" %> |
||||||
|
</div> |
||||||
|
<div class="progress w-25"> |
||||||
|
<div class="progress-bar" role="progressbar" style="width: <%= formatted_gas(block.gas_used / block.gas_limit, format: "#.#%") %>;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- Gas Limit --> |
||||||
|
<span> <%= formatted_gas(block.gas_limit) %> <%= gettext "Gas Limit" %> </span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<% end %> |
||||||
|
|
||||||
|
<%= if @next_page_params do %> |
||||||
|
<%= link( |
||||||
|
gettext("Older"), |
||||||
|
class: "button button--secondary button--sm float-right mt-3", |
||||||
|
to: block_path( |
||||||
|
@conn, |
||||||
|
:index, |
||||||
|
@conn.assigns.locale, |
||||||
|
@next_page_params |
||||||
|
) |
||||||
|
) %> |
||||||
|
<% end %> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<%= if @next_page_params do %> |
|
||||||
<%= link( |
|
||||||
gettext("Older"), |
|
||||||
class: "button button--secondary button--sm u-float-right mt-3", |
|
||||||
to: block_path( |
|
||||||
@conn, |
|
||||||
:index, |
|
||||||
@conn.assigns.locale, |
|
||||||
@next_page_params |
|
||||||
) |
|
||||||
) %> |
|
||||||
<% end %> |
|
||||||
</section> |
</section> |
||||||
|
|||||||
Loading…
Reference in new issue