From 8d307cb137b6657b103d0811cc1ba54a659a476b Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Fri, 5 Oct 2018 11:15:38 -0400
Subject: [PATCH] Design cleanup

---
 .../assets/css/components/_animations.scss    |  5 +++++
 .../assets/css/components/_navbar.scss        |  5 +----
 .../assets/css/components/_tile.scss          | 20 +++++++++++++++++++
 .../templates/block/_tile.html.eex            |  9 +++++++--
 .../block_transaction/index.html.eex          |  2 +-
 .../templates/layout/_topnav.html.eex         | 17 +++++++++++++---
 6 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/apps/block_scout_web/assets/css/components/_animations.scss b/apps/block_scout_web/assets/css/components/_animations.scss
index 8482511b94..d673e9067a 100644
--- a/apps/block_scout_web/assets/css/components/_animations.scss
+++ b/apps/block_scout_web/assets/css/components/_animations.scss
@@ -66,6 +66,11 @@
 .fade-up {
   will-change: transform, opacity, height;
   animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+  @media (max-width: 767px) {
+    max-height: 234px;
+    animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
 }
 
 .shrink-out {
diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss
index b952069e4e..f33dea5bec 100644
--- a/apps/block_scout_web/assets/css/components/_navbar.scss
+++ b/apps/block_scout_web/assets/css/components/_navbar.scss
@@ -147,16 +147,13 @@
   }
 }
 
-.nav-link.dropdown-toggle {
-  padding-right: 0 !important;
-}
-
 .dropdown-menu {
   padding: 0px;
 }
 
 .dropdown-item {
   padding: 10px 20px;
+  font-size: 12px;
 
   &:hover {
     background-color: $tertiary;
diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss
index 15805103f0..cfc0526106 100644
--- a/apps/block_scout_web/assets/css/components/_tile.scss
+++ b/apps/block_scout_web/assets/css/components/_tile.scss
@@ -19,6 +19,26 @@
 
     &-block {
       border-left: 4px solid $primary;
+
+      .tile-label {
+        color: $primary;
+      }
+    }
+
+    &-uncle {
+      border-left: 4px solid $secondary;
+
+      .tile-label {
+        color: $secondary;
+      }
+    }
+
+    &-reorg {
+      border-left: 4px solid $tertiary;
+
+      .tile-label {
+        color: $tertiary;
+      }
     }
 
     &-transaction {
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block/_tile.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block/_tile.html.eex
index eeb136f8a3..227c0bd09a 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/block/_tile.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/block/_tile.html.eex
@@ -1,6 +1,11 @@
-<div class="tile tile-type-block fade-up" data-block-number="<%= to_string(@block.number) %>">
+<div class="tile tile-type-<%= String.downcase(@block_type) %> fade-up" data-block-number="<%= to_string(@block.number) %>">
   <div class="row">
-    <div class="col-md-8 col-lg-9">
+    <div class="col-md-2 d-flex flex-row flex-md-column align-items-left justify-content-start justify-content-lg-center mb-1 mb-md-0 pl-md-4">
+      <span class="tile-label" data-test="transaction_type">
+        <%= @block_type %>
+      </span>
+    </div>
+    <div class="col-md-6 col-lg-7">
       <!-- block height -->
       <%= if @block_type == "Block" do %>
         <%= link(
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex
index 6be818fc60..09b423d3c2 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex
@@ -41,7 +41,7 @@
           </span>
         <% else %>
           <div class="tile tile-muted text-center">
-            <span data-selector="empty-transactions-list"><%= gettext "There are no transactions for this address." %></span>
+            <span data-selector="empty-transactions-list"><%= gettext "There are no transactions for this block." %></span>
           </div>
         <% end %>
 
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
index ba4ef3d691..89e7b8ac61 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
@@ -8,13 +8,24 @@
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-          <%= link to: block_path(@conn, :index), class: "nav-link topnav-nav-link" do %>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarBlocksDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <span class="nav-link-icon">
               <%= render BlockScoutWeb.IconsView, "_block_icon.html" %>
             </span>
             <%= gettext("Blocks") %>
-          <% end %>
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <%= link to: block_path(@conn, :index), class: "dropdown-item" do %>
+              <%= gettext("Blocks") %>
+            <% end %>
+            <%= link to: uncle_path(@conn, :uncle), class: "dropdown-item" do %>
+              <%= gettext("Uncles") %>
+            <% end %>
+            <%= link to: reorg_path(@conn, :reorg), class: "dropdown-item" do %>
+              <%= gettext("Forked Blocks (Reorgs)") %>
+            <% end %>
+          </div>
         </li>
         <li class="nav-item">
           <%= link to: transaction_path(@conn, :index), class: "nav-link topnav-nav-link" do %>