From e8657dfdea51baf4adb2ba44b5d67bb5e169cadd Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Wed, 23 May 2018 15:26:43 -0400
Subject: [PATCH] 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 @@
-<h1><%= gettext "Transaction Details" %></h1>
-<p data-test="transaction_detail_hash"><%= @transaction %></p>
-<div class="panels container__subsection">
-  <div class="panels__container row">
-    <div class="col-md-6">
-      <table class="table table-font table-responsive-sm table-horizontal">
-        <tbody>
-          <tr>
-            <th scope="row">
-              <%= gettext "Transaction Status" %>
-            </th>
-            <td>
-              <%= formatted_status(@transaction) %>
-              <div class="transaction__dot transaction__dot--<%= status(@transaction) %>"></div>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "Block Number" %>
-            </th>
-            <td>
-              <% 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) %>)
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "Age" %>
-            </th>
-            <td title="<%= formatted_timestamp(@transaction) %>">
-              <%= formatted_age(@transaction) %>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "Value" %>
-            </th>
-            <td>
-              <div><%= value(@transaction) %> </div>
-              <div><%= formatted_usd_value(@transaction, @exchange_rate) %></div>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "From" %>
-            </th>
-            <td>
-              <%= 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 %>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "To" %>
-            </th>
-            <td>
-              <%= 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 %>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "Nonce" %>
-            </th>
-            <td>
-              <%= @transaction.nonce %>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="col-md-6">
-      <table class="table table-font table-responsive-sm table-horizontal">
-        <tbody>
-          <tr>
-            <th scope="row">
-              <%= gettext "First Seen" %>
-            </th>
-            <% first_seen = first_seen(@transaction) %>
-            <td title="<%= first_seen %>">
-              <%= first_seen %>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "Last Seen" %>
-            </th>
-            <% last_seen = last_seen(@transaction) %>
-            <td title="<%= last_seen %>">
-              <%= last_seen %>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "Gas Limit" %>
-            </th>
-            <td title="<%= last_seen %>">
-              <%= format_gas_limit(@transaction.gas) %> <%= gettext("Gas") %>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "Gas Price" %>
-            </th>
-            <td title="<%= last_seen %>">
-              <%= gas_price(@transaction, :wei) %>
-              (<%= gas_price(@transaction, :gwei) %>)
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "TX Fee" %>
-            </th>
-            <td>
-              <div><%= formatted_fee(@transaction, denomination: :ether) %></div>
-              <div><%= formatted_fee(@transaction, exchange_rate: @exchange_rate) %></div>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "Total Gas Used" %>
-            </th>
-            <td title="<%= last_seen %>">
-              <%= cumulative_gas_used(@transaction) %> <%= gettext("Wei") %>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">
-              <%= gettext "Input" %>
-            </th>
-            <td title="<%= @transaction.input %>">
-              <%= @transaction.input %>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+<section>
+  <h1><%= gettext "Transaction Details" %></h1>
+  <p data-test="transaction_detail_hash"><%= @transaction %></p>
+
+  <div class="card mb-3">
+    <div class="card-body">
+      <div class="row">
+        <div class="col-md-6">
+          <table class="table table-font table-responsive-sm table-horizontal">
+            <tbody>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Transaction Status" %>
+                </th>
+                <td>
+                  <%= formatted_status(@transaction) %>
+                  <div class="transaction__dot transaction__dot--<%= status(@transaction) %>"></div>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Block Number" %>
+                </th>
+                <td>
+                  <% 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) %>)
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Age" %>
+                </th>
+                <td title="<%= formatted_timestamp(@transaction) %>">
+                  <%= formatted_age(@transaction) %>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Value" %>
+                </th>
+                <td>
+                  <div><%= value(@transaction) %> </div>
+                  <div><%= formatted_usd_value(@transaction, @exchange_rate) %></div>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "From" %>
+                </th>
+                <td>
+                  <%= 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 %>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "To" %>
+                </th>
+                <td>
+                  <%= 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 %>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Nonce" %>
+                </th>
+                <td>
+                  <%= @transaction.nonce %>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-md-6">
+          <table class="table table-font table-responsive-sm table-horizontal">
+            <tbody>
+              <tr>
+                <th scope="row">
+                  <%= gettext "First Seen" %>
+                </th>
+                <% first_seen = first_seen(@transaction) %>
+                <td title="<%= first_seen %>">
+                  <%= first_seen %>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Last Seen" %>
+                </th>
+                <% last_seen = last_seen(@transaction) %>
+                <td title="<%= last_seen %>">
+                  <%= last_seen %>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Gas Limit" %>
+                </th>
+                <td title="<%= last_seen %>">
+                  <%= format_gas_limit(@transaction.gas) %> <%= gettext("Gas") %>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Gas Price" %>
+                </th>
+                <td title="<%= last_seen %>">
+                  <%= gas_price(@transaction, :wei) %>
+                  (<%= gas_price(@transaction, :gwei) %>)
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "TX Fee" %>
+                </th>
+                <td>
+                  <div><%= formatted_fee(@transaction, denomination: :ether) %></div>
+                  <div><%= formatted_fee(@transaction, exchange_rate: @exchange_rate) %></div>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Total Gas Used" %>
+                </th>
+                <td title="<%= last_seen %>">
+                  <%= cumulative_gas_used(@transaction) %> <%= gettext("Wei") %>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Input" %>
+                </th>
+                <td title="<%= @transaction.input %>">
+                  <%= @transaction.input %>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
-</div>
+</section>
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 @@
-<section class="container__section">
+<section class="container-fluid">
+
   <%= render ExplorerWeb.TransactionView, "overview.html", assigns %>
-  <div>
+
+  <section>
     <ul class="nav nav-tabs">
       <li class="nav-item">
         <%= link(
@@ -18,37 +20,37 @@
             ) %>
       </li>
     </ul>
-  </div>
-  <div class="panels container__subsection">
-    <div class="panels__container">
-      <%= if length(@internal_transactions.entries) > 0 do %>
-        <table class="table table-responsive-sm table-font">
-          <thead>
-            <th><%= gettext "Type" %></th>
-            <th><%= gettext "From" %></th>
-            <th><%= gettext "To" %></th>
-            <th><%= gettext "Value" %> (<%= gettext "Ether" %>)</th>
-            <th><%= gettext "Gas Limit" %> (<%= gettext "Gas" %>)</th>
-          </thead>
-          <%= for transaction <- @internal_transactions do %>
-            <tgroup>
-              <tr>
-                <td><%= transaction.call_type %></td>
-                <td>
-                  <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %>
-                </td>
-                <td>
-                  <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %>
-                </td>
-                <td><%= value(transaction, include_label: false) %></td>
-                <td><%= gas(transaction) %></td>
-              </tr>
-            </tgroup>
-          <% end %>
-        </table>
-      <% else %>
-        <p><%= gettext "There are no Internal Transactions" %></p>
-      <% end %>
+    <div class="card">
+      <div class="card-body">
+        <%= if length(@internal_transactions.entries) > 0 do %>
+          <table class="table table-responsive-sm table-font">
+            <thead>
+              <th><%= gettext "Type" %></th>
+              <th><%= gettext "From" %></th>
+              <th><%= gettext "To" %></th>
+              <th><%= gettext "Value" %> (<%= gettext "Ether" %>)</th>
+              <th><%= gettext "Gas Limit" %> (<%= gettext "Gas" %>)</th>
+            </thead>
+            <%= for transaction <- @internal_transactions do %>
+              <tgroup>
+                <tr>
+                  <td><%= transaction.call_type %></td>
+                  <td>
+                    <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %>
+                  </td>
+                  <td>
+                    <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %>
+                  </td>
+                  <td><%= value(transaction, include_label: false) %></td>
+                  <td><%= gas(transaction) %></td>
+                </tr>
+              </tgroup>
+            <% end %>
+          </table>
+        <% else %>
+          <p><%= gettext "There are no Internal Transactions" %></p>
+        <% end %>
+      </div>
     </div>
-  </div>
+  </section>
 </section>
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 @@
-<section class="container__section">
+<section class="container-fluid">
+
   <%= render ExplorerWeb.TransactionView, "overview.html", assigns %>
-  <div>
+
+  <section>
     <ul class="nav nav-tabs">
       <li class="nav-item">
         <%= link(
@@ -17,52 +19,52 @@
             ) %>
       </li>
     </ul>
-  </div>
-  <div class="panels container__subsection">
-    <div class="panels__container">
-      <%= if length(@logs.entries) > 0 do %>
-        <table class="table table-responsive-sm table-font">
-          <thead>
-            <th><%= gettext "Address" %></th>
-            <th><%= gettext "Topic" %></th>
-          </thead>
-          <%= for log <- @logs.entries do %>
-            <tgroup>
-              <tr data-test="transaction_log">
-                <td>
-                  <%= link(
-                        log.address,
-                        to: address_path(@conn, :show, @conn.assigns.locale, log.address),
-                        "data-test": "log_address_link",
-                        "data-address-hash": log.address
-                      ) %>
-                </td>
-                <td><%= log.first_topic %></td>
-              </tr>
-              <% unless is_nil(log.second_topic) do %>
-                <tr>
-                  <td>topic[1]</td>
-                  <td><%= log.second_topic %></td>
+    <div class="card">
+      <div class="card-body">
+        <%= if length(@logs.entries) > 0 do %>
+          <table class="table table-responsive-sm table-font">
+            <thead>
+              <th><%= gettext "Address" %></th>
+              <th><%= gettext "Topic" %></th>
+            </thead>
+            <%= for log <- @logs.entries do %>
+              <tgroup>
+                <tr data-test="transaction_log">
+                  <td>
+                    <%= link(
+                          log.address,
+                          to: address_path(@conn, :show, @conn.assigns.locale, log.address),
+                          "data-test": "log_address_link",
+                          "data-address-hash": log.address
+                        ) %>
+                  </td>
+                  <td><%= log.first_topic %></td>
                 </tr>
-              <% end %>
-              <% unless is_nil(log.third_topic) do %>
-                <tr>
-                  <td>topic[2]</td>
-                  <td><%= log.third_topic %></td>
-                </tr>
-              <% end %>
-              <% unless is_nil(log.data) do %>
-                <tr>
-                  <td>↠</td>
-                  <td><%= log.data %></td>
-                </tr>
-              <% end %>
-            </tgroup>
-          <% end %>
-        </table>
-      <% else %>
-      <p><%= gettext "There are no logs currently." %></p>
-      <% end %>
+                <% unless is_nil(log.second_topic) do %>
+                  <tr>
+                    <td>topic[1]</td>
+                    <td><%= log.second_topic %></td>
+                  </tr>
+                <% end %>
+                <% unless is_nil(log.third_topic) do %>
+                  <tr>
+                    <td>topic[2]</td>
+                    <td><%= log.third_topic %></td>
+                  </tr>
+                <% end %>
+                <% unless is_nil(log.data) do %>
+                  <tr>
+                    <td>↠</td>
+                    <td><%= log.data %></td>
+                  </tr>
+                <% end %>
+              </tgroup>
+            <% end %>
+          </table>
+        <% else %>
+        <p><%= gettext "There are no logs currently." %></p>
+        <% end %>
+      </div>
     </div>
-  </div>
+  </section>
 </section>