From 60e9309f1e0952e6144fb33ac36be0468ece1955 Mon Sep 17 00:00:00 2001
From: maxgrapps <maxgrapps@gmail.com>
Date: Wed, 3 Jul 2019 13:14:09 +0300
Subject: [PATCH] banner stats issues on sm resolutions, transactions title
 issue

---
 .../assets/css/components/_card.scss          |  6 ++++
 .../css/components/_dashboard-banner.scss     | 29 ++++++++++++++++++-
 .../templates/chain/show.html.eex             |  2 +-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss
index 6e50100f0d..63a8f4a852 100644
--- a/apps/block_scout_web/assets/css/components/_card.scss
+++ b/apps/block_scout_web/assets/css/components/_card.scss
@@ -42,6 +42,12 @@ $card-tab-icon-color-active: #20b760 !default;
   line-height: 1.2rem;
   margin-bottom: 2rem;
 
+  &.lg-card-title {
+    @media (max-width: 374px) {
+      font-size: 13px;
+    }
+  }
+
   &.margin-bottom-md {
     margin-bottom: 25px;
   }
diff --git a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
index ade21afea5..ecde4e882b 100644
--- a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
+++ b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
@@ -80,6 +80,12 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
       flex-direction: row;
     }
 
+    @media (max-width: 599px) {
+      padding-top: 0;
+      padding-bottom: 0;
+      flex-direction: column;
+    }
+
     &::before {
       border-radius: 2px;
       content: "";
@@ -107,6 +113,11 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
     line-height: 1.2;
     margin: 0 0 5px;
 
+    @media (max-width: 374px) {
+      position: relative;
+      top: -2px;
+    }
+
     @include media-breakpoint-down(md) {
       margin: 0 5px 0 0;
     }
@@ -140,13 +151,16 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
     height: auto;
     justify-content: flex-start;
     margin-left: 0;
-    margin-top: 15px;
     max-width: 100%;
     padding: 20px 0 20px 20px;
     width: 250px;
     box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
   }
 
+  @include media-breakpoint-down(lg) {
+    margin-top: 15px;
+  }
+
   @include media-breakpoint-down(sm) {
     width: 100%;
   }
@@ -186,4 +200,17 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   }
 
   @include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color);
+
+  .dashboard-banner-network-stats-item {
+    @media (max-width: 374px) {
+      padding-left: calc(0.6rem + 4px);
+      padding-right: 0.5rem;
+    }
+  }
+
+  .dashboard-banner-network-stats-value {
+    @media (max-width: 374px) {
+      font-size: 0.9rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
index 17bd9c4afe..0c29001697 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
@@ -105,7 +105,7 @@
   <div class="card card-chain-transactions">
     <div class="card-body">
       <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %>
-      <h2 class="card-title"><%= gettext "Transactions" %></h2>
+      <h2 class="card-title lg-card-title"><%= gettext "Transactions" %></h2>
       <div data-selector="channel-batching-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-info">
           <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>