Add new block item layout

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

@@ -1,5 +1,7 @@
-<section class="container-fluid">
+<section class="container">
-  <div>
+  <div class="card">
+    <div class="card-body">
+
       <h1>Blocks</h1>
       <p>
         <%= gettext(
@@ -8,57 +10,47 @@
               end_block: List.last(@blocks).number
             ) %>
       </p>
-  </div>
+
-  <div class="card">
-    <div class="card-body">
-      <table class="table table-responsive-sm table-font">
-        <thead>
-          <tr>
-            <th><%= gettext "Height" %></th>
-            <th><%= gettext "Age" %></th>
-            <th><%= gettext "Transactions" %></th>
-            <th><%= gettext "Gas Used" %> (<%= gettext("Gas") %>)</th>
-            <th><%= gettext "Gas Limit" %> (<%= gettext("Gas") %>)</th>
-            <th><%= gettext "Gas Price" %></th>
-          </tr>
-        </thead>
-        <tbody>
       <%= for block <- @blocks do %>
-            <tr>
+        <div class="tile">
-              <td>
+          <div class="row">
+            <div class="col-md-6">
+              <!-- block height -->
               <%= link(
                     block,
-                      class: "blocks__link",
+                    class: "tile-title",
                     to: block_path(@conn, :show, @conn.assigns.locale, block),
                     "data-test": "block_number",
                     "data-block-number": to_string(block.number)
                   ) %>
-              </td>
+              <div>
-              <td data-from-now="<%= block.timestamp %>"></td>
+                <!-- transactions -->
-              <td>
+                <span class="mr-2">
                   <%= gettext("%{count} transactions", count: block.transactions |> Enum.count) %>
-              </td>
+                </span>
-              <td>
+                <!-- size -->
-                <%= block.gas_used |> Cldr.Number.to_string! %> (<%=
+                <span class="mr-2"> <%= Cldr.Unit.new(:byte, block.size) |> Cldr.Unit.to_string! %> </span>
-                block.gas_used / block.gas_limit |> Cldr.Number.to_string!(format: "#.#%")
+                <!-- age -->
-                %>)
+                <span data-from-now="<%= block.timestamp %>"></span>
-              </td>
+              </div>
-              <td>
+            </div>
-                <%= block.gas_limit |> Cldr.Number.to_string! %>
+            <div class="col-md-6 text-right d-flex align-items-end justify-content-end">
-              </td>
+              <!-- validator -->
-              <td>
+              <%= gettext "Miner" %>
-                <%= average_gas_price(block) %>
+              <span class="ml-2">
-              </td>
+                <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, block.miner_hash) do %>
-            </tr>
+                  <%= block.miner_hash %>
                 <% end %>
-        </tbody>
+              </span>
-      </table>
+            </div>
           </div>
         </div>
+      <% end %>
+
       <%= if @next_page_params do %>
         <%= link(
           gettext("Older"),
-      class: "button button--secondary button--sm u-float-right mt-3",
+          class: "button button--secondary button--sm float-right mt-3",
           to: block_path(
             @conn,
             :index,
@@ -67,4 +59,6 @@
           )
         ) %>
       <% end %>
+    </div>
+  </div>
 </section>