Fix issues in Staking DApp related to pool filters (#2730)

* Fix disappearing pagination on pools filter toggle

* Wrap stakes table items in container to set minimum heigh

* Reduce flickering of content on changing pools table height
staking
Eduard Sachava 5 years ago committed by Victor Baranov
parent 8701d67acc
commit 6bfa17c357
  1. 2
      apps/block_scout_web/assets/css/components/_card.scss
  2. 4
      apps/block_scout_web/assets/css/components/_stakes_table.scss
  3. 2
      apps/block_scout_web/assets/css/components/stakes/_stakes_empty_content.scss
  4. 8
      apps/block_scout_web/assets/js/lib/async_listing_load.js
  5. 15
      apps/block_scout_web/lib/block_scout_web/templates/stakes/_table.html.eex

@ -118,6 +118,7 @@ $card-tab-icon-color-active: #fff !default;
padding: 0px $card-horizontal-padding; padding: 0px $card-horizontal-padding;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
min-height: 54px;
} }
.card-footer-paging { .card-footer-paging {
@ -125,6 +126,7 @@ $card-tab-icon-color-active: #fff !default;
padding-bottom: 25px; padding-bottom: 25px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
min-height: 80px;
} }
.card-title-controls { .card-title-controls {

@ -69,6 +69,10 @@ $stakes-link-color: $primary !default;
width: 100%; width: 100%;
} }
.stakes-table-body {
min-height: 311px;
}
.stakes-table-th { .stakes-table-th {
background-color: $stakes-table-th-background; background-color: $stakes-table-th-background;
color: #a3a9b5; color: #a3a9b5;

@ -1,7 +1,7 @@
.stakes-empty-content { .stakes-empty-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 100px 15px; padding: 100px 15px 20px;
} }
.stakes-empty-content-pic { .stakes-empty-content-pic {

@ -185,6 +185,7 @@ export const elements = {
return $el.hide() return $el.hide()
} }
$el.show()
if (state.requestError || !state.nextPagePath || state.loading) { if (state.requestError || !state.nextPagePath || state.loading) {
return $el.attr('disabled', 'disabled') return $el.attr('disabled', 'disabled')
} }
@ -199,6 +200,7 @@ export const elements = {
return $el.hide() return $el.hide()
} }
$el.show()
if (state.requestError || !state.prevPagePath || state.loading) { if (state.requestError || !state.prevPagePath || state.loading) {
return $el.attr('disabled', 'disabled') return $el.attr('disabled', 'disabled')
} }
@ -212,13 +214,14 @@ export const elements = {
if (state.pagesStack.length === 0) { if (state.pagesStack.length === 0) {
return $el.hide() return $el.hide()
} }
$el.show()
$el.attr('disabled', false)
const urlParams = new URLSearchParams(window.location.search) const urlParams = new URLSearchParams(window.location.search)
const blockParam = urlParams.get('block_type') const blockParam = urlParams.get('block_type')
const firstPageHref = window.location.href.split('?')[0] const firstPageHref = window.location.href.split('?')[0]
$el.show()
$el.attr('disabled', false)
if (blockParam !== null) { if (blockParam !== null) {
$el.attr('href', firstPageHref + '?block_type=' + blockParam) $el.attr('href', firstPageHref + '?block_type=' + blockParam)
} else { } else {
@ -232,6 +235,7 @@ export const elements = {
return $el.hide() return $el.hide()
} }
$el.show()
if (state.pagesStack.length === 0) { if (state.pagesStack.length === 0) {
return $el.text('Page 1') return $el.text('Page 1')
} }

@ -19,14 +19,15 @@
</div> </div>
<div class="col-3"></div> <div class="col-3"></div>
</div> </div>
<div class="stakes-table-body">
<button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
<span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>
</button>
<button data-error-message class="alert alert-danger col-12 text-left" style="display: none;"> <div data-empty-response-message style="display: none;">
<span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span> <%= render BlockScoutWeb.StakesView, "_stakes_empty_content.html" %>
</button> </div>
<div data-empty-response-message style="display: none;"> <div data-items></div>
<%= render BlockScoutWeb.StakesView, "_stakes_empty_content.html" %>
</div> </div>
<div data-items></div>
</div> </div>

Loading…
Cancel
Save