Styled new transaction panels

apps/explorer_web/assets/css/_typography.scss

@@ -41,7 +41,7 @@ p {
 
 a {
   text-decoration: none;
-  color: $primary;
+  color: lighten($primary, 25%);
 
   &:hover,
   &:focus {

apps/explorer_web/assets/css/components/_button.scss

@@ -8,7 +8,7 @@
   border-radius: .14589803rem;
 
   &--primary {
-    background-color: $primary !important;
+    background-color: lighten($primary, 20%) !important;
     color: $black !important;
     -webkit-transition: background-color .25s, color .25s !important;
     transition: background-color .25s, color .25s;
@@ -28,8 +28,8 @@
   }
 
   &--secondary {
-    border: 1px solid $primary;
-    color: $primary;
+    border: 1px solid lighten($primary, 25%);
+    color: lighten($primary, 25%);
     -webkit-transition: background-color .25s;
     transition: background-color .25s;
     font-weight: 400;
@@ -43,19 +43,6 @@
     }
   }
 
-  &--tertiary {
-    border: 1px solid $primary;
-    color: $gray-800;
-    -webkit-transition: background-color .25s, color .25s;
-    transition: background-color .25s, color .25s;
-
-    &:hover,
-    &:focus {
-      background-color: $gray-800;
-      color: $gray-400;
-    }
-  }
-
   &--xsmall {
     font-size: 11px;
     padding: 6px 9px 6px !important;

apps/explorer_web/assets/css/components/_tile.scss

@@ -1,6 +1,4 @@
 .tile {
-  display: flex;
-  flex-direction: column;
   font-size: 12px;
   color: $text-muted;
   border-radius: 2px;
@@ -11,10 +9,14 @@
   padding: 1rem;
   box-shadow: 0 2px 5px rgba($black, 0.15);
 
+  & + & {
+    margin-top: 1rem;
+  }
+
   .tile-title {
     font-size: 14px;
     font-weight: 600;
-    color: $black;
+    color: $gray-700;
     margin-bottom: 0;
   }
 }

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

@@ -1,14 +1,8 @@
-<div class="address-link text-truncate" data-toggle="tooltip" data-placement="top" title="<%= @address %>">
-  <%= if @address do %>
-    <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address),
-    "data-toggle": "tooltip",
-    "data-placement": "top",
-    class: "address-link__font",
-    title: @address do %>
-      <%= if contract?(@address) do %>
-        <i class="address-link__type fas fa-file"></i>
-      <% end %>
-      <%= @address %>
+<%= if @address do %>
+  <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address) do %>
+    <%= if contract?(@address) do %>
+      <i class="address-link__type fas fa-file"></i>
     <% end %>
+    <%= @address %>
   <% end %>
-</div>
+<% end %>

apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex

@@ -8,21 +8,22 @@
 
       <%= for block <- @chain.blocks do %>
         <div class="col-sm-3">
-          <div class="tile">
-            <%= link(block, to: block_path(@conn, :show, @conn.assigns.locale, block), class: "tile-title") %>
-            <span data-from-now="<%= block.timestamp %>"> </span>
-            <span class="text-truncate">
-              Validate by
-              <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, block.miner),
-                "data-toggle": "tooltip",
-                "data-placement": "top",
-                title: block.miner do %>
+          <div class="tile d-flex flex-column">
+              <%= link(block, to: block_path(@conn, :show, @conn.assigns.locale, block), class: "tile-title") %>
+              <div>
+                <%= block.transactions |> Enum.count %> Transactions
+                <span class="ml-2" data-from-now="<%= block.timestamp %>"> </span>
+              </div>
+              <span class="text-truncate">
+                Validate by
+                <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, block.miner),
+                  "data-toggle": "tooltip",
+                  "data-placement": "top",
+                  title: block.miner do %>
+                  <%= block.miner %>
+                <% end %>
+              </span>
 
-                <%= block.miner %>
-
-              <% end %>
-
-            </span>
           </div>
         </div>
       <% end %>

apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex

@@ -1,45 +1,45 @@
 <div class="card">
   <div class="card-body">
-    <%= link(gettext("View All"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
+    <%= link(gettext("View All Transactions →"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
     <h2 class="card-title"><%= gettext "Transactions" %></h2>
-    <table class="table table-font table-responsive-lg">
-      <thead>
-        <th><%= gettext "TX Hash" %></th>
-        <th><%= gettext "From" %></th>
-        <th><%= gettext "To" %></th>
-        <th><%= gettext "Value" %> (<%= gettext "Ether" %>)</th>
-        <th><%= gettext "Age" %></th>
-      </thead>
-      <tbody>
-        <%= for transaction <- @chain.transactions do %>
-        <tr data-test="chain_transaction">
-          <td>
-            <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction: transaction %>
-          </td>
-          <td>
-            <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
-          </td>
-          <td>
-            <%= cond do %>
-              <% transaction.to_address_hash != nil -> %>
-                <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %>
-              <% transaction.created_contract_address_hash != nil -> %>
-                <i class="fas fa-plus-square"></i>
-                <%= link(
-                  "Contract Creation",
-                  class: "transaction__link",
-                  "data-address-hash": transaction.created_contract_address_hash,
-                  to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash),
-                  title: transaction.created_contract_address_hash
-                ) %>
-              <% true -> %>
-            <% end %>
-          </td>
-          <td><%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> </td>
-          <td data-from-now="<%= transaction.block.timestamp %>"></td>
-        </tr>
-        <% end %>
-      </tbody>
-    </table>
+    <%= for transaction <- @chain.transactions do %>
+      <div class="tile">
+        <div class="row">
+          <div class="col-md-2 d-flex align-items-center justify-content-center">
+            Contract Creation
+          </div>
+          <div class="col-md-8">
+            <%= link(transaction.hash ,
+                to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
+                "class": "tile-title",
+                "data-test": "transaction_hash",
+                "data-transaction-hash": transaction.hash) %>
+            <div>
+              <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
+              &rarr;
+              <%= cond do %>
+                <% transaction.to_address_hash != nil -> %>
+                  <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %>
+                <% transaction.created_contract_address_hash != nil -> %>
+                  <i class="fas fa-plus-square"></i>
+                  <%= link(
+                    "Contract Creation",
+                    class: "transaction__link",
+                    "data-address-hash": transaction.created_contract_address_hash,
+                    to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash),
+                    title: transaction.created_contract_address_hash
+                  ) %>
+                <% true -> %>
+              <% end %>
+            </div>
+            <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %>
+          </div>
+          <div class="col-md-2 d-flex flex-column justify-content-end text-right">
+            <span data-from-now="<%= transaction.block.timestamp %>"></span>
+            <span>Block #12345</span>
+          </div>
+        </div>
+      </div>
+    <% end %>
   </div>
 </div>

apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex

@@ -1,6 +1,7 @@
 <section class="container-fluid">
 
   <%= render ExplorerWeb.ChainView, "_blocks.html", assigns %>
+  <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %>
 
   <div class="d-flex flex-md-row flex-column">
     <div class="container__stats card mr-sm-4 mb-4 mb-sm-0">
@@ -52,11 +53,7 @@
   </div>
 
   <div class="row my-4">
-    <div class="col-md-6 mb-4 mb-md-0">
+  
 
-    </div>
-    <div class="col-md-6">
-      <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %>
-    </div>
   </div>
 </section>

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

@@ -1,8 +1,4 @@
-<%= link(@transaction |> hash |> String.slice(2..7),
+<%= link(@transaction |> hash ,
     to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, @transaction),
-    "data-toggle": "tooltip",
-    "data-placement": "top",
     "data-test": "transaction_hash",
-    "data-transaction-hash": @transaction.hash,
-    class: "monospace",
-    title: @transaction) %>
+    "data-transaction-hash": @transaction.hash) %>