From 5676c1462afeab41a931b4d4ca0839210e126f83 Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Fri, 24 May 2019 14:44:23 -0300
Subject: [PATCH] (fix) wrong tabs behavior

---
 apps/block_scout_web/assets/css/app.scss      |  6 +++---
 .../assets/js/lib/card_tabs.js                | 19 ++++++++++++-------
 .../templates/address/_tabs.html.eex          |  2 +-
 .../block_transaction/index.html.eex          |  2 +-
 .../templates/tokens/overview/_tabs.html.eex  |  2 +-
 .../templates/transaction/_tabs.html.eex      |  2 +-
 6 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
index 06510862b9..3838fd96c1 100644
--- a/apps/block_scout_web/assets/css/app.scss
+++ b/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;
 }
diff --git a/apps/block_scout_web/assets/js/lib/card_tabs.js b/apps/block_scout_web/assets/js/lib/card_tabs.js
index eed0790dc7..49b82ad04f 100644
--- a/apps/block_scout_web/assets/js/lib/card_tabs.js
+++ b/apps/block_scout_web/assets/js/lib/card_tabs.js
@@ -1,21 +1,26 @@
 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()
 
-    const siblings = $(this).siblings()
+    if (isMobileCardTabs) {
+      const siblings = $(this).siblings()
 
-    if (siblings.is(':hidden')) {
-      siblings.show()
-    } else {
-      siblings.hide()
+      if (siblings.is(':hidden')) {
+        siblings.show()
+      } else {
+        siblings.hide()
+      }
     }
   })
 })
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex
index 8ed8d4e028..0c2d339c38 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex
+++ b/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)}",
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 add34c7b4d..eac466a3e5 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
@@ -4,7 +4,7 @@
 
   <section>
     <div class="card mb-3">
-      <div class="card-tabs">
+      <div class="card-tabs js-card-tabs">
         <%=
           link(
             gettext("Transactions"),
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_tabs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_tabs.html.eex
index 3a9e9ec11f..f22c913356 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_tabs.html.eex
+++ b/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)}",
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex
index 67a5980f28..c857323fd3 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex
+++ b/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"),