Merge pull request #546 from poanetwork/mobile-live-update-fix

Mobile live update fix

apps/block_scout_web/assets/css/components/_animations.scss

@@ -41,6 +41,24 @@
   }
 }
 
+@keyframes fade-up--mobile {
+  0% {
+    height: 0;
+    opacity: 0;
+  }
+  25% {
+    opacity: 0;
+    transform: translateY(10px) scale(0.97);
+  }
+  50% {
+    height: 202px;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 .fade-in {
   animation: fade-in 1s ease-out forwards;
 }
@@ -49,10 +67,19 @@
   will-change: transform, opacity, width;
   max-height: 98px;
   animation: fade-up-blocks-chain 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+  @media (max-width: 767px) {
+    animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
 }
 
 .fade-up {
   will-change: transform, opacity, height;
   max-height: 98px;
   animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+  @media (max-width: 767px) {
+    max-height: 202px;
+    animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
 }

apps/block_scout_web/assets/css/components/_card.scss

@@ -26,3 +26,15 @@
   max-height: 400px;
   overflow-y: auto;
 }
+
+.card-chain-blocks {
+  height: auto;
+
+  @media (max-width: 767px) { height: 595px; }
+}
+
+.card-chain-transactions {
+  height: 694px;
+
+  @media (max-width: 767px) { height: 1231px; }
+}

apps/block_scout_web/assets/css/theme/_poa_variables.scss

@@ -44,14 +44,10 @@ $yellow:  #ffc107 !default;
 $green:   #20b760 !default;
 $teal:    #009097 !default;
 $cyan:    #90e1d8 !default;
-$ethcy:   #c79c6a !default;
-$ethbl:   #3c3c3d !default;
 
 $colors: () !default;
 $colors: map-merge((
   "blue":       $blue,
-  "bl":         $ethbl,
-  "org":        $ethcy,
   "indigo":     $indigo,
   "purple":     $purple,
   "pink":       $pink,
@@ -66,8 +62,8 @@ $colors: map-merge((
   "gray-dark":  $gray-800
 ), $colors);
 
-$primary:       $ethbl !default;
+$primary:       $indigo !default;
-$secondary:     $ethcy !default;
+$secondary:     $cyan !default;
 $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $orange !default;

apps/block_scout_web/lib/block_scout_web/templates/block/_tile.html.eex

@@ -1,6 +1,6 @@
 <div class="tile fade-up">
   <div class="row">
-    <div class="col-md-6">
+    <div class="col-md-8 col-lg-9">
       <!-- block height -->
       <%= link(
             @block,
@@ -19,7 +19,7 @@
         <!-- age -->
         <span data-from-now="<%= @block.timestamp %>"></span>
       </div>
-      <div class="">
+      <div class="text-nowrap text-truncate mt-3 mt-md-0">
         <!-- validator -->
         <%= gettext "Miner" %>
         <span class="ml-2">
@@ -29,20 +29,20 @@
         </span>
       </div>
     </div>
-    <div class="col-md-6 text-right d-flex flex-column align-items-end justify-content-end">
+    <div class="col-md-4 col-lg-3 text-md-right d-flex flex-column align-items-md-end justify-content-md-end mt-3 mt-md-0">
+      <!-- Gas Limit -->
+      <span> <%= formatted_gas(@block.gas_limit) %> <%= gettext "Gas Limit" %> </span>
       <!-- Gas Used -->
-      <div class="">
+      <div class="mr-3 mr-md-0">
         <%= formatted_gas(@block.gas_used) %>
         (<%= formatted_gas(@block.gas_used / @block.gas_limit, format: "#.#%") %>)
         <%= gettext "Gas Used" %>
       </div>
-      <div class="progress w-25">
+      <!-- Progress bar -->
+      <div class="progress w-100 mt-3 mt-md-0">
         <div class="progress-bar" role="progressbar" style="width: <%= formatted_gas(@block.gas_used / @block.gas_limit, format: "#.#%") %>;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-
         </div>
       </div>
-      <!-- Gas Limit -->
-      <span> <%= formatted_gas(@block.gas_limit) %> <%= gettext "Gas Limit" %> </span>
     </div>
   </div>
 </div>

apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex

@@ -2,8 +2,8 @@
   <div class="tile d-flex flex-column">
     <%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @locale, @block), class: "tile-title") %>
     <div>
-      <%= Enum.count(@block.transactions) %> Transactions
+      <span class="mr-2"> <%= Enum.count(@block.transactions) %> Transactions </span>
-      <span class="ml-2" data-from-now="<%= @block.timestamp %>"> </span>
+      <span class="text-nowrap" data-from-now="<%= @block.timestamp %>"> </span>
     </div>
     <span class="text-truncate">
       <%= gettext "Miner" %>

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -52,7 +52,7 @@
   </div>
 </div>
 <section class="container">
-  <div class="card">
+  <div class="card card-chain-blocks">
     <div class="card-body">
       <%= link(gettext("View All Blocks →"), to: block_path(BlockScoutWeb.Endpoint, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
       <h2 class="card-title"><%= gettext "Blocks" %></h2>
@@ -64,7 +64,7 @@
     </div>
   </div>
   <!-- We hardcoded the height on this element to keep the page from bouncing during the intro animation. -->
-  <div class="card" style="height: 694px;">
+  <div class="card card-chain-transactions">
     <div class="card-body">
       <div data-selector="channel-batching-message" style="display:none;">
         <div data-selector="reload-button" class="alert alert-info">

apps/block_scout_web/priv/gettext/default.pot

@@ -15,7 +15,7 @@ msgstr ""
 msgid "Copyright %{year} POA"
 msgstr ""
 
-#: lib/block_scout_web/templates/block/_tile.html.eex:37
+#: lib/block_scout_web/templates/block/_tile.html.eex:39
 #: lib/block_scout_web/templates/block/overview.html.eex:87
 msgid "Gas Used"
 msgstr ""
@@ -62,7 +62,7 @@ msgstr ""
 msgid "Difficulty"
 msgstr ""
 
-#: lib/block_scout_web/templates/block/_tile.html.eex:45
+#: lib/block_scout_web/templates/block/_tile.html.eex:34
 #: lib/block_scout_web/templates/block/overview.html.eex:95
 msgid "Gas Limit"
 msgstr ""

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -27,7 +27,7 @@ msgstr "Blocks"
 msgid "Copyright %{year} POA"
 msgstr "%{year} POA Network Ltd. All rights reserved"
 
-#: lib/block_scout_web/templates/block/_tile.html.eex:37
+#: lib/block_scout_web/templates/block/_tile.html.eex:39
 #: lib/block_scout_web/templates/block/overview.html.eex:87
 msgid "Gas Used"
 msgstr "Gas Used"
@@ -74,7 +74,7 @@ msgstr "Block #%{number} Details"
 msgid "Difficulty"
 msgstr "Difficulty"
 
-#: lib/block_scout_web/templates/block/_tile.html.eex:45
+#: lib/block_scout_web/templates/block/_tile.html.eex:34
 #: lib/block_scout_web/templates/block/overview.html.eex:95
 msgid "Gas Limit"
 msgstr "Gas Limit"

apps/explorer_web/assets/css/forms.scss

@@ -1,3 +0,0 @@
-.address-input-sm {
-  min-width: calc(42ch + (#{$input-padding-x-sm} * 2));
-}

apps/explorer_web/assets/js/lib/loading_element.js

@@ -1,8 +0,0 @@
-import $ from 'jquery'
-
-$('button[data-loading="animation"]').click(event => {
-  const clickedButton = $(event.target)
-
-  clickedButton.addClass('d-none')
-  $('#loading').removeClass('d-none')
-})