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
pull/2302/head
Victor Baranov 5 years ago committed by GitHub
commit 31d8560737
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      CHANGELOG.md
  2. 17
      apps/block_scout_web/assets/css/components/_card.scss
  3. 14
      apps/block_scout_web/assets/css/components/_dashboard-banner.scss
  4. 19
      apps/block_scout_web/assets/css/components/_stakes_table.scss
  5. 21
      apps/block_scout_web/assets/css/components/_tile.scss
  6. 84
      apps/block_scout_web/lib/block_scout_web/templates/address/_tile.html.eex
  7. 47
      apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex
  8. 2
      apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex
  9. 8
      apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex
  10. 4
      apps/block_scout_web/priv/gettext/default.pot

@ -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

@ -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 {

@ -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;

@ -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%;

@ -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;
}
}
}
}

@ -1,51 +1,39 @@
<div class="tile">
<div class="row">
<!-- rank -->
<div class="col-2 col-md-1 d-flex justify-content-center align-items-center">
<tr>
<td class="stakes-td">
<!-- incremented number by order in the list -->
<span>
<span class="color-lighten">
<%= @index %>
</span>
</div>
<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 -->
<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>
<!-- 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 %>"
<% if !empty_exchange_rate?(@exchange_rate) do %>
data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
<% end %>
</span>
<!-- percentage of coins from total supply -->
<span class="ml-0 ml-md-2">
<%= if @total_supply do %>
(<%= balance_percentage(@address, @total_supply) %>)
<% end %>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="stakes-td">
<%= @address |> BlockScoutWeb.AddressView.address_partial_selector(nil, nil) |> BlockScoutWeb.RenderHelpers.render_partial() %>
</td>
<td class="stakes-td">
<span data-test="address_balance"><%= balance(@address) %></span>
<!-- USD value of the balance -->
<span
data-wei-value="<%= if @address.fetched_coin_balance, do: @address.fetched_coin_balance.value %>"
<% if !empty_exchange_rate?(@exchange_rate) do %>
data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
<% end %>
</span>
</td>
<td class="stakes-td color-lighten">
<!-- percentage of coins from total supply -->
<%= 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>
</td>
</tr>

@ -3,11 +3,48 @@
<div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
<h1 class="card-title"><%= gettext "Addresses" %></h1>
<%= 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>
<%= 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 %>
<%= 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 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>
</div>
</section>

@ -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">

@ -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>

@ -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 ""

Loading…
Cancel
Save