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; |
||||
$secondary: #a2daff; |
||||
$tertiary: #006aa7; |
||||
// general |
||||
$primary: #153550; |
||||
$secondary: #38a9f5; |
||||
$tertiary: #76f1ff; |
||||
$additional-font: #89cae6; |
||||
|
||||
// footer |
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-text-color: #89cae6; |
||||
$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"> |
||||
<div class="card"> |
||||
<div class="card-body"> |
||||
<%= if @next_page_path do %> |
||||
<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"><%= gettext "Addresses" %></h1> |
||||
|
||||
<h1 class="card-title margin-bottom-0"><%= gettext "Addresses" %></h1> |
||||
<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> |
||||
<%= 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 %> |
||||
|
||||
<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 %> |
||||
<%= render "_tile.html", |
||||
address: address, index: index, exchange_rate: @exchange_rate, |
||||
total_supply: @total_supply, tx_count: tx_count, |
||||
validation_count: validation_count(address) %> |
||||
<% end %> |
||||
<br> |
||||
<%= if @next_page_path do %> |
||||
<a href="<%= "#{@next_page_path}" %>" class="button button-secondary button-small float-right mt-0 mb-0 ml-1"> |
||||
<%= 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> |
||||
|
||||
<%= 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 %> |
||||
</div> |
||||
</div> |
||||
</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