Merge pull request #2238 from maxgrapps/master

Header content alignment issue, hide navbar on outside click

CHANGELOG.md

@@ -8,6 +8,7 @@
 - [#2146](https://github.com/poanetwork/blockscout/pull/2146) - feat: add eth_getLogs rpc endpoint
 
 ### Fixes
+- [#2238](https://github.com/poanetwork/blockscout/pull/2238) - header content alignment issue, hide navbar on outside click
 - [#2229](https://github.com/poanetwork/blockscout/pull/2229) - gap issue between qr and copy button in token transfers, top cards width and height issue
 - [#2201](https://github.com/poanetwork/blockscout/pull/2201) - footer columns fix
 - [#2179](https://github.com/poanetwork/blockscout/pull/2179) - fix docker build error

apps/block_scout_web/assets/css/components/_navbar.scss

@@ -21,9 +21,9 @@ $navbar-logo-width: auto !default;
   .nav-item {
     font-size: 14px;
   }
-  .navbar-nav {
-    flex-grow: 1;
 
+  .navbar-nav {
+    
     .nav-link {
       align-items: center;
       color: $header-links-color;
@@ -153,6 +153,18 @@ $navbar-logo-width: auto !default;
     @include media-breakpoint-up(xl) {
       width: 280px;
     }
+    @media (min-width: 1366px) {
+      width: 330px;
+    }
+    @media (min-width: 1440px) {
+      width: 380px;
+    }
+    @media (min-width: 1580px) {
+      width: 430px;
+    }
+    @media (min-width: 1800px) {
+      width: 520px;
+    }
   }
   .input-group-append {
     height: 38px;
@@ -198,7 +210,7 @@ $navbar-logo-width: auto !default;
     width: 100%;
 
     .awesomplete {
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(lg) {
         width: 100%;
       }
     }
@@ -210,6 +222,10 @@ $navbar-logo-width: auto !default;
 
 .navbar-brand {
   margin-left: 0;
+  flex-shrink: 1;
+  .navbar-logo {
+    max-width: 100%;
+  }
 }
 
 .navbar-logo {
@@ -227,3 +243,18 @@ $navbar-logo-width: auto !default;
 .add-border {
   border: 1px solid transparentize($white, 0.30);
 }
+
+.navbar-collapse {
+  justify-content: flex-end;
+  align-items: flex-start;
+  flex-shrink: 0;
+  @media (min-width: 992px) {
+    align-items: center;
+  }
+}
+
+.navbar-container, .navbar-primary {
+  @include media-breakpoint-up(xl) {
+    padding-right: 0;
+  }
+}

apps/block_scout_web/assets/js/app.js

@@ -31,6 +31,7 @@ import './pages/chain'
 import './pages/pending_transactions'
 import './pages/transaction'
 import './pages/transactions'
+import './pages/layout'
 
 import './pages/admin/tasks.js'
 

apps/block_scout_web/assets/js/pages/layout.js

@@ -0,0 +1,9 @@
+import $ from 'jquery'
+
+$(document).click(function (event) {
+  var clickover = $(event.target)
+  var _opened = $('.navbar-collapse').hasClass('show')
+  if (_opened === true && $('.navbar').find(clickover).length < 1) {
+    $('.navbar-toggler').click()
+  }
+})

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-dark navbar-expand-lg navbar-primary" data-selector="navbar">
-  <div class="container">
+  <div class="container-fluid navbar-container">
     <%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
       <img class="navbar-logo" src="<%= logo() %>" alt="<%= subnetwork_title() %>" />
     <% end %>
@@ -7,7 +7,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav">
         <li class="nav-item dropdown">
           <a class="nav-link topnav-nav-link dropdown-toggle" href="#" id="navbarBlocksDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <span class="nav-link-icon">