From a72242ac90352fa58d096855f7b5b3ccf15bf2ad Mon Sep 17 00:00:00 2001
From: Victor Baranov <baranov.viktor.27@gmail.com>
Date: Mon, 2 Sep 2019 17:47:27 +0300
Subject: [PATCH] Revert some unintentional changes

---
 apps/block_scout_web/assets/css/app.scss      |  11 +-
 .../assets/css/components/_card.scss          | 344 ++++++++++--------
 .../templates/block/overview.html.eex         |  21 +-
 3 files changed, 207 insertions(+), 169 deletions(-)

diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
index b4c9649d66..4563ec33d5 100644
--- a/apps/block_scout_web/assets/css/app.scss
+++ b/apps/block_scout_web/assets/css/app.scss
@@ -13,10 +13,13 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "fa-brands";
 @import "fa-regular";
 @import "fa-solid";
+
 // Bootstrap Core CSS
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/mixins";
+
 @import "theme/variables";
+
 @import "node_modules/bootstrap/scss/root";
 @import "node_modules/bootstrap/scss/reboot";
 @import "node_modules/bootstrap/scss/grid";
@@ -35,6 +38,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/utilities/position";
 @import "node_modules/bootstrap/scss/utilities/borders";
 @import "node_modules/bootstrap/scss/progress";
+
 // Bootstrap Components
 @import "node_modules/bootstrap/scss/alert";
 @import "node_modules/bootstrap/scss/badge";
@@ -46,10 +50,13 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/pagination";
 @import "node_modules/bootstrap/scss/tables";
 @import "node_modules/bootstrap/scss/transitions";
+
 // Code highlight
 @import "node_modules/highlight.js/styles/default";
+
 //Custom theme
 @import "theme/fonts";
+
 // Custom SCSS
 @import "layout";
 @import "typography";
@@ -107,7 +114,9 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/radio_big";
 @import "components/btn_no_border";
 @import "components/custom_tooltips_block_details";
+
 @import "theme/dark-theme";
+
 :export {
   dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
   dashboardLineColorMarket: $dashboard-line-color-market;
@@ -117,5 +126,3 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
   darkprimary: $dark-primary;
   darksecondary: $dark-secondary;
 }
-
-
diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss
index 80d97305b5..0e5fa8cb2a 100644
--- a/apps/block_scout_web/assets/css/components/_card.scss
+++ b/apps/block_scout_web/assets/css/components/_card.scss
@@ -7,214 +7,244 @@ $card-background-1: $primary !default;
 $card-background-1-text-color: #fff !default;
 $card-tab-icon-color: #20b760 !default;
 $card-tab-icon-color-active: #fff !default;
+
 .card {
-    background-color: $card-background-color;
-    border-radius: $card-default-border-radius;
-    border: none;
-    box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
-    margin-bottom: $common-container-margin;
-    .block-details-row {
-        flex-direction: row;
+  background-color: $card-background-color;
+  border-radius: $card-default-border-radius;
+  border: none;
+  box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
+  margin-bottom: $common-container-margin;
+
+  .block-details-row {
+    flex-direction: row;
+    @include media-breakpoint-down(sm) {
+      flex-direction: column;
+    }
+
+    .block-detail-el {
+      & + .block-detail-el {
         @include media-breakpoint-down(sm) {
-            flex-direction: column;
-        }
-        .block-detail-el {
-            &+.block-detail-el {
-                @include media-breakpoint-down(sm) {
-                    margin-top: 6px;
-                }
-            }
+          margin-top: 6px;
         }
+      }
     }
+  }
 }
 
 .card-background-1 {
-    background-color: $card-background-1;
+  background-color: $card-background-1;
+  color: $card-background-1-text-color;
+
+  a:not(.dropdown-item),
+  a:not(.dropdown-item):hover {
     color: $card-background-1-text-color;
-    a:not(.dropdown-item),
-    a:not(.dropdown-item):hover {
-        color: $card-background-1-text-color;
-    }
+  }
 }
 
 .card-header {
-    background: transparent;
-    border-bottom: 1px solid $base-border-color;
-    padding: $card-vertical-padding $card-horizontal-padding;
-    &-tabs {
-        margin: (-$card-spacer-y) (-$card-spacer-x);
-    }
+  background: transparent;
+  border-bottom: 1px solid $base-border-color;
+  padding: $card-vertical-padding $card-horizontal-padding;
+
+  &-tabs {
+    margin: (-$card-spacer-y) (-$card-spacer-x);
+  }
 }
 
 .card-title {
-    font-size: 18px;
-    font-weight: normal;
-    line-height: 1.2rem;
-    margin-bottom: 2rem;
-    &.lg-card-title {
-        @media (max-width: 374px) {
-            font-size: 13px;
-        }
-    }
-    &.margin-bottom-md {
-        margin-bottom: 25px;
-    }
-    &.margin-bottom-sm {
-        margin-bottom: 15px;
-    }
-    &.margin-bottom-xs {
-        margin-bottom: 10px;
-    }
-    &.margin-bottom-0 {
-        margin-bottom: 0;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 1.2rem;
+  margin-bottom: 2rem;
+
+  &.lg-card-title {
+    @media (max-width: 374px) {
+      font-size: 13px;
     }
-    .card-title-container & {
-        line-height: 1.2;
-        margin: 0;
-        @include media-breakpoint-down(sm) {
-            margin-bottom: 25px;
-        }
+  }
+
+  &.margin-bottom-md {
+    margin-bottom: 25px;
+  }
+
+  &.margin-bottom-sm {
+    margin-bottom: 15px;
+  }
+
+  &.margin-bottom-xs {
+    margin-bottom: 10px;
+  }
+
+  &.margin-bottom-0 {
+    margin-bottom: 0;
+  }
+
+  .card-title-container & {
+    line-height: 1.2;
+    margin: 0;
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 25px;
     }
+  }
 }
 
 .card-subtitle {
-    color: #333;
-    font-size: 12px;
-    font-weight: normal;
-    line-height: 1.2;
-    margin: 0 0 30px;
-    &.margin-bottom-0 {
-        margin-bottom: 0;
-    }
+  color: #333;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin: 0 0 30px;
+
+  &.margin-bottom-0 {
+    margin-bottom: 0;
+  }
 }
 
 .card-title-container {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    padding: 25px $card-horizontal-padding;
-    @include media-breakpoint-down(sm) {
-        flex-direction: column;
-    }
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 25px $card-horizontal-padding;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
 }
 
 .card-title-controls {
-    align-items: center;
-    display: flex;
-    justify-content: flex-end;
-    @include media-breakpoint-down(sm) {
-        flex-direction: column;
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
+
+  .card-title-control {
+    margin-right: 20px;
+
+    &:last-child {
+      margin-right: 0;
     }
-    .card-title-control {
-        margin-right: 20px;
-        &:last-child {
-            margin-right: 0;
-        }
-        @include media-breakpoint-down(sm) {
-            margin-bottom: 20px;
-            margin-right: 0;
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 20px;
+      margin-right: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
+  }
 }
 
 .card-body {
-    padding: $card-horizontal-padding;
+  padding: $card-horizontal-padding;
 }
 
 .card-body-flex-column-space-between {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .card-server-response-body {
-    max-height: 400px;
-    overflow-y: auto;
+  max-height: 400px;
+  overflow-y: auto;
 }
 
 .card-chain-blocks {
-    height: auto;
-    [class*="col-"]:last-child {
-        .tile {
-            margin-bottom: 0;
-        }
+  height: auto;
+
+  [class*="col-"]:last-child {
+    .tile {
+      margin-bottom: 0;
     }
+  }
 }
 
 .card-chain-transactions {
-    height: auto;
-    .tile {
-        margin-bottom: 0;
-    }
+  height: auto;
+
+  .tile {
+    margin-bottom: 0;
+  }
 }
 
 .card-tabs {
-    align-items: center;
-    border-top-left-radius: $card-default-border-radius;
-    border-top-right-radius: $card-default-border-radius;
-    border-bottom: 1px solid $base-border-color;
-    display: flex;
-    justify-content: flex-start;
-    overflow: hidden;
-    @include media-breakpoint-down(md) {
-        flex-direction: column;
-    }
+  align-items: center;
+  border-top-left-radius: $card-default-border-radius;
+  border-top-right-radius: $card-default-border-radius;
+  border-bottom: 1px solid $base-border-color;
+  display: flex;
+  justify-content: flex-start;
+  overflow: hidden;
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+  }
 }
 
 .card-tab {
-    align-items: center;
-    background-color: $card-background-color;
-    color: #333;
-    cursor: pointer;
-    display: flex;
-    font-size: 14px;
-    font-weight: normal;
-    height: 70px;
-    padding: 0 25px;
-    text-align: center;
-    transition: $transition-cont;
-    &:hover {
-        background-color: rgba($card-tab-active, .15);
-        color: $card-tab-active;
-        text-decoration: none;
+  align-items: center;
+  background-color: $card-background-color;
+  color: #333;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-weight: normal;
+  height: 70px;
+  padding: 0 25px;
+  text-align: center;
+  transition: $transition-cont;
+
+  &:hover {
+    background-color: rgba($card-tab-active, .15);
+    color: $card-tab-active;
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-down(md) {
+    display: none;
+    width: 100%;
+  }
+
+  .fa-check-circle {
+    color: $card-tab-icon-color;
+    margin-left: 6px;
+  }
+
+  &.active {
+    background-color: $card-tab-active;
+    color: #fff;
+    cursor: default;
+    text-decoration: none;
+
+    .fa-check-circle {
+      color: $card-tab-icon-color-active;
     }
+
     @include media-breakpoint-down(md) {
+      cursor: pointer;
+      display: flex;
+      order: -1;
+
+      &::after {
+        border-bottom: 0;
+        border-left: 0.3em solid transparent;
+        border-right: 0.3em solid transparent;
+        border-top: 0.3em solid;
+        content: "";
+        display: inline-block;
+        height: 0;
+        margin-left: 10px;
+        width: 0;
+      }
+
+      &.noCaret::after {
         display: none;
-        width: 100%;
-    }
-    .fa-check-circle {
-        color: $card-tab-icon-color;
-        margin-left: 6px;
-    }
-    &.active {
-        background-color: $card-tab-active;
-        color: #fff;
-        cursor: default;
-        text-decoration: none;
-        .fa-check-circle {
-            color: $card-tab-icon-color-active;
-        }
-        @include media-breakpoint-down(md) {
-            cursor: pointer;
-            display: flex;
-            order: -1;
-            &::after {
-                border-bottom: 0;
-                border-left: 0.3em solid transparent;
-                border-right: 0.3em solid transparent;
-                border-top: 0.3em solid;
-                content: "";
-                display: inline-block;
-                height: 0;
-                margin-left: 10px;
-                width: 0;
-            }
-            &.noCaret::after {
-                display: none;
-            }
-        }
+      }
     }
+  }
 }
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex
index 42bfb43986..a621a00c03 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex
@@ -7,29 +7,33 @@
           <h1 class="card-title" data-test="detail_type">
             <%= gettext("%{block_type} Details", block_type: block_type(@block)) %>
           </h1>
-          <!-- Block Height -->     
-          <h3 class="block-detail-number" data-test="block_detail_number" data-toggle="tooltip" data-placement="top"  title="" data-original-title="The block number in which transactions were recorded.">     
-            <%= if block_type(@block) == "Block" do %>    
+          <!-- Block Height -->
+          <h3 class="block-detail-number" data-test="block_detail_number" data-toggle="tooltip" data-placement="top"  title="" data-original-title="The block number in which transactions were recorded.">
+            <%= if block_type(@block) == "Block" do %>
               <%= gettext("Block Height: %{height}", height: @block.number) %> <%= if @block.number == 0, do: "- " <> gettext("Genesis Block")%>
             <% else %>
               <%= gettext("%{block_type} Height:", block_type: block_type(@block)) %>
               <%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %>
-            <% end %>     
+            <% end %>
           </h3>
           <div class="d-flex justify-content-start text-muted block-details-row">
             <!-- # of Transactions -->
             <span class="mr-4 block-detail-el"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span>
+
             <%= if @block.size do %>
             <!-- Block Size -->
               <span class="mr-4 block-detail-el"> <%= Cldr.Unit.new(:byte, @block.size) |> cldr_unit_to_string!() %> </span>
             <% end %>
+
             <!-- Block Age -->
             <span class="mr-4 block-detail-el" data-from-now="<%= @block.timestamp %>"></span>
           </div>
+
           <hr>
           <!-- Block details description list -->
+
           <!-- Block Hash -->
-          <dl class="row">               
+          <dl class="row">
             <dt class="col-sm-3 text-muted"><%= gettext "Hash" %></dt>            
             <dd class="col-sm-9"><a class="transaction__link"  data-toggle="tooltip" data-placement="top"  title="" data-original-title="The SHA256 hash of the block."><%= to_string(@block.hash) %></a></dd>
           </dl>
@@ -91,6 +95,7 @@
                 </dd>
               </dl>
             <% end %>
+
             <!-- Otherwise it will be displayed in its own block -->
             <%= if show_reward?(@block.rewards) do %>
               <dl class="row">
@@ -135,17 +140,13 @@
       </div>
 
       <!-- Validator Reward or Gas-->
-      <div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0" >
+      <div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0">
         <div class="card-body card-body-flex-column-space-between">
-        
           <%= if show_reward?(@block.rewards) do %>
             <h2 class="card-title balance-card-title"><%= gettext "Block Rewards" %></h2>
             <div class="text-right" style="margin-left: 50%;" data-toggle="tooltip" data-placement="top" title="" data-original-title="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees.">
-                            
               <%= for block_reward <- @block.rewards do %>
-            
                 <p class="address-current-balance "><%= block_reward_text(block_reward) %> <span class="text-muted"><%= format_wei_value(block_reward.reward, :ether) %></span></p>
-                
               <% end %>
             </div>
           <% else %>