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

Refactor transaction element to fit on mobile sized screens

Browse Source
pull/451/head
Ryan Arthur 6 years ago committed by jimmay5469
parent 459ce29cb3
commit 7190c38f74
6 changed files with 82 additions and 33 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. 2
      apps/explorer_web/lib/explorer_web/templates/address/_responsive_hash.html.eex
  2. 8
      apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex
  3. 24
      apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex
  4. 39
      apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex
  5. 36
      apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex
  6. 6
      apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/_internal_transaction.html.eex

2
apps/explorer_web/lib/explorer_web/templates/address/_responsive_hash.html.eex
Unescape View File

@ -1,4 +1,4 @@
<span class="<%= if @contract do %>contract-address<% end %>"> <span class="<%= if @contract do %>contract-address<% end %>">
<span class="d-none d-md-none d-lg-inline"><%= @address_hash %></span> <span class="d-none d-md-none d-lg-inline"><%= @address_hash %></span>
<span class="d-md-block d-lg-none "><%= ExplorerWeb.AddressView.trimmed_hash(@address_hash) %></span> <span class="d-md-inline-block d-lg-none "><%= ExplorerWeb.AddressView.trimmed_hash(@address_hash) %></span>
</span> </span>

8
apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex
Unescape View File

@ -1,9 +1,9 @@
<div class="tile tile-type-internal-transaction fade-in" data-test="internal_transaction" data-internal-transaction-id="<%= @internal_transaction.id %>"> <div class="tile tile-type-internal-transaction fade-in" data-test="internal_transaction" data-internal-transaction-id="<%= @internal_transaction.id %>">
<div class="row"> <div class="row justify-content-end">
<div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center tile-label"> <div class="col-md-3 col-lg-2 d-flex align-items-center justify-content-start justify-content-lg-center tile-label">
<%= gettext("Internal Transaction") %> <%= gettext("Internal Transaction") %>
</div> </div>
<div class="col-md-7 col-lg-8 d-flex flex-column"> <div class="col-md-9 col-lg-7 d-flex flex-column text-nowrap">
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @internal_transaction.transaction_hash %> <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @internal_transaction.transaction_hash %>
<span> <span>
<%= if @address.hash == @internal_transaction.from_address_hash do %> <%= if @address.hash == @internal_transaction.from_address_hash do %>
@ -24,7 +24,7 @@
<span class="badge badge-success tile-badge"><%= gettext "IN" %></span> <span class="badge badge-success tile-badge"><%= gettext "IN" %></span>
<% end %> <% end %>
</div> </div>
<div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start text-md-right"> <div class="col-md-9 col-lg-3 d-flex flex-row flex-md-column justify-content-start text-lg-right mt-3 mt-lg-0">
<span class="tile-title"> <span class="tile-title">
<%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %> <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %>
</span> </span>

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

@ -1,14 +1,16 @@
<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="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="row justify-content-end">
<div class="pl-5 col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center"> <div class="col-md-3 col-lg-2 d-flex align-items-lg-center">
<span class="tile-label"> <div class="d-flex flex-md-column ml-md-4">
<%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %> <span class="tile-label mr-1 mr-md-0">
</span> <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
<div class="tile-status-label" data-test="transaction_status"> </span>
<%= ExplorerWeb.TransactionView.formatted_status(@transaction) %> <span class="tile-status-label" data-test="transaction_status">
<%= ExplorerWeb.TransactionView.formatted_status(@transaction) %>
</span>
</div> </div>
</div> </div>
<div class="col-md-7 col-lg-8 d-flex flex-column"> <div class="col-md-9 col-lg-7 d-flex flex-column">
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %> <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %>
<span> <span>
<%= if @address.hash == @transaction.from_address_hash do %> <%= if @address.hash == @transaction.from_address_hash do %>
@ -40,11 +42,11 @@
</span> </span>
</span> </span>
</div> </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"> <div class="col-md-9 col-lg-3 d-flex flex-column flex-md-row flex-lg-column justify-content-start text-lg-right mt-3 mt-lg-0">
<span class="tile-title"> <span class="tile-title mr-1 mr-lg-0">
<%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %> <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %>
</span> </span>
<span class="mr-2 mr-sm-0 text-muted"> <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %></span> <span> <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
</div> </div>
</div> </div>
</div> </div>

39
apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex
Unescape View File

@ -1,6 +1,8 @@
<section class="container"> <section class="container">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<!-- DESKTOP TAB NAV -->
<ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex"> <ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex">
<li class="nav-item"> <li class="nav-item">
<%= link( <%= link(
@ -18,6 +20,26 @@
) %> ) %>
</li> </li>
</ul> </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"><%= gettext("Pending") %></a>
<div class="dropdown-menu">
<%= link(
gettext("Validated"),
class: "dropdown-item",
to: transaction_path(@conn, :index, @conn.assigns.locale)
) %>
<%= link(
gettext("Pending"),
class: "dropdown-item",
"data-test": "pending_transactions_link",
to: pending_transaction_path(@conn, :index, @conn.assigns.locale)
) %>
</div>
</li>
</ul>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -26,14 +48,14 @@
<%= for transaction <- @transactions do %> <%= for transaction <- @transactions do %>
<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-transaction-hash="<%= transaction.hash %>"> <div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-transaction-hash="<%= transaction.hash %>">
<div class="row" data-test="chain_transaction"> <div class="row justify-content-end" data-test="chain_transaction">
<div class="col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center tile-label"> <div class="col-md-3 col-lg-2 d-flex align-items-lg-center">
<div class="ml-4"> <div class="d-flex flex-md-column ml-md-4">
<span data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %></span> <span class="tile-label mr-1 mr-md-0" data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %></span>
<div data-test="transaction_status" class="text-muted"><%= ExplorerWeb.TransactionView.formatted_status(transaction) %></div> <div data-test="transaction_status"><%= ExplorerWeb.TransactionView.formatted_status(transaction) %></div>
</div> </div>
</div> </div>
<div class="col-md-7 col-lg-8 d-flex flex-column"> <div class="col-md-9 col-lg-7 d-flex flex-column">
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %> <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
<span> <span>
<%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), locale: @locale %> <%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), locale: @locale %>
@ -44,7 +66,10 @@
<%= gettext("Contract Address Pending") %> <%= gettext("Contract Address Pending") %>
<% end %> <% end %>
</span> </span>
<%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= gettext "Ether" %> </div>
<div class="col-md-9 col-lg-3 d-flex flex-column flex-md-row flex-lg-column justify-content-start text-lg-right mt-3 mt-lg-0">
<span class="tile-title mr-1 mr-lg-0"><%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= gettext "Ether" %></span>
<span> <%= ExplorerWeb.TransactionView.formatted_fee(transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
</div> </div>
</div> </div>
</div> </div>

36
apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex
Unescape View File

@ -1,6 +1,8 @@
<section class="container"> <section class="container">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<!-- DESKTOP TAB NAV -->
<ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex"> <ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex">
<li class="nav-item"> <li class="nav-item">
<%= link( <%= link(
@ -18,6 +20,26 @@
) %> ) %>
</li> </li>
</ul> </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"><%= gettext("Validated") %></a>
<div class="dropdown-menu">
<%= link(
gettext("Validated"),
class: "dropdown-item",
to: transaction_path(@conn, :index, @conn.assigns.locale)
) %>
<%= link(
gettext("Pending"),
class: "dropdown-item",
"data-test": "pending_transactions_link",
to: pending_transaction_path(@conn, :index, @conn.assigns.locale)
) %>
</div>
</li>
</ul>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -26,14 +48,14 @@
<%= for transaction <- @transactions do %> <%= for transaction <- @transactions do %>
<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(transaction) %> tile-status--<%= ExplorerWeb.TransactionView.status(transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-transaction-hash="<%= transaction.hash %>"> <div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(transaction) %> tile-status--<%= ExplorerWeb.TransactionView.status(transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-transaction-hash="<%= transaction.hash %>">
<div class="row" data-test="chain_transaction"> <div class="row justify-content-end" data-test="chain_transaction">
<div class="col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center"> <div class="col-md-3 col-lg-2 d-flex align-items-lg-center">
<div class="ml-4"> <div class="d-flex flex-md-column ml-md-4">
<span class="tile-label" data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %></span> <span class="tile-label mr-1 mr-md-0" data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %></span>
<div class="tile-status-label" data-test="transaction_status"><%= ExplorerWeb.TransactionView.formatted_status(transaction) %></div> <div class="tile-status-label" data-test="transaction_status"><%= ExplorerWeb.TransactionView.formatted_status(transaction) %></div>
</div> </div>
</div> </div>
<div class="col-md-7 col-lg-8 d-flex flex-column"> <div class="col-md-9 col-lg-7 d-flex flex-column">
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %> <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
<span> <span>
<%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), locale: @locale %> <%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), locale: @locale %>
@ -50,8 +72,8 @@
</span> </span>
</span> </span>
</div> </div>
<div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start text-md-right"> <div class="col-md-9 col-lg-3 d-flex flex-column flex-md-row flex-lg-column justify-content-start text-lg-right mt-3 mt-lg-0">
<span class="tile-title"><%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= gettext "Ether" %></span> <span class="tile-title mr-1 mr-lg-0"><%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= gettext "Ether" %></span>
<span> <%= ExplorerWeb.TransactionView.formatted_fee(transaction, denomination: :ether) %> <%= gettext "Fee" %></span> <span> <%= ExplorerWeb.TransactionView.formatted_fee(transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
</div> </div>
</div> </div>

6
apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/_internal_transaction.html.eex
Unescape View File

@ -1,9 +1,9 @@
<div class="tile tile-type-internal-transaction fade-in" data-test="internal_transaction" data-internal-transaction-id="<%= @internal_transaction.id %>"> <div class="tile tile-type-internal-transaction fade-in" data-test="internal_transaction" data-internal-transaction-id="<%= @internal_transaction.id %>">
<div class="row justify-content-end"> <div class="row justify-content-end">
<div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center tile-label"> <div class="col-md-3 col-lg-2 d-flex align-items-center justify-content-start justify-content-lg-center tile-label">
<%= gettext("Internal Transaction") %> <%= gettext("Internal Transaction") %>
</div> </div>
<div class="col-md-10 col-lg-7 d-flex flex-column text-nowrap"> <div class="col-md-9 col-lg-7 d-flex flex-column text-nowrap">
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @internal_transaction.transaction_hash %> <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @internal_transaction.transaction_hash %>
<span> <span>
<%= render ExplorerWeb.AddressView, "_link.html", address_hash: @internal_transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@internal_transaction.from_address), locale: @locale %> <%= render ExplorerWeb.AddressView, "_link.html", address_hash: @internal_transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@internal_transaction.from_address), locale: @locale %>
@ -11,7 +11,7 @@
<%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction), contract: ExplorerWeb.AddressView.contract?(@internal_transaction.to_address), locale: @locale %> <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction), contract: ExplorerWeb.AddressView.contract?(@internal_transaction.to_address), locale: @locale %>
</span> </span>
</div> </div>
<div class="col-md-10 col-lg-3 d-flex flex-row flex-md-column justify-content-start text-lg-right"> <div class="col-md-9 col-lg-3 d-flex flex-row flex-md-column justify-content-start text-lg-right mt-3 mt-lg-0">
<span class="tile-title"> <span class="tile-title">
<%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %> <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %>
</span> </span>

Write Preview
Loading…
Cancel
Save