CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2291 from maxgrapps/master

Browse Source 
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
parent d4bce47797 34ab07fcf7
commit 31d8560737
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 152 additions and 65 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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. 43
      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

1
CHANGELOG.md
Unescape View File

@ -3,6 +3,7 @@
### Features ### Features
### Fixes ### 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 ### Chore
- [#2289](https://github.com/poanetwork/blockscout/pull/2289) - Optional websockets for dev environment - [#2289](https://github.com/poanetwork/blockscout/pull/2289) - Optional websockets for dev environment

17
apps/block_scout_web/assets/css/components/_card.scss
Unescape View File

@ -6,7 +6,7 @@ $card-vertical-padding: 30px;
$card-background-1: $primary !default; $card-background-1: $primary !default;
$card-background-1-text-color: #fff !default; $card-background-1-text-color: #fff !default;
$card-tab-icon-color: #20b760 !default; $card-tab-icon-color: #20b760 !default;
$card-tab-icon-color-active: #20b760 !default; $card-tab-icon-color-active: #fff !default;
.card { .card {
background-color: $card-background-color; background-color: $card-background-color;
@ -14,6 +14,21 @@ $card-tab-icon-color-active: #20b760 !default;
border: none; border: none;
box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5); box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
margin-bottom: $common-container-margin; 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 { .card-background-1 {

14
apps/block_scout_web/assets/css/components/_dashboard-banner.scss
Unescape View File

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

19
apps/block_scout_web/assets/css/components/_stakes_table.scss
Unescape View File

@ -7,6 +7,25 @@ $stakes-table-cell-separation: 25px !default;
width: 100%; 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 { .stakes-table {
min-width: fit-content; min-width: fit-content;
width: 100%; width: 100%;

21
apps/block_scout_web/assets/css/components/_tile.scss
Unescape View File

@ -272,6 +272,7 @@ $tile-body-a-color: #5959d8 !default;
} }
&.tile-type-block { &.tile-type-block {
max-width: 100%;
.tile-title { .tile-title {
font-weight: 700; font-weight: 700;
line-height: 1.2; 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;
}
}
}
}

84
apps/block_scout_web/lib/block_scout_web/templates/address/_tile.html.eex
Unescape View File

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

43
apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex
Unescape View File

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

2
apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex
Unescape View File

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

8
apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex
Unescape View File

@ -16,17 +16,17 @@
<%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %> <%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %>
<% end %> <% end %>
</h3> </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 --> <!-- # 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 %> <%= if @block.size do %>
<!-- Block Size --> <!-- 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 %> <% end %>
<!-- Block Age --> <!-- 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> </div>
<hr> <hr>

4
apps/block_scout_web/priv/gettext/default.pot
Unescape View File

@ -877,7 +877,7 @@ msgid "Transactions"
msgstr "" msgstr ""
#, elixir-format #, 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" msgid "Transactions sent"
msgstr "" msgstr ""
@ -923,7 +923,7 @@ msgid "Validated Transactions"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/address/_tile.html.eex:23 #: lib/block_scout_web/templates/address/_tile.html.eex:35
msgid "Validations" msgid "Validations"
msgstr "" msgstr ""

Write Preview
Loading…
Cancel
Save