Refactor transaction element to fit on mobile sized screens

apps/explorer_web/lib/explorer_web/templates/address/_responsive_hash.html.eex

@@ -1,4 +1,4 @@
 <span class="<%= if @contract do %>contract-address<% end %>">
   <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>

apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex

@@ -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="row">
-    <div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center  tile-label">
+  <div class="row justify-content-end">
+    <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") %>
     </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 %>
       <span>
         <%= if @address.hash == @internal_transaction.from_address_hash do %>
@@ -24,7 +24,7 @@
         <span class="badge badge-success tile-badge"><%= gettext "IN" %></span>
       <% end %>
     </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">
         <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %>
       </span>

apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex

@@ -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="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 class="row justify-content-end">
+    <div class="col-md-3 col-lg-2 d-flex align-items-lg-center">
+      <div class="d-flex flex-md-column ml-md-4">
+        <span class="tile-label mr-1 mr-md-0">
+          <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
+        </span>
+        <span class="tile-status-label" data-test="transaction_status">
+          <%= ExplorerWeb.TransactionView.formatted_status(@transaction) %>
+        </span>
       </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 %>
       <span>
         <%= if @address.hash == @transaction.from_address_hash do %>
@@ -40,11 +42,11 @@
         </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">
+    <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 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>

apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex

@@ -1,6 +1,8 @@
 <section class="container">
   <div class="card">
     <div class="card-header">
+
+      <!-- DESKTOP TAB NAV -->
       <ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex">
         <li class="nav-item">
           <%= link(
@@ -18,6 +20,26 @@
               ) %>
         </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"><%= 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 class="card-body">
@@ -26,14 +48,14 @@
 
       <%= 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="row" 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="ml-4">
-                <span 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 class="row justify-content-end" data-test="chain_transaction">
+            <div class="col-md-3 col-lg-2 d-flex align-items-lg-center">
+              <div class="d-flex flex-md-column ml-md-4">
+                <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"><%= ExplorerWeb.TransactionView.formatted_status(transaction) %></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 %>
               <span>
                 <%= 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") %>
                 <% end %>
               </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>

apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex

@@ -1,6 +1,8 @@
 <section class="container">
   <div class="card">
     <div class="card-header">
+
+      <!-- DESKTOP TAB NAV -->
       <ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex">
         <li class="nav-item">
           <%= link(
@@ -18,6 +20,26 @@
               ) %>
         </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"><%= 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 class="card-body">
@@ -26,14 +48,14 @@
 
       <%= 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="row" 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="ml-4">
-                <span class="tile-label" data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %></span>
+          <div class="row justify-content-end" data-test="chain_transaction">
+            <div class="col-md-3 col-lg-2 d-flex align-items-lg-center">
+              <div class="d-flex flex-md-column ml-md-4">
+                <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>
             </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 %>
               <span>
                 <%= 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>
             </div>
-            <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start text-md-right">
-              <span class="tile-title"><%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= gettext "Ether" %></span>
+            <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>

apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/_internal_transaction.html.eex

@@ -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="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") %>
     </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 %>
       <span>
         <%= 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 %>
       </span>
     </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">
         <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %>
       </span>