From 9345b8b8a0cb58b7cb154f3ff9df3de56b73bbbe Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Wed, 23 May 2018 15:33:22 -0400
Subject: [PATCH] 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 @@
-<section class="container__section">
-  <div>
+<section class="container-fluid">
+  <section>
     <h1><%= gettext("Block Details") %></h1>
-    <h2 data-test="block_detail_number"><%= @block.number %></h2>
-  </div>
-  <div class="panels container__subsection">
-    <div class="panels__container row">
-      <div class="col-lg-6">
-        <table class="table table-font table-responsive-sm table-horizontal">
-          <tbody>
-            <tr>
-              <th scope="row">
-                <%= gettext "Timestamp" %>
-              </th>
-              <td>
-                <%= age(@block) %> (<%= formatted_timestamp(@block) %>)
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">
-                <%= gettext "Transaction" %>
-              </th>
-              <td>
-                <%= gettext "%{count} transactions in this block", count: @block_transaction_count %>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">
-                <%= gettext "Hash" %>
-              </th>
-              <td title="<%= @block.hash %>">
-                <%= @block.hash %>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">
-                <%= gettext "Parent Hash" %>
-              </th>
-              <td title="<%= @block.parent_hash %>">
-                <%= link(
-                      @block.parent_hash,
-                      class: "block__link",
-                      to: block_path(@conn, :show, @conn.assigns.locale, @block.number - 1)
-                    ) %>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">
-                <%= gettext "Miner" %>
-              </th>
-              <td title="<%= @block.miner %>">
-                <%= @block.miner %>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">
-                <%= gettext "Difficulty" %>
-              </th>
-              <td title="<%= @block.difficulty %>">
-              <%= @block.difficulty |> Cldr.Number.to_string! %>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="col-lg-6">
-        <table class="table table-font table-responsive-sm table-horizontal">
-          <tbody>
-            <tr>
-              <th scope="row">
-                <%= gettext "Total Difficulty" %>
-              </th>
-              <td title="<%= @block.total_difficulty %>">
-                <%= @block.total_difficulty |> Cldr.Number.to_string! %>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">
-                <%= gettext "Size" %>
-              </th>
-              <td>
-                <%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">
-                <%= gettext "Gas Used" %>
-              </th>
-              <td>
-                <%= @block.gas_used |> Cldr.Number.to_string! %> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>)
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">
-                <%= gettext "Gas Limit" %>
-              </th>
-              <td>
-                <%= @block.gas_limit |> Cldr.Number.to_string! %>
-              </td>
-            </tr>
-            <tr>
-              <th scope="Nonce">
-                <%= gettext "Nonce" %>
-              </th>
-              <td>
-                <%= @block.nonce %>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+    <p data-test="block_detail_number"><%= @block.number %></p>
+
+    <div class="card mb-3">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-lg-6">
+            <table class="table table-font table-responsive-sm table-horizontal">
+              <tbody>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Timestamp" %>
+                  </th>
+                  <td>
+                    <%= age(@block) %> (<%= formatted_timestamp(@block) %>)
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Transaction" %>
+                  </th>
+                  <td>
+                    <%= gettext "%{count} transactions in this block", count: @block_transaction_count %>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Hash" %>
+                  </th>
+                  <td title="<%= @block.hash %>">
+                    <%= @block.hash %>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Parent Hash" %>
+                  </th>
+                  <td title="<%= @block.parent_hash %>">
+                    <%= link(
+                          @block.parent_hash,
+                          class: "block__link",
+                          to: block_path(@conn, :show, @conn.assigns.locale, @block.number - 1)
+                        ) %>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Miner" %>
+                  </th>
+                  <td title="<%= @block.miner %>">
+                    <%= @block.miner %>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Difficulty" %>
+                  </th>
+                  <td title="<%= @block.difficulty %>">
+                  <%= @block.difficulty |> Cldr.Number.to_string! %>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col-lg-6">
+            <table class="table table-font table-responsive-sm table-horizontal">
+              <tbody>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Total Difficulty" %>
+                  </th>
+                  <td title="<%= @block.total_difficulty %>">
+                    <%= @block.total_difficulty |> Cldr.Number.to_string! %>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Size" %>
+                  </th>
+                  <td>
+                    <%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Gas Used" %>
+                  </th>
+                  <td>
+                    <%= @block.gas_used |> Cldr.Number.to_string! %> (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>)
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <%= gettext "Gas Limit" %>
+                  </th>
+                  <td>
+                    <%= @block.gas_limit |> Cldr.Number.to_string! %>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="Nonce">
+                    <%= gettext "Nonce" %>
+                  </th>
+                  <td>
+                    <%= @block.nonce %>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-  <div>
+  </section>
+
+  <section>
     <ul class="nav nav-tabs">
       <li class="nav-item">
         <%= link(
@@ -121,68 +125,70 @@
             ) %>
       </li>
     </ul>
-  </div>
-  <div class="panels container__subsection">
-    <div class="panels__container">
-      <table class="table table-responsive-sm table-font">
-        <thead>
-          <tr>
-            <th>
-              <%= gettext "Status" %>
-            </th>
-            <th><%= gettext "Hash" %></th>
-            <th><%= gettext "Block" %></th>
-            <th><%= gettext "Age" %></th>
-            <th><%= gettext "From" %></th>
-            <th></th>
-            <th><%= gettext "To" %></th>
-            <th><%= gettext "Value" %></th>
-          </tr>
-        </thead>
-        <tbody>
-          <%= for transaction <- @page.entries do %>
+
+    <div class="card mb-3">
+      <div class="card-body">
+        <table class="table table-responsive-sm table-font">
+          <thead>
             <tr>
-              <td>
-                <div class="transaction__dot transaction__dot--<%= status(transaction) %>"></div>
-              </td>
-              <td>
-                <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %>
-              </td>
-              <td>
-                <%= link(
-                      transaction.block,
-                      to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-                    ) %>
-              </td>
-              <td>
-                <%= transaction.block.timestamp |> Timex.from_now %>
-              </td>
-              <td class="address-cell">
-                <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %>
-              </td>
-              <td class="u-text-center"><i class="fas fa-arrow-circle-right"></i></td>
-              <td>
-                  <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %>
-              </td>
-              <td>
-                <%= ExplorerWeb.TransactionView.value(transaction) %>
-              </td>
+              <th>
+                <%= gettext "Status" %>
+              </th>
+              <th><%= gettext "Hash" %></th>
+              <th><%= gettext "Block" %></th>
+              <th><%= gettext "Age" %></th>
+              <th><%= gettext "From" %></th>
+              <th></th>
+              <th><%= gettext "To" %></th>
+              <th><%= gettext "Value" %></th>
             </tr>
-          <% end %>
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            <%= for transaction <- @page.entries do %>
+              <tr>
+                <td>
+                  <div class="transaction__dot transaction__dot--<%= status(transaction) %>"></div>
+                </td>
+                <td>
+                  <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: transaction %>
+                </td>
+                <td>
+                  <%= link(
+                        transaction.block,
+                        to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
+                      ) %>
+                </td>
+                <td>
+                  <%= transaction.block.timestamp |> Timex.from_now %>
+                </td>
+                <td class="address-cell">
+                  <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.from_address %>
+                </td>
+                <td class="u-text-center"><i class="fas fa-arrow-circle-right"></i></td>
+                <td>
+                    <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: transaction.to_address %>
+                </td>
+                <td>
+                  <%= ExplorerWeb.TransactionView.value(transaction) %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
     </div>
-  </div>
-  <div class="blocks__pagination">
-    <%= pagination_links(
-          @conn,
-          @page,
-          ["en", @conn.params["block_id"]],
-          distance: 1,
-          first: true,
-          next: Phoenix.HTML.raw("&rsaquo;"),
-          path: &block_transaction_path/5,
-          previous: Phoenix.HTML.raw("&lsaquo;"),
-          view_style: :bulma
-        ) %></div>
+
+    <div class="blocks__pagination">
+      <%= pagination_links(
+            @conn,
+            @page,
+            ["en", @conn.params["block_id"]],
+            distance: 1,
+            first: true,
+            next: Phoenix.HTML.raw("&rsaquo;"),
+            path: &block_transaction_path/5,
+            previous: Phoenix.HTML.raw("&lsaquo;"),
+            view_style: :bulma
+          ) %></div>
+  </section>
 </section>