From 590724482c31b5152103db902fdd25b584957741 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 11:31:58 -0400 Subject: [PATCH 01/14] Apply Bootstrap grid and components to the dashboard --- apps/explorer_web/assets/css/app.scss | 6 ++ .../assets/css/components/_chain.scss | 28 ++---- .../assets/css/theme/_poa_variables.scss | 2 +- .../assets/css/theme/_theme_ribbon.scss | 2 +- .../templates/chain/_blocks.html.eex | 56 +++++------ .../templates/chain/_transactions.html.eex | 58 +++++------ .../templates/chain/show.html.eex | 98 ++++++++++--------- .../templates/layout/_ribbon.html.eex | 4 +- 8 files changed, 127 insertions(+), 127 deletions(-) diff --git a/apps/explorer_web/assets/css/app.scss b/apps/explorer_web/assets/css/app.scss index f4d00b1cdc..ad4852997b 100644 --- a/apps/explorer_web/assets/css/app.scss +++ b/apps/explorer_web/assets/css/app.scss @@ -20,12 +20,18 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "node_modules/bootstrap/scss/root"; @import "node_modules/bootstrap/scss/reboot"; @import "node_modules/bootstrap/scss/grid"; +@import "node_modules/bootstrap/scss/utilities/spacing"; +@import "node_modules/bootstrap/scss/utilities/sizing"; +@import "node_modules/bootstrap/scss/utilities/display"; +@import "node_modules/bootstrap/scss/utilities/flex"; +@import "node_modules/bootstrap/scss/utilities/text"; // Bootstrap Components @import "node_modules/bootstrap/scss/dropdown"; @import "node_modules/bootstrap/scss/transitions"; @import "node_modules/bootstrap/scss/tables"; @import "node_modules/bootstrap/scss/nav"; +@import "node_modules/bootstrap/scss/card"; //Custom theme @import "theme/theme_ribbon"; diff --git a/apps/explorer_web/assets/css/components/_chain.scss b/apps/explorer_web/assets/css/components/_chain.scss index 4eeef4e647..ca864a52b6 100644 --- a/apps/explorer_web/assets/css/components/_chain.scss +++ b/apps/explorer_web/assets/css/components/_chain.scss @@ -22,14 +22,10 @@ .container__stats { - @extend %paper; display: flex; - padding: 15px; - width: 100%; font-size: 12px; text-align: center; flex-direction: row; - justify-content: space-around; img { display: inline-block; @@ -39,7 +35,7 @@ } svg { - width: 30px; + height: 30px; } path { @@ -49,8 +45,6 @@ .stroke { stroke: $primary; } - - } .graph__squares { @@ -67,22 +61,11 @@ } } -.graph-flex { - font-size: 12px; - display: flex; - justify-content: space-between; - margin-top: 25px; - color: $gray-500; -} - @media (min-width: $explorer-breakpoint-md) { .container__stats { - width: 15%; - flex-direction: column; - align-content: space-between; color: $gray-500; - margin: 10px 5px; + width: 16.67%; img { display: inline-block; @@ -90,11 +73,12 @@ margin-bottom: explorer-size(-2); text-align: center; } + } - div { - flex-grow: 1; - } + .container__graph { + flex-grow: 1; } + .chain { &__image { height: explorer-size(1); diff --git a/apps/explorer_web/assets/css/theme/_poa_variables.scss b/apps/explorer_web/assets/css/theme/_poa_variables.scss index e0992d5eeb..51ffd7f4f6 100644 --- a/apps/explorer_web/assets/css/theme/_poa_variables.scss +++ b/apps/explorer_web/assets/css/theme/_poa_variables.scss @@ -276,7 +276,7 @@ $lead-font-weight: 300 !default; $small-font-size: 80% !default; -$text-muted: $gray-600 !default; +$text-muted: $gray-500 !default; $blockquote-small-color: $gray-600 !default; $blockquote-font-size: ($font-size-base * 1.25) !default; diff --git a/apps/explorer_web/assets/css/theme/_theme_ribbon.scss b/apps/explorer_web/assets/css/theme/_theme_ribbon.scss index 5659eb441b..1b9b792925 100644 --- a/apps/explorer_web/assets/css/theme/_theme_ribbon.scss +++ b/apps/explorer_web/assets/css/theme/_theme_ribbon.scss @@ -59,7 +59,7 @@ //Ribbon FLip Syles -.card { +.ribbon { width: 100%; height: 100%; transition: all .5s; diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex index 2eba08f53c..4963d97113 100644 --- a/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex @@ -1,31 +1,31 @@ -
-
+
+
<%= link(gettext("View All"), to: block_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall u-float-right") %> -

<%= gettext "Blocks" %>

+

<%= gettext "Blocks" %>

+ + + + + + + + + + <%= for block <- @chain.blocks do %> + + + + + + + + <% end %> + +
<%= gettext "Height" %><%= gettext "Age" %><%= gettext "TXNs" %><%= gettext "Gas" %><%= gettext "Validator" %>
+ " /> + <%= link(block, to: block_path(@conn, :show, @conn.assigns.locale, block)) %> + <%= block.timestamp |> Timex.from_now %><%= block.transactions |> Enum.count %><%= block.gas_used |> Cldr.Number.to_string! %> + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: block.miner %> +
- - - - - - - - - - <%= for block <- @chain.blocks do %> - - - - - - - - <% end %> - -
<%= gettext "Height" %><%= gettext "Age" %><%= gettext "TXNs" %><%= gettext "Gas" %><%= gettext "Validator" %>
- " /> - <%= link(block, to: block_path(@conn, :show, @conn.assigns.locale, block)) %> - <%= block.timestamp |> Timex.from_now %><%= block.transactions |> Enum.count %><%= block.gas_used |> Cldr.Number.to_string! %> - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: block.miner %> -
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 f9eedac3d1..ed4d1bff71 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 @@ -1,32 +1,32 @@ -
-
+
+
<%= link(gettext("View All"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall u-float-right") %> -

<%= gettext "Transactions" %>

+

<%= gettext "Transactions" %>

+ + + + + + + + + + <%= for transaction <- @chain.transactions do %> + + + + + + + + <% end %> + +
<%= gettext "TX Hash" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>)<%= gettext "Age" %>
+ <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %> + + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> + + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> + <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= transaction.block.timestamp |> Timex.from_now() %>
- - - - - - - - - - <%= for transaction <- @chain.transactions do %> - - - - - - - - <% end %> - -
<%= gettext "TX Hash" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>)<%= gettext "Age" %>
- <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %> - - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> - - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> - <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= transaction.block.timestamp |> Timex.from_now() %>
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 2860572a8d..111bd192ed 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,49 +1,59 @@ -
-
-
-
- <%= render ExplorerWeb.IconsView, "_block_icon.html", assigns %> -
<%= gettext("Block") %>
-
#<%= @chain.number %>
-
-
- <%= render ExplorerWeb.IconsView, "_hourglass_icon.html", assigns %> -
<%= gettext("Last Block") %>
-
<%= @chain.timestamp |> Timex.from_now() %>
-
-
-
<%= render ExplorerWeb.IconsView, "_guage_icon.html", assigns %>
-
<%= gettext("Avg Block Time") %>
- <%= @chain.average_time |> Timex.format_duration(:humanized) %> -
-
- <%= render ExplorerWeb.IconsView, "_transaction_icon.html", assigns %> -
<%= gettext("TPM") %>
-
<%= @chain.transaction_velocity |> Cldr.Number.to_string! %>
-
-
-
- -
-
-
- <%= gettext "Price" %>
- $<%= format_exchange_rate(@exchange_rate) %> <%= gettext "USD" %> +
+
+
+
+
+ <%= render ExplorerWeb.IconsView, "_block_icon.html", assigns %> +
<%= gettext("Block") %>
+
#<%= @chain.number %>
+
+
+ <%= render ExplorerWeb.IconsView, "_hourglass_icon.html", assigns %> +
<%= gettext("Last Block") %>
+
<%= @chain.timestamp |> Timex.from_now() %>
-
-
- <%= gettext "Market Cap" %>
- $<%= format_market_cap(@exchange_rate) %> <%= gettext "USD" %> +
+
<%= render ExplorerWeb.IconsView, "_guage_icon.html", assigns %>
+
<%= gettext("Avg Block Time") %>
+ <%= @chain.average_time |> Timex.format_duration(:humanized) %>
-
- <%= gettext "24h Volume" %>
- $<%= format_volume_24h(@exchange_rate) %> <%= gettext "USD" %> +
+ <%= render ExplorerWeb.IconsView, "_transaction_icon.html", assigns %> +
<%= gettext("TPM") %>
+
<%= @chain.transaction_velocity |> Cldr.Number.to_string! %>
-
-
-
- <%= render ExplorerWeb.ChainView, "_blocks.html", assigns %> - <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %> -
+ +
+
+ +
+
+
+ <%= gettext "Price" %>
+ $<%= format_exchange_rate(@exchange_rate) %> <%= gettext "USD" %> +
+
+
+ <%= gettext "Market Cap" %>
+ $<%= format_market_cap(@exchange_rate) %> <%= gettext "USD" %> +
+
+ <%= gettext "24h Volume" %>
+ $<%= format_volume_24h(@exchange_rate) %> <%= gettext "USD" %> +
+
+
+
+
+ +
+
+ <%= render ExplorerWeb.ChainView, "_blocks.html", assigns %> +
+
+ <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %> +
+
+
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex index 0cc275ce66..15b8bc8677 100644 --- a/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex @@ -1,5 +1,5 @@
-
+
<%= link to: chain_path(@conn, :show), "data-test": "header_logo" do %> " /> <% end %> @@ -34,7 +34,7 @@
-
+
<%= link to: chain_path(@conn, :show) do %> " /> <% end %> From 3c432f7b847e0cf545486b0875da7bef889e551c Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 14:51:36 -0400 Subject: [PATCH 02/14] Use a section element for the container instead of a div --- .../lib/explorer_web/templates/chain/show.html.eex | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 111bd192ed..bf9277ffdd 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,4 +1,4 @@ -
+
@@ -56,4 +56,4 @@ <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %>
-
+
From 709531cc70d4d702d0e4ebb63c67decaa88204a9 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 14:52:38 -0400 Subject: [PATCH 03/14] Apply Bootstarp cards to the Blocks page --- .../lib/explorer_web/templates/block/index.html.eex | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/explorer_web/lib/explorer_web/templates/block/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/block/index.html.eex index 1b68c96a08..27b7898ae8 100644 --- a/apps/explorer_web/lib/explorer_web/templates/block/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/block/index.html.eex @@ -1,4 +1,4 @@ -
+

Blocks @@ -11,8 +11,8 @@ ) %>

-
-
+
+
From e49d1ca1181c674f2a71527b3f4efbbc79dbdea5 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 15:02:27 -0400 Subject: [PATCH 04/14] Add top margin to the footer --- apps/explorer_web/assets/css/components/_footer.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/explorer_web/assets/css/components/_footer.scss b/apps/explorer_web/assets/css/components/_footer.scss index d12364f2f4..b4f9b72696 100644 --- a/apps/explorer_web/assets/css/components/_footer.scss +++ b/apps/explorer_web/assets/css/components/_footer.scss @@ -5,6 +5,7 @@ background: explorer-color("gray", "50"); color:explorer-color("gray", "700"); text-align: center; + margin-top: 15px; padding: 14px; height: 50px; From 20f595dd8734575a86de7a354f7cb8cf76cc0e58 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 15:06:06 -0400 Subject: [PATCH 05/14] Apply Bootstrap cards to the transaction index pages --- .../pending_transaction/index.html.eex | 8 +- .../templates/transaction/index.html.eex | 168 +++++++++--------- 2 files changed, 88 insertions(+), 88 deletions(-) diff --git a/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex index 2be4903e53..da55445f2c 100644 --- a/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex @@ -1,4 +1,4 @@ -
+

Transactions @@ -25,8 +25,8 @@

-
-
+
+
@@ -68,7 +68,7 @@ <%= if @last_seen_pending_inserted_at do %> <%= link( gettext("Next Page"), - class: "button button--secondary button--sm u-float-right", + class: "button button--secondary button--sm u-float-right mt-3", to: pending_transaction_path( @conn, :index, diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex index f3fdf495d3..93ad02d1c6 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex @@ -1,87 +1,87 @@ -
-

- Transactions -

-

- <%= gettext("Showing %{count} Validated Transactions", count: @transaction_count) %> -

-
- -
-
-
-
- +
+

+ Transactions +

+

+ <%= gettext("Showing %{count} Validated Transactions", count: @transaction_count) %> +

+
+ +
+
+
+
+ + + + + + + + + + + + + <%= for transaction <- @transactions do %> - - - - - - - + + + + + + + - - - <%= for transaction <- @transactions do %> - - - - - - - - - - <% end %> - -
<%= gettext "Status" %><%= gettext "Hash" %><%= gettext "Block" %><%= gettext "Age" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>)
<%= gettext "Status" %><%= gettext "Hash" %><%= gettext "Block" %><%= gettext "Age" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>) +
+
+ <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %> + + <%= link( + transaction.block, + class: "transactions__link", + to: block_path(@conn, :show, @conn.assigns.locale, transaction.block) + ) %> + + <%= transaction.block.timestamp |> Timex.from_now %> + + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> + + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> + + <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> +
-
-
- <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %> - - <%= link( - transaction.block, - class: "transactions__link", - to: block_path(@conn, :show, @conn.assigns.locale, transaction.block) - ) %> - - <%= transaction.block.timestamp |> Timex.from_now %> - - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> - - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> - - <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> -
-
+ <% end %> + +
- <%= if @last_seen_collated_hash do %> - <%= link( - gettext("Next Page"), - class: "button button--secondary button--sm u-float-right", - to: transaction_path( - @conn, - :index, - @conn.assigns.locale, - %{"last_seen_collated_hash" => to_string(@last_seen_collated_hash)} - ) - ) %> - <% end %> -
+
+ <%= if @last_seen_collated_hash do %> + <%= link( + gettext("Next Page"), + class: "button button--secondary button--sm u-float-right mt-3", + to: transaction_path( + @conn, + :index, + @conn.assigns.locale, + %{"last_seen_collated_hash" => to_string(@last_seen_collated_hash)} + ) + ) %> + <% end %> + From e8657dfdea51baf4adb2ba44b5d67bb5e169cadd Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 15:26:43 -0400 Subject: [PATCH 06/14] Apply Bootstrap cards to the Transaction Details pages --- .../templates/transaction/overview.html.eex | 321 +++++++++--------- .../index.html.eex | 70 ++-- .../templates/transaction_log/index.html.eex | 98 +++--- 3 files changed, 249 insertions(+), 240 deletions(-) diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex index f43d2068f9..9a5c9299ae 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex @@ -1,160 +1,165 @@ -

<%= gettext "Transaction Details" %>

-

<%= @transaction %>

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- <%= gettext "Transaction Status" %> - - <%= formatted_status(@transaction) %> -
-
- <%= gettext "Block Number" %> - - <% block = @transaction.block %> - <%= if block do %> - <%= link( - block, - class: "transaction__link", - to: block_path(@conn, :show, @conn.assigns.locale, block) - ) %> - <% end %> - (<%= gettext "%{confirmations} block confirmations", confirmations: confirmations(@transaction, max_block_number: @max_block_number) %>) -
- <%= gettext "Age" %> - - <%= formatted_age(@transaction) %> -
- <%= gettext "Value" %> - -
<%= value(@transaction) %>
-
<%= formatted_usd_value(@transaction, @exchange_rate) %>
-
- <%= gettext "From" %> - - <%= if @transaction.from_address do %> - <%= link( - @transaction.from_address, - class: "transaction__link", - to: address_path(@conn, :show, @conn.assigns.locale, @transaction.from_address) - ) %> - <% else %> - <%= gettext "Pending" %> - <% end %> -
- <%= gettext "To" %> - - <%= if @transaction.to_address do %> - <%= link( - @transaction.to_address, - class: "transaction__link", - to: address_path(@conn, :show, @conn.assigns.locale, @transaction.to_address) - ) %> - <% else %> - <%= gettext "Pending" %> - <% end %> -
- <%= gettext "Nonce" %> - - <%= @transaction.nonce %> -
-
-
- - - - - <% first_seen = first_seen(@transaction) %> - - - - - <% last_seen = last_seen(@transaction) %> - - - - - - - - - - - - - - - - - - - - - - - -
- <%= gettext "First Seen" %> - - <%= first_seen %> -
- <%= gettext "Last Seen" %> - - <%= last_seen %> -
- <%= gettext "Gas Limit" %> - - <%= format_gas_limit(@transaction.gas) %> <%= gettext("Gas") %> -
- <%= gettext "Gas Price" %> - - <%= gas_price(@transaction, :wei) %> - (<%= gas_price(@transaction, :gwei) %>) -
- <%= gettext "TX Fee" %> - -
<%= formatted_fee(@transaction, denomination: :ether) %>
-
<%= formatted_fee(@transaction, exchange_rate: @exchange_rate) %>
-
- <%= gettext "Total Gas Used" %> - - <%= cumulative_gas_used(@transaction) %> <%= gettext("Wei") %> -
- <%= gettext "Input" %> - - <%= @transaction.input %> -
+
+

<%= gettext "Transaction Details" %>

+

<%= @transaction %>

+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ <%= gettext "Transaction Status" %> + + <%= formatted_status(@transaction) %> +
+
+ <%= gettext "Block Number" %> + + <% block = @transaction.block %> + <%= if block do %> + <%= link( + block, + class: "transaction__link", + to: block_path(@conn, :show, @conn.assigns.locale, block) + ) %> + <% end %> + (<%= gettext "%{confirmations} block confirmations", confirmations: confirmations(@transaction, max_block_number: @max_block_number) %>) +
+ <%= gettext "Age" %> + + <%= formatted_age(@transaction) %> +
+ <%= gettext "Value" %> + +
<%= value(@transaction) %>
+
<%= formatted_usd_value(@transaction, @exchange_rate) %>
+
+ <%= gettext "From" %> + + <%= if @transaction.from_address do %> + <%= link( + @transaction.from_address, + class: "transaction__link", + to: address_path(@conn, :show, @conn.assigns.locale, @transaction.from_address) + ) %> + <% else %> + <%= gettext "Pending" %> + <% end %> +
+ <%= gettext "To" %> + + <%= if @transaction.to_address do %> + <%= link( + @transaction.to_address, + class: "transaction__link", + to: address_path(@conn, :show, @conn.assigns.locale, @transaction.to_address) + ) %> + <% else %> + <%= gettext "Pending" %> + <% end %> +
+ <%= gettext "Nonce" %> + + <%= @transaction.nonce %> +
+
+
+ + + + + <% first_seen = first_seen(@transaction) %> + + + + + <% last_seen = last_seen(@transaction) %> + + + + + + + + + + + + + + + + + + + + + + + +
+ <%= gettext "First Seen" %> + + <%= first_seen %> +
+ <%= gettext "Last Seen" %> + + <%= last_seen %> +
+ <%= gettext "Gas Limit" %> + + <%= format_gas_limit(@transaction.gas) %> <%= gettext("Gas") %> +
+ <%= gettext "Gas Price" %> + + <%= gas_price(@transaction, :wei) %> + (<%= gas_price(@transaction, :gwei) %>) +
+ <%= gettext "TX Fee" %> + +
<%= formatted_fee(@transaction, denomination: :ether) %>
+
<%= formatted_fee(@transaction, exchange_rate: @exchange_rate) %>
+
+ <%= gettext "Total Gas Used" %> + + <%= cumulative_gas_used(@transaction) %> <%= gettext("Wei") %> +
+ <%= gettext "Input" %> + + <%= @transaction.input %> +
+
+
-
+ diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/index.html.eex index 5bebf2bacc..cb88d4a961 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/index.html.eex @@ -1,6 +1,8 @@ -
+
+ <%= render ExplorerWeb.TransactionView, "overview.html", assigns %> -
+ +
-
-
-
- <%= if length(@internal_transactions.entries) > 0 do %> - - - - - - - - - <%= for transaction <- @internal_transactions do %> - - - - - - - - - - <% end %> -
<%= gettext "Type" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>)<%= gettext "Gas Limit" %> (<%= gettext "Gas" %>)
<%= transaction.call_type %> - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> - - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> - <%= value(transaction, include_label: false) %><%= gas(transaction) %>
- <% else %> -

<%= gettext "There are no Internal Transactions" %>

- <% end %> +
+
+ <%= if length(@internal_transactions.entries) > 0 do %> + + + + + + + + + <%= for transaction <- @internal_transactions do %> + + + + + + + + + + <% end %> +
<%= gettext "Type" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>)<%= gettext "Gas Limit" %> (<%= gettext "Gas" %>)
<%= transaction.call_type %> + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> + + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> + <%= value(transaction, include_label: false) %><%= gas(transaction) %>
+ <% else %> +

<%= gettext "There are no Internal Transactions" %>

+ <% end %> +
-
+
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction_log/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction_log/index.html.eex index 8b54886823..ca55512b09 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction_log/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction_log/index.html.eex @@ -1,6 +1,8 @@ -
+
+ <%= render ExplorerWeb.TransactionView, "overview.html", assigns %> -
+ +
-
-
-
- <%= if length(@logs.entries) > 0 do %> - - - - - - <%= for log <- @logs.entries do %> - - - - - - <% unless is_nil(log.second_topic) do %> - - - +
+
+ <%= if length(@logs.entries) > 0 do %> +
<%= gettext "Address" %><%= gettext "Topic" %>
- <%= link( - log.address, - to: address_path(@conn, :show, @conn.assigns.locale, log.address), - "data-test": "log_address_link", - "data-address-hash": log.address - ) %> - <%= log.first_topic %>
topic[1]<%= log.second_topic %>
+ + + + + <%= for log <- @logs.entries do %> + + + + - <% end %> - <% unless is_nil(log.third_topic) do %> - - - - - <% end %> - <% unless is_nil(log.data) do %> - - - - - <% end %> - - <% end %> -
<%= gettext "Address" %><%= gettext "Topic" %>
+ <%= link( + log.address, + to: address_path(@conn, :show, @conn.assigns.locale, log.address), + "data-test": "log_address_link", + "data-address-hash": log.address + ) %> + <%= log.first_topic %>
topic[2]<%= log.third_topic %>
<%= log.data %>
- <% else %> -

<%= gettext "There are no logs currently." %>

- <% end %> + <% unless is_nil(log.second_topic) do %> + + topic[1] + <%= log.second_topic %> + + <% end %> + <% unless is_nil(log.third_topic) do %> + + topic[2] + <%= log.third_topic %> + + <% end %> + <% unless is_nil(log.data) do %> + + ↠ + <%= log.data %> + + <% end %> + + <% end %> + + <% else %> +

<%= gettext "There are no logs currently." %>

+ <% end %> +
-
+ From 9345b8b8a0cb58b7cb154f3ff9df3de56b73bbbe Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 15:33:22 -0400 Subject: [PATCH 07/14] Apply Bootstrap cards to the Block Details page --- .../block_transaction/index.html.eex | 350 +++++++++--------- 1 file changed, 178 insertions(+), 172 deletions(-) diff --git a/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex index 5ffa4b3fb4..59d8687bb5 100644 --- a/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex @@ -1,117 +1,121 @@ -
-
+
+

<%= gettext("Block Details") %>

-

<%= @block.number %>

-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
- <%= gettext "Timestamp" %> - - <%= age(@block) %> (<%= formatted_timestamp(@block) %>) -
- <%= gettext "Transaction" %> - - <%= gettext "%{count} transactions in this block", count: @block_transaction_count %> -
- <%= gettext "Hash" %> - - <%= @block.hash %> -
- <%= gettext "Parent Hash" %> - - <%= link( - @block.parent_hash, - class: "block__link", - to: block_path(@conn, :show, @conn.assigns.locale, @block.number - 1) - ) %> -
- <%= gettext "Miner" %> - - <%= @block.miner %> -
- <%= gettext "Difficulty" %> - - <%= @block.difficulty |> Cldr.Number.to_string! %> -
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
- <%= gettext "Total Difficulty" %> - - <%= @block.total_difficulty |> Cldr.Number.to_string! %> -
- <%= gettext "Size" %> - - <%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %> -
- <%= gettext "Gas Used" %> - - <%= @block.gas_used |> Cldr.Number.to_string! %> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>) -
- <%= gettext "Gas Limit" %> - - <%= @block.gas_limit |> Cldr.Number.to_string! %> -
- <%= gettext "Nonce" %> - - <%= @block.nonce %> -
+

<%= @block.number %>

+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ <%= gettext "Timestamp" %> + + <%= age(@block) %> (<%= formatted_timestamp(@block) %>) +
+ <%= gettext "Transaction" %> + + <%= gettext "%{count} transactions in this block", count: @block_transaction_count %> +
+ <%= gettext "Hash" %> + + <%= @block.hash %> +
+ <%= gettext "Parent Hash" %> + + <%= link( + @block.parent_hash, + class: "block__link", + to: block_path(@conn, :show, @conn.assigns.locale, @block.number - 1) + ) %> +
+ <%= gettext "Miner" %> + + <%= @block.miner %> +
+ <%= gettext "Difficulty" %> + + <%= @block.difficulty |> Cldr.Number.to_string! %> +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ <%= gettext "Total Difficulty" %> + + <%= @block.total_difficulty |> Cldr.Number.to_string! %> +
+ <%= gettext "Size" %> + + <%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %> +
+ <%= gettext "Gas Used" %> + + <%= @block.gas_used |> Cldr.Number.to_string! %> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>) +
+ <%= gettext "Gas Limit" %> + + <%= @block.gas_limit |> Cldr.Number.to_string! %> +
+ <%= gettext "Nonce" %> + + <%= @block.nonce %> +
+
+
-
-
+
+ +
-
-
-
- - - - - - - - - - - - - - - <%= for transaction <- @page.entries do %> + +
+
+
- <%= gettext "Status" %> - <%= gettext "Hash" %><%= gettext "Block" %><%= gettext "Age" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %>
+ - - - - - - - - + + + + + + + + - <% end %> - -
-
-
- <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %> - - <%= link( - transaction.block, - to: block_path(@conn, :show, @conn.assigns.locale, transaction.block) - ) %> - - <%= transaction.block.timestamp |> Timex.from_now %> - - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> - - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> - - <%= ExplorerWeb.TransactionView.value(transaction) %> - + <%= gettext "Status" %> + <%= gettext "Hash" %><%= gettext "Block" %><%= gettext "Age" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %>
+ + + <%= for transaction <- @page.entries do %> + + +
+ + + <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %> + + + <%= link( + transaction.block, + to: block_path(@conn, :show, @conn.assigns.locale, transaction.block) + ) %> + + + <%= transaction.block.timestamp |> Timex.from_now %> + + + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> + + + + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> + + + <%= ExplorerWeb.TransactionView.value(transaction) %> + + + <% end %> + + +
-
-
- <%= pagination_links( - @conn, - @page, - ["en", @conn.params["block_id"]], - distance: 1, - first: true, - next: Phoenix.HTML.raw("›"), - path: &block_transaction_path/5, - previous: Phoenix.HTML.raw("‹"), - view_style: :bulma - ) %>
+ +
+ <%= pagination_links( + @conn, + @page, + ["en", @conn.params["block_id"]], + distance: 1, + first: true, + next: Phoenix.HTML.raw("›"), + path: &block_transaction_path/5, + previous: Phoenix.HTML.raw("‹"), + view_style: :bulma + ) %>
+ From ac5f2f381e1f64ae2dc93aabe6f68638d1688947 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 15:57:33 -0400 Subject: [PATCH 08/14] Apply Bootstrap grid and cards to the Address pages --- .../templates/address/overview.html.eex | 53 +++-- .../index.html.eex | 190 +++++++++--------- .../address_transaction/index.html.eex | 92 +++++---- 3 files changed, 180 insertions(+), 155 deletions(-) diff --git a/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex b/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex index 78a4945e9a..b1bf050aaa 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex @@ -1,23 +1,34 @@ -
-

<%= gettext "Address" %>

-

<%= @address %>

-
-
-
-
-
-
<%= gettext "Balance" %>
-
-
<%= balance(@address) %>
-
<%= formatted_usd(@address, @exchange_rate) %>
-
+
+

<%= gettext "Address" %>

+

<%= @address %>

+ +
+
+
+
+ + + + + + + + + + + +
+ <%= gettext "Balance" %> + + <%= balance(@address) %>
+ <%= formatted_usd(@address, @exchange_rate) %> +
+ <%= gettext "Number of Transactions" %> + + <%= Cldr.Number.to_string!(@transaction_count) %> +
+
-
-
<%= gettext "Number of Transactions" %>
-
- <%= Cldr.Number.to_string!(@transaction_count) %> -
-
-
+
-
+ diff --git a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex index ce1fb1a8f5..8de8e9ad10 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex @@ -1,6 +1,8 @@ -
+
+ <%= render ExplorerWeb.AddressView, "overview.html", assigns %> -
+ +
-
-
-
diff --git a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex index 601dad730b..a4d6810280 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex @@ -1,6 +1,8 @@ -
+
+ <%= render ExplorerWeb.AddressView, "overview.html", assigns %> -
+ +
-
-
-
+ + +
+
+ -
-
+ @@ -104,6 +111,7 @@
+
<%= pagination_links( @conn, From 7420d1fa2619efaaeb5405844df6cd40f451dc72 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 16:22:03 -0400 Subject: [PATCH 09/14] Apply Bootstrap card navigation to all pages --- .../index.html.eex | 37 +-- .../address_transaction/index.html.eex | 232 +++++++++--------- .../block_transaction/index.html.eex | 21 +- .../pending_transaction/index.html.eex | 123 +++++----- .../templates/transaction/index.html.eex | 39 +-- .../index.html.eex | 36 +-- .../templates/transaction_log/index.html.eex | 34 +-- 7 files changed, 263 insertions(+), 259 deletions(-) diff --git a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex index 8de8e9ad10..6af7a30f01 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex @@ -3,25 +3,26 @@ <%= render ExplorerWeb.AddressView, "overview.html", assigns %>
- -
+
+ +
<%= if length(@page.entries) > 0 do %> diff --git a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex index a4d6810280..30ccbe5e03 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex @@ -3,127 +3,125 @@ <%= render ExplorerWeb.AddressView, "overview.html", assigns %>
- - - -
- - -
-
- -
- <%= pagination_links( - @conn, - @page, - ["en", @conn.params["address_id"]], - distance: 1, - filter: @conn.params["filter"], - first: true, - next: Phoenix.HTML.raw("›"), - path: &address_transaction_path/5, - previous: Phoenix.HTML.raw("‹"), - view_style: :bulma - ) %> -
+
+ <%= pagination_links( + @conn, + @page, + ["en", @conn.params["address_id"]], + distance: 1, + filter: @conn.params["filter"], + first: true, + next: Phoenix.HTML.raw("›"), + path: &address_transaction_path/5, + previous: Phoenix.HTML.raw("‹"), + view_style: :bulma + ) %> +
+
diff --git a/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex index 59d8687bb5..6a8d7368f2 100644 --- a/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex @@ -116,17 +116,18 @@
- -
+
+ +
diff --git a/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex index da55445f2c..e3ef865c36 100644 --- a/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex @@ -1,14 +1,14 @@
-
-

- Transactions -

-

- <%= gettext("Showing %{count} Pending Transactions", count: @transaction_count) %> -

-
-
-
- +
+
+ + + + + + + + + + + + <%= for transaction <- @transactions do %> - - - - - - + + + + + + - - - <%= for transaction <- @transactions do %> - - - - - - - - - <% end %> - -
+ <%= gettext "Status" %> + <%= gettext "Hash" %><%= gettext "Last Seen" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>)
- <%= gettext "Status" %> - <%= gettext "Hash" %><%= gettext "Last Seen" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>) +
+
+ <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %> + <%= last_seen(transaction) %> + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> + + <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> + + <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> +
-
-
- <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %> - <%= last_seen(transaction) %> - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %> - - <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %> - - <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> -
-
+ <% end %> + +
- <%= if @last_seen_pending_inserted_at do %> - <%= link( - gettext("Next Page"), - class: "button button--secondary button--sm u-float-right mt-3", - to: pending_transaction_path( - @conn, - :index, - @conn.assigns.locale, - %{ - "last_seen_inserted_at" => - Timex.format!(@last_seen_pending_inserted_at, "{ISO:Extended:Z}") - } - ) - ) %> - <% end %> +
+ <%= if @last_seen_pending_inserted_at do %> + <%= link( + gettext("Next Page"), + class: "button button--secondary button--sm u-float-right mt-3", + to: pending_transaction_path( + @conn, + :index, + @conn.assigns.locale, + %{ + "last_seen_inserted_at" => + Timex.format!(@last_seen_pending_inserted_at, "{ISO:Extended:Z}") + } + ) + ) %> + <% end %> diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex index 93ad02d1c6..e512042e3d 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex @@ -5,26 +5,27 @@

<%= gettext("Showing %{count} Validated Transactions", count: @transaction_count) %>

-
- -
+
+
+ +
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/index.html.eex index cb88d4a961..234cb9cd6c 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/index.html.eex @@ -3,24 +3,26 @@ <%= render ExplorerWeb.TransactionView, "overview.html", assigns %>
-
+
+ +
<%= if length(@internal_transactions.entries) > 0 do %>
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction_log/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction_log/index.html.eex index ca55512b09..97b0eabfc4 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction_log/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction_log/index.html.eex @@ -3,23 +3,25 @@ <%= render ExplorerWeb.TransactionView, "overview.html", assigns %>
-
+
+ +
<%= if length(@logs.entries) > 0 do %>
From 9b64b060268ca9c4cc420b56a5c9b6b8d379cf88 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 23 May 2018 16:39:39 -0400 Subject: [PATCH 10/14] Apply a Bootstrap nav component to the top nav bar --- .../templates/layout/_topnav.html.eex | 55 +++++++++---------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex index 60eaee211e..1a4cfabe28 100644 --- a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex @@ -1,37 +1,36 @@
-
From a5e92f489d99d19ef3942b338a8a3d60ab718cca Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Thu, 24 May 2018 10:00:07 -0400 Subject: [PATCH 11/14] Add the navigation role to the mobile slide out menu --- .../lib/explorer_web/templates/layout/_sidebar.html.eex | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_sidebar.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_sidebar.html.eex index 56c367dc06..e8f0f6164f 100644 --- a/apps/explorer_web/lib/explorer_web/templates/layout/_sidebar.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/layout/_sidebar.html.eex @@ -5,7 +5,7 @@ " /> <% end %> -
<%= gettext "Balance" %> + <%= balance(@address) %>
<%= formatted_usd(@address, @exchange_rate) %>