Apply Bootstrap grid and cards to the Address pages

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

@@ -1,23 +1,34 @@
-<div class="address__header">
-  <h1 class="address__heading"><%= gettext "Address" %></h1>
-  <h3 class="address__subheading" data-test="address_detail_hash"><%= @address %></h3>
-</div>
-<div class="address__container">
-  <div class="address__attributes">
-    <dl>
-      <div class="address__item">
-        <dt class="address__item-key"><%= gettext "Balance" %></dt>
-        <dd class="address__item-value address__balance u-text-right" title="<%= @address %>" data-test="address_balance">
-          <div><%= balance(@address) %> </div>
-          <div><%= formatted_usd(@address, @exchange_rate) %> </div>
-        </dd>
+<section>
+  <h1><%= gettext "Address" %></h1>
+  <p data-test="address_detail_hash"><%= @address %></p>
+
+  <div class="card mb-3">
+    <div class="card-body">
+      <div class="row">
+        <div class="col-sm-6">
+          <table class="table table-font table-responsive-sm table-horizontal">
+            <tbody>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Balance" %>
+                </th>
+                <td>
+                  <%= balance(@address) %> </br>
+                  <%= formatted_usd(@address, @exchange_rate) %>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">
+                  <%= gettext "Number of Transactions" %>
+                </th>
+                <td data-test="transaction_count">
+                  <%= Cldr.Number.to_string!(@transaction_count) %>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
-      <div class="address__item">
-        <dt class="address__item-key"><%= gettext "Number of Transactions" %></dt>
-        <dd class="address__item-value" data-test="transaction_count">
-          <%= Cldr.Number.to_string!(@transaction_count) %>
-        </dd>
-      </div>
-    </dl>
+    </div>
   </div>
-</div>
+</section>

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

@@ -1,6 +1,8 @@
-<section class="container__section block">
+<section class="container-fluid">
+
   <%= render ExplorerWeb.AddressView, "overview.html", assigns %>
-  <div>
+
+  <section>
     <ul class="nav nav-tabs">
       <li class="nav-item">
         <%= link(
@@ -18,97 +20,101 @@
             ) %>
       </li>
     </ul>
-  </div>
-  <div class="panels container__subsection">
-    <div class="dropdown u-float-right u-push-sm">
-      <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
-        id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        Filter: <%= format_current_filter(@filter) %>
-      </button>
-      <div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
-        <%= link(
-          gettext("All"),
-          to: address_internal_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]),
-          class: "address__link address__link--active dropdown-item",
-          "data-test": "filter_option"
-        ) %>
-        <%= link(
-          gettext("To"),
-          to: address_internal_transaction_path(
-            @conn,
-            :index,
-            @conn.assigns.locale,
-            @conn.params["address_id"],
-            filter: "to"
-          ),
-          class: "address__link address__link--active dropdown-item",
-          "data-test": "filter_option"
-        ) %>
-        <%= link(
-          gettext("From"),
-          to: address_internal_transaction_path(
-            @conn,
-            :index,
-            @conn.assigns.locale,
-            @conn.params["address_id"],
-            filter: "from"
-          ),
-          class: "address__link address__link--active dropdown-item",
-          "data-test": "filter_option"
-        ) %>
+
+    <div class="card">
+      <div class="card-body">
+
+        <%= if length(@page.entries) > 0 do %>
+          <div class="dropdown u-float-right u-push-sm">
+            <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
+              id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Filter: <%= format_current_filter(@filter) %>
+            </button>
+            <div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
+              <%= link(
+                gettext("All"),
+                to: address_internal_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+              <%= link(
+                gettext("To"),
+                to: address_internal_transaction_path(
+                  @conn,
+                  :index,
+                  @conn.assigns.locale,
+                  @conn.params["address_id"],
+                  filter: "to"
+                ),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+              <%= link(
+                gettext("From"),
+                to: address_internal_transaction_path(
+                  @conn,
+                  :index,
+                  @conn.assigns.locale,
+                  @conn.params["address_id"],
+                  filter: "from"
+                ),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+            </div>
+          </div>
+
+          <table class="table table-responsive-sm table-font">
+            <thead>
+              <th><%= gettext "Parent Tx Hash" %></th>
+              <th><%= gettext "Block" %></th>
+              <th><%= gettext "Age" %></th>
+              <th><%= gettext "From" %></th>
+              <th><%= gettext "To" %></th>
+              <th><%= gettext "Value" %></th>
+            </thead>
+            <%= for internal_transaction <- @page do %>
+              <tgroup>
+                <tr data-test="internal_transaction">
+                  <td>
+                    <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: internal_transaction.transaction %>
+                  </td>
+                  <td>
+                    <%= link(internal_transaction.transaction.block,
+                      to: block_path(@conn, :show, @conn.assigns.locale, internal_transaction.transaction.block)
+                      ) %>
+                  </td>
+                  <td><%= ExplorerWeb.BlockView.age(internal_transaction.transaction.block) %></td>
+                  <td>
+                    <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: internal_transaction.from_address %>
+                  </td>
+                  <td>
+                    <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: internal_transaction.to_address %>
+                  </td>
+                  <td><%= ExplorerWeb.TransactionView.value(internal_transaction) %></td>
+                </tr>
+              </tgroup>
+            <% end %>
+          </table>
+        <% else %>
+          <p><%= gettext "There are no Internal Transactions" %></p>
+        <% end %>
       </div>
     </div>
-    <div class="panels__container">
-      <%= if length(@page.entries) > 0 do %>
-        <table class="table table-responsive-sm table-font">
-          <thead>
-            <th><%= gettext "Parent Tx Hash" %></th>
-            <th><%= gettext "Block" %></th>
-            <th><%= gettext "Age" %></th>
-            <th><%= gettext "From" %></th>
-            <th><%= gettext "To" %></th>
-            <th><%= gettext "Value" %></th>
-          </thead>
-          <%= for internal_transaction <- @page do %>
-            <tgroup>
-              <tr data-test="internal_transaction">
-                <td>
-                  <%= render ExplorerWeb.TransactionView, "_link.html", conn: @conn, transaction: internal_transaction.transaction %>
-                </td>
-                <td>
-                  <%= link(internal_transaction.transaction.block,
-                    to: block_path(@conn, :show, @conn.assigns.locale, internal_transaction.transaction.block)
-                    ) %>
-                </td>
-                <td><%= ExplorerWeb.BlockView.age(internal_transaction.transaction.block) %></td>
-                <td>
-                  <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: internal_transaction.from_address %>
-                </td>
-                <td>
-                  <%= render ExplorerWeb.AddressView, "_link.html", conn: @conn, address: internal_transaction.to_address %>
-                </td>
-                <td><%= ExplorerWeb.TransactionView.value(internal_transaction) %></td>
-              </tr>
-            </tgroup>
-          <% end %>
-        </table>
-      <% else %>
-        <p><%= gettext "There are no Internal Transactions" %></p>
-      <% end %>
+
+    <div class="address__pagination">
+      <%= pagination_links(
+        @conn,
+        @page,
+        ["en", @conn.params["address_id"]],
+        distance: 1,
+        filter: @conn.params["filter"],
+        first: true,
+        next: Phoenix.HTML.raw("&rsaquo;"),
+        path: &address_internal_transaction_path/5,
+        previous: Phoenix.HTML.raw("&lsaquo;"),
+        view_style: :bulma
+      ) %>
     </div>
-  </div>
-  <div class="address__pagination">
-    <%= pagination_links(
-      @conn,
-      @page,
-      ["en", @conn.params["address_id"]],
-      distance: 1,
-      filter: @conn.params["filter"],
-      first: true,
-      next: Phoenix.HTML.raw("&rsaquo;"),
-      path: &address_internal_transaction_path/5,
-      previous: Phoenix.HTML.raw("&lsaquo;"),
-      view_style: :bulma
-    ) %>
-  </div>
+  </section>
 </section>

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

@@ -1,6 +1,8 @@
-<section class="container__section">
+<section class="container-fluid">
+
   <%= render ExplorerWeb.AddressView, "overview.html", assigns %>
-  <div>
+
+  <section>
     <ul class="nav nav-tabs">
       <li class="nav-item">
         <%= link(
@@ -18,47 +20,52 @@
             ) %>
       </li>
     </ul>
-  </div>
-  <div class="panels container__subsection">
-    <div class="dropdown u-float-right u-push-sm">
-      <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
-              id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        Filter: <%= format_current_filter(@filter) %>
-      </button>
-      <div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
-        <%= link(
-              gettext("All"),
-              to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]),
-              class: "address__link address__link--active dropdown-item",
-              "data-test": "filter_option"
-            ) %>
-        <%= link(
-              gettext("To"),
-              to: address_transaction_path(
-                @conn,
-                :index,
-                @conn.assigns.locale,
-                @conn.params["address_id"],
-                filter: "to"
-              ),
-              class: "address__link address__link--active dropdown-item",
-              "data-test": "filter_option"
-            ) %>
-        <%= link(
-              gettext("From"),
-              to: address_transaction_path(
-                @conn,
-                :index,
-                @conn.assigns.locale,
-                @conn.params["address_id"],
-                filter: "from"
-              ),
-              class: "address__link address__link--active dropdown-item",
-              "data-test": "filter_option"
-            ) %>
+
+
+  </section>
+
+
+  <div class="card">
+    <div class="card-body">
+      <div class="dropdown u-float-right u-push-sm">
+        <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
+                id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          Filter: <%= format_current_filter(@filter) %>
+        </button>
+        <div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
+          <%= link(
+                gettext("All"),
+                to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+          <%= link(
+                gettext("To"),
+                to: address_transaction_path(
+                  @conn,
+                  :index,
+                  @conn.assigns.locale,
+                  @conn.params["address_id"],
+                  filter: "to"
+                ),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+          <%= link(
+                gettext("From"),
+                to: address_transaction_path(
+                  @conn,
+                  :index,
+                  @conn.assigns.locale,
+                  @conn.params["address_id"],
+                  filter: "from"
+                ),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+        </div>
       </div>
-    </div>
-    <div class="panels__container">
+
       <table class="table table-responsive-sm table-font">
         <thead>
           <tr>
@@ -104,6 +111,7 @@
       </table>
     </div>
   </div>
+
   <div class="address__pagination">
     <%= pagination_links(
           @conn,