Merge pull request #2020 from poanetwork/fix/#1995-2nd-click-to-selected-tab-causes-hiding-of-other-tabs

(fix) wrong tabs behavior

CHANGELOG.md

@@ -21,6 +21,7 @@
 
 ### Fixes
 
+- [#2020](https://github.com/poanetwork/blockscout/pull/2020) - Fixed a bug triggered when a second click to a selected tab caused the other tabs to hide.
 - [#1944](https://github.com/poanetwork/blockscout/pull/1944) - fixed styles for token's dropdown.
 - [#1926](https://github.com/poanetwork/blockscout/pull/1926) - status label alignment
 - [#1849](https://github.com/poanetwork/blockscout/pull/1849) - Improve chains menu

apps/block_scout_web/assets/css/app.scss

@@ -123,9 +123,9 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/errors";
 
 :export {
-  primary: $primary;
-  secondary: $secondary;
+  dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
   dashboardLineColorMarket: $dashboard-line-color-market;
   dashboardLineColorPrice: $dashboard-line-color-price;
-  dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
+  primary: $primary;
+  secondary: $secondary;
 }

apps/block_scout_web/assets/js/lib/card_tabs.js

@@ -1,15 +1,19 @@
 import $ from 'jquery'
 
 $(function () {
-  const activeTabCard = $('.card-tab.active')
+  const tabCards = $('.js-card-tabs')
+  const activeTabCard = tabCards.find('.active')
+  const isMobileCardTabs = tabCards.children(':hidden').length
+  const isOnlyChild = !activeTabCard.siblings().length
 
-  if (!activeTabCard.siblings().length) {
+  if (isOnlyChild) {
     activeTabCard.addClass('noCaret')
   }
 
   activeTabCard.on('click', function (e) {
     e.preventDefault()
 
+    if (isMobileCardTabs) {
       const siblings = $(this).siblings()
 
       if (siblings.is(':hidden')) {
@@ -17,5 +21,6 @@ $(function () {
       } else {
         siblings.hide()
       }
+    }
   })
 })

apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex

@@ -1,4 +1,4 @@
-<div class="card-tabs">
+<div class="card-tabs js-card-tabs">
   <%= link(
         gettext("Transactions"),
         class: "card-tab #{tab_status("transactions", @conn.request_path)}",

apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex

@@ -4,7 +4,7 @@
 
   <section>
     <div class="card mb-3">
-      <div class="card-tabs">
+      <div class="card-tabs js-card-tabs">
         <%=
           link(
             gettext("Transactions"),

apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_tabs.html.eex

@@ -1,4 +1,4 @@
-<div class="card-tabs">
+<div class="card-tabs js-card-tabs">
   <%= link(
         gettext("Token Transfers"),
         class: "card-tab #{tab_status("token_transfers", @conn.request_path)}",

apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex

@@ -1,4 +1,4 @@
-<div class="card-tabs">
+<div class="card-tabs js-card-tabs">
   <%= if @show_token_transfers do %>
     <%= link(
           gettext("Token Transfers"),