Merge pull request #2291 from maxgrapps/master

Dashboard fix for md resolution, transactions load fix, block info row fix, address page issues, check mark issue

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Features
 
 ### Fixes
+- [#2291](https://github.com/poanetwork/blockscout/pull/2291) - dashboard fix for md resolution, transactions load fix, block info row fix, addresses page issue, check mark issue
 
 ### Chore
 - [#2289](https://github.com/poanetwork/blockscout/pull/2289) - Optional websockets for dev environment

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

@@ -6,7 +6,7 @@ $card-vertical-padding: 30px;
 $card-background-1: $primary !default;
 $card-background-1-text-color: #fff !default;
 $card-tab-icon-color: #20b760 !default;
-$card-tab-icon-color-active: #20b760 !default;
+$card-tab-icon-color-active: #fff !default;
 
 .card {
   background-color: $card-background-color;
@@ -14,6 +14,21 @@ $card-tab-icon-color-active: #20b760 !default;
   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) {
+          margin-top: 6px;
+        }
+      }
+    }
+  }
 }
 
 .card-background-1 {

apps/block_scout_web/assets/css/components/_dashboard-banner.scss

@@ -146,6 +146,11 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   width: 750px;
   position: relative;
 
+  @include media-breakpoint-down(lg) {
+    margin-top: 15px;
+    width: 550px;
+  }
+
   @include media-breakpoint-down(md) {
     border-top-right-radius: 10px;
     height: auto;
@@ -157,10 +162,6 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
     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%;
   }
@@ -189,6 +190,11 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
 
+  @include media-breakpoint-down(lg) {
+    grid-template-columns: 1fr 1fr;
+    row-gap: 20px;
+  }
+
   @include media-breakpoint-down(md) {
     grid-template-columns: 1fr;
     row-gap: 20px;

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

@@ -7,6 +7,25 @@ $stakes-table-cell-separation: 25px !default;
   width: 100%;
 }
 
+.addresses-table-container {
+  margin-left: -30px;
+  margin-right: -30px;
+  .stakes-table-container {
+    table {
+      width: 100%;
+      th:first-child {
+        padding-left: 25px;
+      }
+      td:first-child {
+        padding-left: 25px;
+      }
+    }
+  }
+  .color-lighten {
+    color: #828ba0;
+  }
+}
+
 .stakes-table {
   min-width: fit-content;
   width: 100%;

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

@@ -272,6 +272,7 @@ $tile-body-a-color: #5959d8 !default;
   }
 
   &.tile-type-block {
+    max-width: 100%;
     .tile-title {
       font-weight: 700;
       line-height: 1.2;
@@ -330,3 +331,23 @@ $tile-body-a-color: #5959d8 !default;
     }
   }
 }
+
+.card-chain-blocks {
+  .card-body {
+    .col-lg-3 {
+      @include media-breakpoint-down(lg) {
+        padding-left: 6px;
+        padding-right: 6px;
+      }
+      .tile-type-block {
+        overflow: hidden;
+      }
+    }
+    .row {
+      @include media-breakpoint-down(lg) {
+        margin-left: -6px;
+        margin-right: -6px;
+      }
+    }
+  }
+}

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

@@ -1,35 +1,15 @@
-<div class="tile">
+<tr>
-  <div class="row">
+  <td class="stakes-td">
-    <!-- rank -->
-    <div class="col-2 col-md-1 d-flex justify-content-center align-items-center">
       <!-- incremented number by order in the list -->
-      <span>
+      <span class="color-lighten">
         <%= @index %>
       </span>
-    </div>
+  </td>
-
+  <td class="stakes-td">
-    <div class="col-10 col-md-11">
-      <div class="row">
-        <div class="col-md-6 d-flex flex-column">
     <%= @address |> BlockScoutWeb.AddressView.address_partial_selector(nil, nil) |> BlockScoutWeb.RenderHelpers.render_partial() %>
-          <!-- number of txns for this address -->
+  </td>
-          <span class="mr-4">
+  <td class="stakes-td">
-            <span data-test="transaction_count">
+    <span data-test="address_balance"><%= balance(@address) %></span>
-              <%= @tx_count %>
-            </span> <%= gettext "Transactions sent" %>
-            <% if validator?(@address) do %>
-              <span data-test="validation_count">
-                <%= @validation_count %>
-              </span> <%= gettext "Validations" %>
-            <% end %>
-          </span>
-        </div>
-
-        <!-- balance and percentage -->
-        <div class="col-md-6 d-flex flex-column text-md-right mt-3 mt-md-0">
-          <!-- address coin balance -->
-          <span class="tile-title" data-test="address_balance"><%= balance(@address) %></span>
-          <div class="d-flex flex-column flex-md-row justify-content-md-end">
     <!-- USD value of the balance -->
     <span
       data-wei-value="<%= if @address.fetched_coin_balance, do: @address.fetched_coin_balance.value %>"
@@ -37,15 +17,23 @@
         data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
       <% end %>
     </span>
+  </td>
+  <td class="stakes-td color-lighten">
     <!-- percentage of coins from total supply -->
-            <span class="ml-0 ml-md-2">
     <%= if @total_supply do %>
       (<%= balance_percentage(@address, @total_supply) %>)
     <% end %>
+  </td>
+  <td class="stakes-td">
+    <span class="mr-4">
+      <span data-test="transaction_count">
+        <%= @tx_count %>
+      </span> <%= gettext "Transactions sent" %>
+      <% if validator?(@address) do %>
+        <span data-test="validation_count">
+          <%= @validation_count %>
+        </span> <%= gettext "Validations" %>
+      <% end %>
     </span>
-          </div>
+  </td>
-        </div>
+</tr>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -5,7 +5,44 @@
 
     <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 	
-      <div data-items data-selector="top-addresses-list"></div>
+	<div class="addresses-table-container">
+		<div class="stakes-table-container">
+			<table>
+				<thead>
+					<tr>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								&nbsp;
+							</div>
+						</th>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								Address
+							</div>
+						</th>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								Balance
+							</div>
+						</th>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								Percentage
+							</div>
+						</th>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								Txn Count
+							</div>
+						</th>
+					</tr>
+				</thead>
+				<tbody data-items data-selector="top-addresses-list">
+					
+				</tbody>
+			</table>
+		</div>
+	</div>
     
     <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
     </div>

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

@@ -4,7 +4,7 @@
     <div class="card-section col-md-12 col-lg-8 pr-0-md">
       <div class="card">
         <div class="card-body">
-          <h1 class="card-title">
+          <h1 class="card-title lg-card-title">
             <%= address_title(@address) %> <%= gettext "Details" %>
             <!-- buttons -->
             <span class="overview-title-buttons float-right">

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

@@ -16,17 +16,17 @@
               <%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %>
             <% end %>
           </h3>
-          <div class="d-flex flex-row justify-content-start text-muted">
+          <div class="d-flex justify-content-start text-muted block-details-row">
             <!-- # of Transactions -->
-            <span class="mr-4"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span>
+            <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"> <%= Cldr.Unit.new(:byte, @block.size) |> cldr_unit_to_string!() %> </span>
+              <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" data-from-now="<%= @block.timestamp %>"></span>
+            <span class="mr-4 block-detail-el" data-from-now="<%= @block.timestamp %>"></span>
           </div>
 
           <hr>

apps/block_scout_web/priv/gettext/default.pot

@@ -877,7 +877,7 @@ msgid "Transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_tile.html.eex:19
+#: lib/block_scout_web/templates/address/_tile.html.eex:31
 msgid "Transactions sent"
 msgstr ""
 
@@ -923,7 +923,7 @@ msgid "Validated Transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_tile.html.eex:23
+#: lib/block_scout_web/templates/address/_tile.html.eex:35
 msgid "Validations"
 msgstr ""