diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0d8b60d99..799bef2872 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,11 +4,14 @@
- [#2679](https://github.com/poanetwork/blockscout/pull/2679) - added fixed height for card chain blocks and card chain transactions
- [#2678](https://github.com/poanetwork/blockscout/pull/2678) - fixed dashboard banner height bug
- [#2672](https://github.com/poanetwork/blockscout/pull/2672) - added new theme for xUSDT
+- [#2665](https://github.com/poanetwork/blockscout/pull/2665) - new menu layout for mobile devices
- [#2663](https://github.com/poanetwork/blockscout/pull/2663) - Fetch address counters in parallel
### Fixes
-- [#2682](https://github.com/poanetwork/blockscout/pull/2682) - Use Task.start instead of Task.async in caches
- [#2688](https://github.com/poanetwork/blockscout/pull/2688) - fix try it out section
+- [#2684](https://github.com/poanetwork/blockscout/pull/2684) - do not filter pending logs
+- [#2682](https://github.com/poanetwork/blockscout/pull/2682) - Use Task.start instead of Task.async in caches
+- [#2671](https://github.com/poanetwork/blockscout/pull/2671) - fixed buttons color at smart contract section
### Chore
diff --git a/apps/block_scout_web/assets/close.svg b/apps/block_scout_web/assets/close.svg
new file mode 100644
index 0000000000..d62467f938
--- /dev/null
+++ b/apps/block_scout_web/assets/close.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/apps/block_scout_web/assets/css/components/_dropdown.scss b/apps/block_scout_web/assets/css/components/_dropdown.scss
index f08e8ddc5a..a44b5386f9 100644
--- a/apps/block_scout_web/assets/css/components/_dropdown.scss
+++ b/apps/block_scout_web/assets/css/components/_dropdown.scss
@@ -1,6 +1,6 @@
$dropdown-menu-item-color: #333 !default;
$dropdown-menu-item-hover-color: $secondary !default;
-$dropdown-menu-item-hover-background: rgba($secondary, .1) !default;
+$dropdown-menu-item-hover-background: rgba($secondary, 0.1) !default;
// These styles extend the default Bootstrap styles
.dropdown-menu {
diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss
index 0d892b25ca..65118fc362 100644
--- a/apps/block_scout_web/assets/css/components/_navbar.scss
+++ b/apps/block_scout_web/assets/css/components/_navbar.scss
@@ -92,7 +92,7 @@ $navbar-logo-width: auto !default;
}
.navbar-toggler {
- border-color: $primary;
+ outline: none;
color: $primary;
.navbar-toggler-icon {
@@ -224,7 +224,7 @@ $navbar-logo-width: auto !default;
}
.navbar-logo {
- max-height: $navbar-logo-height;
+ height: $navbar-logo-height;
width: $navbar-logo-width;
}
@@ -258,4 +258,140 @@ $navbar-logo-width: auto !default;
.topnav-nav-link {
transition: none !important;
}
+}
+
+.nav-link-new {
+ margin-left: auto;
+ font-size: 14px;
+ color: #333333;
+ @include media-breakpoint-up(lg) {
+ display: none;
+ }
+}
+
+.new-button {
+ margin-right: -7px !important;
+ padding-right: 0px;
+ height: 20px!important;
+ border-left: 1px solid #a3a9b5!important;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ outline: none !important;
+ box-shadow: none !important;
+ transition: .2s ease-in;
+ @include media-breakpoint-up(lg) {
+ display: none!important;
+ }
+}
+
+@media (max-width: 992px) {
+ .navbar.navbar-primary .navbar-nav .nav-link .nav-link-icon {
+ display: none;
+ }
+ .navbar-nav .nav-item .dropdown-toggle::after {
+ display: none;
+ }
+ .navbar.navbar-primary .navbar-nav .nav-link {
+ font-size: 28px;
+ color: #333333;
+ padding: 0.7rem 1.4rem;
+ font-weight: 600;
+ }
+ .navbar .dropdown-menu {
+ box-shadow: none;
+ }
+ .navbar .dropdown-menu .dark-mode-changer {
+ display: none;
+ }
+ .nav-item .dropdown {
+ padding: 0px 15%;
+ font-weight: 600;
+ }
+ .last-child {
+ display: none!important;
+ }
+ .search-form {
+ width: 100%!important;
+ }
+ .awesomplete {
+ height: 50px;
+ }
+ .navbar.navbar-primary .input-group-append {
+ left: 15px !important;
+ }
+ .navbar.navbar-primary .form-control {
+ padding-right: 30px;
+ padding-left: 13.5%;
+ }
+ .dropdown-item {
+ padding: 10px 1.6rem !important;
+ color: rgba(51, 51, 51, 0.7)!important;
+ }
+ .navbar.navbar-primary .navbar-nav .nav-link:hover,
+ .navbar.navbar-primary .navbar-nav .nav-link.activeLink,
+ .navbar.navbar-primary .navbar-nav .nav-link:focus {
+ background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0));
+ width: 100%;
+
+ }
+ .navbar.navbar-primary .navbar-nav .nav-link:hover:before {
+ content: "|";
+ height: 50px;
+ width: 50%;
+ opacity: 1;
+ background: none;
+ left: 24%;
+ top: 14%;
+ color: $primary;
+ }
+
+ .navbar {
+ padding: 0.5rem 0rem!important;
+ }
+ .navbar-brand {
+ margin-right: 0px!important;
+ margin-left: 1rem;
+ }
+ .dropdown-item.active,
+ .dropdown-item:hover,
+ .dropdown-item:focus {
+ background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0));
+ width: 100%;
+ background-color: white!important;
+ }
+ .dropdown-item:hover:before {
+ content: "|";
+ height: 50px;
+ width: 50%;
+ opacity: 1;
+ background: none;
+ right: 17%;
+ color: $primary;
+ position: relative;
+ }
+ .dark-mode-changer svg path {
+ fill: #a3a9b5!important;
+ }
+ .dropdown-toggle::after {
+ margin-left: 0.51em!important;
+ color: #a3a9b5;
+ }
+
+ #toggleImage2 {
+ display: none;
+ outline: none;
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+ #toggleImage1 {
+ width: 27px!important;
+ }
+ .dark-mode-changer {
+ display: none!important;
+ }
}
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
index dd1ee83d96..bd4a97aa11 100644
--- a/apps/block_scout_web/assets/css/theme/_dark-theme.scss
+++ b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
@@ -778,4 +778,49 @@ $labels-dark: #8a8dba; // header nav, labels
color: #fff;
}
}
-}
\ No newline at end of file
+}
+
+.navbar-dark .navbar-toggler {
+ color: rgba(255, 255, 255, 0.5);
+ border: none;
+}
+
+.dark-theme-applied .dropdown-item {
+ color: #fff!important;
+}
+
+.dark-theme-applied .dropdown-item.active, .dark-theme-applied .dropdown-item:hover, .dark-theme-applied .dropdown-item:focus {
+ background-image: none;
+ width: 100%;
+ background-color: #35335d!important;
+}
+ .dark-theme-applied .dropdown-item:hover:before {
+ content: "|";
+ height: 50px;
+ width: 50%;
+ opacity: 1;
+ background: none;
+ right: 17%;
+ color: $dark-primary;
+ position: relative;
+}
+.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover,
+.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link.activeLink,
+.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:focus {
+ background-image: none;
+ width: 100%;
+ background-color: #35335d!important;
+ color: white;
+ border: none;
+ }
+ .dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover:before
+ {
+ content: "|";
+ height: 50px;
+ width: 50%;
+ opacity: 1;
+ background: none;
+ left: 24%;
+ top: 14%;
+ color: $dark-primary;
+ }
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js
index e9e0bdc524..bad41a26be 100644
--- a/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js
+++ b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js
@@ -9,3 +9,12 @@ $('.dark-mode-changer').click(function () {
// reload each theme switch
document.location.reload(true)
})
+$('.new-button').click(function () {
+ if (localStorage.getItem('current-color-mode') === 'dark') {
+ localStorage.setItem('current-color-mode', 'light')
+ } else {
+ localStorage.setItem('current-color-mode', 'dark')
+ }
+ // reload each theme switch
+ document.location.reload(true)
+})
diff --git a/apps/block_scout_web/assets/js/pages/layout.js b/apps/block_scout_web/assets/js/pages/layout.js
index 6974569969..d1948043fc 100644
--- a/apps/block_scout_web/assets/js/pages/layout.js
+++ b/apps/block_scout_web/assets/js/pages/layout.js
@@ -7,3 +7,40 @@ $(document).click(function (event) {
$('.navbar-toggler').click()
}
})
+$(document).ready(function () {
+ if (matchMedia) {
+ var mq = window.matchMedia('(max-width: 900px)')
+ mq.addListener(WidthChange)
+ WidthChange(mq)
+ }
+
+ function WidthChange (mq) {
+ if (mq.matches) {
+ $('#checkIfSmall').removeClass('dropdown-menu')
+ $('.dropdown-item').removeClass('active')
+ $('#checkIfSmall1').removeClass('dropdown-menu')
+ $('#checkIfSmall2').removeClass('dropdown-menu')
+ } else {
+ $('#checkIfSmall').addClass('dropdown-menu')
+ $('#checkIfSmall1').addClass('dropdown-menu')
+ $('#checkIfSmall2').addClass('dropdown-menu')
+ }
+ }
+})
+
+var div1 = document.getElementById('toggleImage1')
+var div2 = document.getElementById('toggleImage2')
+
+function switchVisible () {
+ if (!div1) return
+ if (getComputedStyle(div1).display === 'inline-block') {
+ div1.style.display = 'none'
+ div2.style.display = 'block'
+ } else {
+ div1.style.display = 'inline-block'
+ div2.style.display = 'none'
+ }
+}
+document
+ .getElementById('toggleButton')
+ .addEventListener('click', switchVisible)
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 9d640e55e5..0463d28a15 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
@@ -12,13 +12,27 @@
<%= link to: webapp_url(@conn), class: "navbar-brand", "data-test": "header_logo" do %>
 %>)
<% end %>
+
+
+ Sokol Testnet
+
-