Address overview cards styled WIP

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

@@ -1,14 +1,56 @@
+$card-link-size: 2rem;
+
 .card {
   border-color: transparent;
   box-shadow: 0 5px 40px -5px rgba($black, 0.25);
   border-radius: 0;
   margin-bottom: 3rem;
+
+  &-balance {
+    background-color: $primary;
+    color: $white;
+  }
+
+  &-muted {
+    color: $text-muted;
+  }
+
 }
 
 .card-header {
   background-color: $white;
+  border-bottom: none;
+
+  &-tabs {
+    margin: (-$card-spacer-y) (-$card-spacer-x);
+  }
 }
 
-.card-header-tabs {
+
-  margin: (-$card-spacer-y) (-$card-spacer-x);
+.card-links {
+  position: absolute;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 1rem;
+
+  & > a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $card-link-size;
+    height: $card-link-size;
+    margin: 0 .25rem;
+    color: $text-muted;
+    background-color: $gray-200;
+    border-radius: 50%;
+    transition: all 0.1s ease;
+
+    &:hover {
+      background-color: $gray-600;
+      color: $primary;
+      text-decoration: none;
+    }
+  }
 }

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

@@ -1,5 +1,5 @@
 <section>
-  <div class="row mb-3">
+  <!-- <div class="row mb-3">
     <div class="col-md-2 col-lg-1 order-last order-sm-first">
       <div class="card mt-3 mt-sm-0">
         <div class="card-body px-2 py-2">
@@ -7,19 +7,57 @@
         </div>
       </div>
     </div>
-    <div class="col-sm-10 align-self-center">
+  </div> -->
-      <h1><%= address_title(@address) %></h1>
-      <p class="mb-0" data-test="address_detail_hash"><%= @address %></p>
-    </div>
-  </div>
 
-  <div class="card mb-3">
+  <div class="row" data-selector='overview'>
-    <div class="card-body">
+    <div class="col-md-6">
-      <div class="row">
+      <div class="card">
-        <div class="col-sm-6">
+        <div class="card-body">
-          <table class="table table-font table-responsive-sm table-horizontal" data-selector='overview'>
+          <div class="card-links">
-            <%= render "_values.html", address: @address, exchange_rate: @exchange_rate, transaction_count: @transaction_count %>
+            <a href="" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Address") %>">
-          </table>
+              <i class="fas fa-clone"></i>
+            </a>
+            <a href="" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("QR Code") %>">
+              <i class="fas fa-qrcode"></i>
+            </a>
+            <a href="" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Info") %>">
+              <i class="fas fa-info"></i>
+            </a>
+          </div>
+          <h1 class="mb-4"><%= address_title(@address) %></h1>
+          <p class="mb-0" data-test="address_detail_hash"><%= @address %></p>
+          <div class="d-flex flex-row justify-content-start card-muted">
+            <span class="mr-4" data-test="transaction_count"><%= Cldr.Number.to_string!(@transaction_count) %> <%= gettext "Transactions" %></span>
+            <span class="mr-4">0 Mined</span>
+            <span class="">0 Uncles</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-3">
+      <div class="card card-balance">
+        <div class="card-body">
+          <h1 class="mb-4">Balance</h1>
+          <span></span>
+          <div class="text-right">
+            <div><%= balance(@address) %></div>
+            <span><%= formatted_usd(@address, @exchange_rate) %></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-3">
+      <div class="card">
+        <div class="card-body">
+          <div class="card-links">
+            <a href="" data-toggle="tooltip" data-placement="top" title="<%= gettext("Info") %>">
+              <i class="fas fa-list"></i>
+            </a>
+          </div>
+          <h1 class="mb-4">Token Holdings</h1>
+          <div class="text-right">
+            <%= formatted_usd(@address, @exchange_rate) %>
+          </div>
         </div>
       </div>
     </div>