Ayrat Badykov
6 years ago
committed by
GitHub
commit
45ad353e22
@ -1,42 +0,0 @@ |
|||||||
$pagination-page-link-background: #f5f6fa !default; |
|
||||||
$pagination-page-link-color: #a3a9b5 !default; |
|
||||||
$pagination-page-link-background-active: $primary !default; |
|
||||||
$pagination-page-link-color-active: #fff !default; |
|
||||||
|
|
||||||
.pagination { |
|
||||||
margin: 0; |
|
||||||
padding: 30px; |
|
||||||
|
|
||||||
.page-item { |
|
||||||
margin: 0 10px 0 0; |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.page-link { |
|
||||||
background-color: $pagination-page-link-background; |
|
||||||
border: 1px solid $pagination-page-link-background; |
|
||||||
color: $pagination-page-link-color; |
|
||||||
display: block; |
|
||||||
line-height: 1.25; |
|
||||||
margin: 0; |
|
||||||
padding: 0.5rem 0.75rem; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
background-color: darken($pagination-page-link-background, 5%); |
|
||||||
border-color: darken($pagination-page-link-background, 5%); |
|
||||||
} |
|
||||||
|
|
||||||
.active & { |
|
||||||
&, |
|
||||||
&:hover { |
|
||||||
background-color: $pagination-page-link-background-active; |
|
||||||
border-color: $pagination-page-link-background-active; |
|
||||||
color: $pagination-page-link-color-active; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,113 @@ |
|||||||
|
$pagination-page-link-background: #f5f6fa !default; |
||||||
|
$pagination-page-link-color: #a3a9b5 !default; |
||||||
|
$pagination-page-link-background-active: $primary !default; |
||||||
|
$pagination-page-link-color-active: #fff !default; |
||||||
|
|
||||||
|
@mixin pagination-container-base($background-color, $text-color) { |
||||||
|
background-color: $background-color; |
||||||
|
border: 1px solid $background-color; |
||||||
|
color: $text-color; |
||||||
|
|
||||||
|
path { |
||||||
|
fill: $text-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pagination-container { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) { |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
&.position-bottom { |
||||||
|
padding-top: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
&.position-top { |
||||||
|
padding-bottom: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.pagination-limit { |
||||||
|
align-items: center; |
||||||
|
color: #033333; |
||||||
|
display: flex; |
||||||
|
font-size: 12px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 1.2; |
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) { |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
select { |
||||||
|
margin: 0 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin: 0 0 0 auto; |
||||||
|
padding: 0; |
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) { |
||||||
|
justify-content: space-between; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.page-item { |
||||||
|
margin: 0 5px 0 0; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&.active .page-link { |
||||||
|
@include pagination-container-base($pagination-page-link-background-active, $pagination-page-link-color-active); |
||||||
|
cursor: default; |
||||||
|
pointer-events: none; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
@include pagination-container-base($pagination-page-link-background-active, $pagination-page-link-color-active); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.page-link { |
||||||
|
@include pagination-container-base($pagination-page-link-background, $pagination-page-link-color); |
||||||
|
align-items: center; |
||||||
|
border-radius: 2px; |
||||||
|
display: flex; |
||||||
|
font-size: 12px; |
||||||
|
font-weight: 600; |
||||||
|
height: 24px; |
||||||
|
margin: 0; |
||||||
|
padding: 0 8px; |
||||||
|
position: relative; |
||||||
|
user-select: none; |
||||||
|
text-align: center; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
&:not(.no-hover):hover { |
||||||
|
@include pagination-container-base($pagination-page-link-background-active, $pagination-page-link-color-active); |
||||||
|
} |
||||||
|
|
||||||
|
&[href=''] { |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
&.no-hover { |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
&[disabled] { |
||||||
|
@include pagination-container-base($pagination-page-link-background, $pagination-page-link-color); |
||||||
|
cursor: not-allowed; |
||||||
|
opacity: 0.4; |
||||||
|
outline: none; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -1,8 +1,50 @@ |
|||||||
$primary: #2fa8f8; |
// general |
||||||
$secondary: #a2daff; |
$primary: #153550; |
||||||
$tertiary: #006aa7; |
$secondary: #38a9f5; |
||||||
|
$tertiary: #76f1ff; |
||||||
|
$additional-font: #89cae6; |
||||||
|
|
||||||
|
// footer |
||||||
$footer-background-color: $primary; |
$footer-background-color: $primary; |
||||||
$footer-title-color: #fff; |
$footer-title-color: #fff; |
||||||
$footer-text-color: #fff; |
$footer-text-color: #89cae6; |
||||||
$footer-item-disc-color: $secondary; |
$footer-item-disc-color: $secondary; |
||||||
|
.footer-logo { filter: brightness(0) invert(1); } |
||||||
|
|
||||||
|
// dashboard |
||||||
|
$dashboard-line-color-price: $tertiary; // price left border |
||||||
|
|
||||||
|
$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels |
||||||
|
|
||||||
|
$dashboard-stats-item-value-color: $additional-font; // stat values |
||||||
|
|
||||||
|
$dashboard-stats-item-border-color: $tertiary; // stat border |
||||||
|
|
||||||
|
$dashboard-banner-gradient-start: $primary; // gradient begin |
||||||
|
|
||||||
|
$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end |
||||||
|
|
||||||
|
$dashboard-banner-network-plain-container-background-color: #1c476c; // stats bg |
||||||
|
|
||||||
|
|
||||||
|
// navigation |
||||||
|
.navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow |
||||||
|
$header-icon-border-color-hover: $secondary; // top border on hover |
||||||
|
$header-icon-color-hover: $secondary; // nav icon on hover |
||||||
|
.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover |
||||||
|
|
||||||
|
// buttons |
||||||
|
$btn-line-bg: #fff; // button bg |
||||||
|
$btn-line-color: $secondary; // button border and font color && hover bg color |
||||||
|
$btn-copy-color: $secondary; // btn copy |
||||||
|
$btn-qr-color: $secondary; // btn qr-code |
||||||
|
|
||||||
|
//links & tile |
||||||
|
.tile a { color: $secondary !important; } // links color for badges |
||||||
|
.tile-type-block { |
||||||
|
border-left: 4px solid $secondary; |
||||||
|
} // tab active bg |
||||||
|
|
||||||
|
// card |
||||||
|
$card-background-1: $secondary; |
||||||
|
$card-tab-active: $secondary; |
||||||
|
|||||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 5.5 KiB |
@ -1,47 +1,20 @@ |
|||||||
<section class="container"> |
<section class="container"> |
||||||
<div class="card"> |
<div class="card"> |
||||||
<div class="card-body"> |
<div class="card-body"> |
||||||
<%= if @next_page_path do %> |
<h1 class="card-title"><%= gettext "Addresses" %></h1> |
||||||
<a href="<%= "#{@next_page_path}" %>" class="button button-secondary button-small float-right ml-1"> |
|
||||||
<%= gettext("Next") %> |
|
||||||
</a> |
|
||||||
<% end %> |
|
||||||
<%= if @prev_page_path do %> |
|
||||||
<a href="<%= "#{@prev_page_path}" %>" class="button button-secondary button-small float-right"> |
|
||||||
<%= gettext("Back") %> |
|
||||||
</a> |
|
||||||
<% end %> |
|
||||||
|
|
||||||
<h1 class="card-title margin-bottom-0"><%= gettext "Addresses" %></h1> |
<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: @prev_page_path, next_page_path: @next_page_path, cur_page_number: @cur_page_number, show_pagination_limit: true %> |
||||||
<p class="card-subtitle"> |
|
||||||
<%= gettext "Showing " %> |
|
||||||
<%= Cldr.Number.to_string!(@page_address_count, format: "#,###") %> |
|
||||||
<%= gettext " addresses of" %> |
|
||||||
<%= Cldr.Number.to_string!(@address_count, format: "#,###") %> |
|
||||||
<%= gettext "total addresses with a balance" %> |
|
||||||
<%= gettext " (page" %> |
|
||||||
<%= Cldr.Number.to_string!(@cur_page_number, format: "#,###)") %> |
|
||||||
</p> |
|
||||||
|
|
||||||
<span data-selector="top-addresses-list"> |
<div data-selector="top-addresses-list"> |
||||||
<%= for {{address, tx_count}, index} <- Enum.with_index(@address_tx_count_pairs, 1) do %> |
<%= for {{address, tx_count}, index} <- Enum.with_index(@address_tx_count_pairs, 1) do %> |
||||||
<%= render "_tile.html", |
<%= render "_tile.html", |
||||||
address: address, index: index, exchange_rate: @exchange_rate, |
address: address, index: index, exchange_rate: @exchange_rate, |
||||||
total_supply: @total_supply, tx_count: tx_count, |
total_supply: @total_supply, tx_count: tx_count, |
||||||
validation_count: validation_count(address) %> |
validation_count: validation_count(address) %> |
||||||
<% end %> |
<% end %> |
||||||
<br> |
</div> |
||||||
<%= if @next_page_path do %> |
|
||||||
<a href="<%= "#{@next_page_path}" %>" class="button button-secondary button-small float-right mt-0 mb-0 ml-1"> |
<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: @prev_page_path, next_page_path: @next_page_path, cur_page_number: @cur_page_number, show_pagination_limit: true %> |
||||||
<%= gettext("Next") %> |
|
||||||
</a> |
|
||||||
<% end %> |
|
||||||
<%= if @prev_page_path do %> |
|
||||||
<a href="<%= "#{@prev_page_path}" %>" class="button button-secondary button-small float-right mt-0 mb-0"> |
|
||||||
<%= gettext("Back") %> |
|
||||||
</a> |
|
||||||
<% end %> |
|
||||||
</span> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</section> |
</section> |
||||||
|
|||||||
@ -1,9 +0,0 @@ |
|||||||
<ul class="pagination"> |
|
||||||
<li class="page-item"><a class="page-link" href="#"><</a></li> |
|
||||||
<li class="page-item active"><a class="page-link" href="#">1</a></li> |
|
||||||
<li class="page-item"><a class="page-link" href="#">2</a></li> |
|
||||||
<li class="page-item"><a class="page-link" href="#">3</a></li> |
|
||||||
<li class="page-item"><a class="page-link" href="#">...</a></li> |
|
||||||
<li class="page-item"><a class="page-link" href="#">12</a></li> |
|
||||||
<li class="page-item"><a class="page-link" href="#">></a></li> |
|
||||||
</ul> |
|
||||||
@ -0,0 +1,60 @@ |
|||||||
|
<div class='pagination-container <%= if assigns[:position] == "top" do %>position-top<% end %> <%= if assigns[:position] == "bottom" do %>position-bottom<% end %>'> |
||||||
|
<%= if assigns[:show_pagination_limit] do %> |
||||||
|
<!-- Pagination limit --> |
||||||
|
<div class="pagination-limit"> |
||||||
|
<%= gettext "Show" %> |
||||||
|
<select> |
||||||
|
<option>20</option> |
||||||
|
<option>50</option> |
||||||
|
<option>100</option> |
||||||
|
</select> |
||||||
|
<%= gettext "Records" %> |
||||||
|
</div> |
||||||
|
<% end %> |
||||||
|
<!-- Pagination --> |
||||||
|
<ul class="pagination"> |
||||||
|
<!-- First --> |
||||||
|
<li class="page-item"> |
||||||
|
<a |
||||||
|
<%= if !assigns[:first_page_path] do %>disabled<% end %> |
||||||
|
class="page-link" |
||||||
|
href='<%= "#{assigns[:first_page_path]}" %>' |
||||||
|
>First</a> |
||||||
|
</li> |
||||||
|
<!-- Previous --> |
||||||
|
<li class="page-item"> |
||||||
|
<a |
||||||
|
<%= if !assigns[:prev_page_path] do %>disabled<% end %> |
||||||
|
class="page-link" |
||||||
|
href='<%= "#{assigns[:prev_page_path]}" %>' |
||||||
|
> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10"> |
||||||
|
<path fill-rule="evenodd" d="M2.358 5l3.357 3.358a.959.959 0 1 1-1.357 1.357L.502 5.859c-.076-.042-.153-.08-.217-.144A.949.949 0 0 1 .011 5a.949.949 0 0 1 .274-.715c.064-.064.142-.102.217-.145L4.358.285a.959.959 0 1 1 1.357 1.357L2.358 5z"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<!-- Page X of XX --> |
||||||
|
<li class="page-item"><a class="page-link no-hover" href><%= gettext "Page" %> <%= assigns[:cur_page_number] || "" %> <% if assigns[:total_pages_number] do %> <%= gettext "of" %> <%= assigns[:total_pages_number] || "undefined" %><% end %></a></li> |
||||||
|
<!-- Next --> |
||||||
|
<li class="page-item"> |
||||||
|
<a |
||||||
|
<%= if !assigns[:next_page_path] do %>disabled<% end %> |
||||||
|
class="page-link" |
||||||
|
href='<%= "#{assigns[:next_page_path]}" %>' |
||||||
|
<%= if assigns[:data_next_page_button] do %>data-next-page-button<% end %> |
||||||
|
> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10"> |
||||||
|
<path fill-rule="evenodd" d="M5.715 5.715c-.064.064-.141.102-.217.144L1.642 9.715A.959.959 0 1 1 .285 8.358L3.642 5 .285 1.642A.959.959 0 1 1 1.642.285L5.498 4.14c.075.043.153.081.217.145A.949.949 0 0 1 5.989 5a.949.949 0 0 1-.274.715z"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<!-- Last --> |
||||||
|
<li class="page-item"> |
||||||
|
<a |
||||||
|
<%= if !assigns[:last_page_path] do %>disabled<% end %> |
||||||
|
class="page-link" |
||||||
|
href='<%= "#{assigns[:last_page_path]}" %>' |
||||||
|
>Last</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
Loading…
Reference in new issue