From fbfb06919b67bc0ee74d76fab6382046ab69d9ce Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Thu, 7 Mar 2019 16:59:11 -0300
Subject: [PATCH] (add) topbar search and network dropdown

---
 .../assets/css/components/_dropdown.scss      |  5 ++
 .../assets/css/components/_navbar.scss        | 84 +++++++++++++------
 .../assets/css/theme/_dai_variables.scss      |  4 -
 .../templates/layout/_topnav.html.eex         | 42 +++++-----
 4 files changed, 85 insertions(+), 50 deletions(-)

diff --git a/apps/block_scout_web/assets/css/components/_dropdown.scss b/apps/block_scout_web/assets/css/components/_dropdown.scss
index 5b56a393ba..f24b7ee843 100644
--- a/apps/block_scout_web/assets/css/components/_dropdown.scss
+++ b/apps/block_scout_web/assets/css/components/_dropdown.scss
@@ -3,6 +3,11 @@
     box-shadow: $box-shadow;
     padding: 0;
     width: 100%;
+
+    &.right {
+        left: auto;
+        right: 0;
+    }
 }
 
 .dropdown-item {
diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss
index 09c5ec1a56..ea64134e02 100644
--- a/apps/block_scout_web/assets/css/components/_navbar.scss
+++ b/apps/block_scout_web/assets/css/components/_navbar.scss
@@ -76,6 +76,10 @@
     path {
         fill: $secondary;
     }
+
+    &.m-r-0 {
+      margin-right: 0;
+    }
 }
 
 .navbar {
@@ -85,54 +89,84 @@
 }
 
 .navbar {
+    .search-form {
+      @include media-breakpoint-up(xl) {
+        height: 57px;
+        margin-bottom: -8px;
+        margin-top: -8px;
+      }
+    }
+
+    .form-inline {
+      height: 100%;
+    }
+
+    .input-group {
+      height: 100%;
+      position: relative;
+    }
+
     .form-control {
-        background: transparent;
-        border-color: transparentize($white, 0.30);
-        border-right: none;
-        color: $white;
-        font-size: 12px;
-        padding-right: 0;
-        width: auto;
+        background: #f5f6fa;
+        border-color: #f5f6fa;
+        color: #a3a9b5;
+        font-size: 14px;
+        height: 100%;
+        padding-left: 38px;
+        padding-right: 8px;
+        position: relative;
+        width: 100%;
+        z-index: 1;
 
         &::-webkit-input-placeholder {
             /* Chrome/Opera/Safari */
-            color: transparentize($white, 0.5);
+            color: #a3a9b5;
         }
         &::-moz-placeholder {
             /* Firefox 19+ */
-            color: transparentize($white, 0.5);
+            color: #a3a9b5;
         }
         &:-ms-input-placeholder {
             /* IE 10+ */
-            color: transparentize($white, 0.5);
+            color: #a3a9b5;
         }
         &:-moz-placeholder {
             /* Firefox 18- */
-            color: transparentize($white, 0.5);
+            color: #a3a9b5;
         }
         &:focus {
             box-shadow: none;
         }
+
         @include media-breakpoint-up(xl) {
-            width: calc(41ch + #{$input-padding-x});
+            width: 280px;
         }
     }
-}
 
-.navbar {
-    .input-group-text {
-        background: none;
-        border-color: transparentize($white, 0.30);
-        border-left: none;
-    }
-}
-
-.input-group-append {
-    margin-left: 0;
+    .input-group-append {
+        height: 38px;
+        left: 0;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 38px;
+        z-index: 5;
 
-    path {
-        fill: $secondary;
+        path {
+            fill: #a3a9b5;
+        }
     }
+
+    .input-group-text {
+      align-items: center;
+      background: none;
+      border-color: transparent;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      padding: 0;
+      width: 100%;
+  }
 }
 
 .topnav-nav-link {
diff --git a/apps/block_scout_web/assets/css/theme/_dai_variables.scss b/apps/block_scout_web/assets/css/theme/_dai_variables.scss
index 84362ffcf1..2ccb31e855 100644
--- a/apps/block_scout_web/assets/css/theme/_dai_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_dai_variables.scss
@@ -16,7 +16,6 @@ $tertiary:      #1755e4;
 
   .form-control {
     color: $secondary;
-    border-color: transparentize($secondary, 0.30);
 
     &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
       color: transparentize($secondary, 0.5);
@@ -32,9 +31,6 @@ $tertiary:      #1755e4;
     }
   }
 
-  .input-group-text {
-    border-color: transparentize($secondary, 0.30);
-  }
 }
 
 .navbar-logo {
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 e910883255..13d434eff5 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
@@ -128,29 +128,29 @@
               </button>
             </div>
           </div>
-          <button class="btn btn-outline-success my-2 my-sm-0 sr-only" type="submit"><%= gettext "Search" %></button>
+          <button class="btn btn-outline-success my-2 my-sm-0 sr-only hidden" type="submit"><%= gettext "Search" %></button>
         <% end %>
-        <ul class="navbar-nav">
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle pl-lg-2" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <!-- ICON FOR MAINNET -->
-              <span class="nav-link-icon">
-                <%= render BlockScoutWeb.IconsView, network_icon_partial() %>
-              </span>
-              <!-- ICON FOR TESTNET -->
-              <!-- <span class="nav-link-icon">
-                <%= render BlockScoutWeb.IconsView, "_test_network_icon.html" %>
-              </span> -->
-              <%= subnetwork_title() %>
-            </a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <%= for %{url: url, title: title} <- other_networks() do %>
-                <a class="dropdown-item" href="<%= url%>"><%= title %></a>
-              <% end %>
-            </div>
-          </li>
-        </ul>
       </div>
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle pl-lg-2" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <!-- ICON FOR MAINNET -->
+            <span class="nav-link-icon m-r-0">
+              <%= render BlockScoutWeb.IconsView, network_icon_partial() %>
+            </span>
+            <!-- ICON FOR TESTNET -->
+            <!-- <span class="nav-link-icon">
+              <%= render BlockScoutWeb.IconsView, "_test_network_icon.html" %>
+            </span> -->
+            <!-- <%= subnetwork_title() %> -->
+          </a>
+          <div class="dropdown-menu right" aria-labelledby="navbarDropdown">
+            <%= for %{url: url, title: title} <- other_networks() do %>
+              <a class="dropdown-item" href="<%= url%>"><%= title %></a>
+            <% end %>
+          </div>
+        </li>
+      </ul>
     </div>
   </div>
 </nav>