From 4635c152b31ed96c50ecadeedaeb57aa7e3370b5 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Fri, 10 May 2019 16:15:25 -0300 Subject: [PATCH 01/18] (add) new pagination component for accounts section --- apps/block_scout_web/assets/css/app.scss | 2 +- .../assets/css/components/_pagination.scss | 42 -------- .../css/components/_pagination_container.scss | 98 +++++++++++++++++++ .../templates/address/index.html.eex | 28 +----- .../common_components/_pagination.html.eex | 9 -- .../_pagination_container.html.eex | 52 ++++++++++ 6 files changed, 156 insertions(+), 75 deletions(-) delete mode 100644 apps/block_scout_web/assets/css/components/_pagination.scss create mode 100644 apps/block_scout_web/assets/css/components/_pagination_container.scss delete mode 100644 apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index 990583ecdf..567f3b0abf 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -69,7 +69,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/panels"; @import "components/nav_tabs"; @import "components/dot"; -@import "components/pagination"; +@import "components/pagination_container"; @import "components/address_link"; @import "components/footer"; @import "components/filter"; diff --git a/apps/block_scout_web/assets/css/components/_pagination.scss b/apps/block_scout_web/assets/css/components/_pagination.scss deleted file mode 100644 index b044e004bf..0000000000 --- a/apps/block_scout_web/assets/css/components/_pagination.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/apps/block_scout_web/assets/css/components/_pagination_container.scss b/apps/block_scout_web/assets/css/components/_pagination_container.scss new file mode 100644 index 0000000000..0ff6d96335 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_pagination_container.scss @@ -0,0 +1,98 @@ +$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; + + &.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; + + select { + margin: 0 10px; + } + } + + .pagination { + margin: 0 0 0 auto; + padding: 0; + + .page-item { + margin: 0 10px 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 10px; + position: relative; + user-select: none; + + &: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; + } + } + } + +} \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex index fca5d5b50d..7a0c24a5d7 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex @@ -1,16 +1,7 @@
- <%= if @next_page_path do %> - " class="button button-secondary button-small float-right ml-1"> - <%= gettext("Next") %> - - <% end %> - <%= if @prev_page_path do %> - " class="button button-secondary button-small float-right"> - <%= gettext("Back") %> - - <% end %> + <%= 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 %>

<%= gettext "Addresses" %>

@@ -23,25 +14,16 @@ <%= Cldr.Number.to_string!(@cur_page_number, format: "#,###)") %>

- +
<%= 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 %> -
- <%= if @next_page_path do %> - " class="button button-secondary button-small float-right mt-0 mb-0 ml-1"> - <%= gettext("Next") %> - - <% end %> - <%= if @prev_page_path do %> - " class="button button-secondary button-small float-right mt-0 mb-0"> - <%= gettext("Back") %> - - <% end %> - +
+ + <%= 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 %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination.html.eex deleted file mode 100644 index 84ab89ee80..0000000000 --- a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination.html.eex +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex new file mode 100644 index 0000000000..18db2182ed --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex @@ -0,0 +1,52 @@ +
+ <%= if assigns[:show_pagination_limit] do %> +
+ Show + + records +
+ <%= end %> + +
\ No newline at end of file From cee0d68d2b41224b079b6ec4c3d437759e516b7e Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Fri, 10 May 2019 16:31:30 -0300 Subject: [PATCH 02/18] (add) pagination component to transactions and blocks sections. --- .../assets/css/components/_card.scss | 2 +- .../css/components/_pagination_container.scss | 14 ++++++++++++-- .../templates/address/index.html.eex | 4 ++-- .../templates/block/index.html.eex | 18 ++++++++++++++---- .../pending_transaction/index.html.eex | 9 +++++++++ .../templates/transaction/index.html.eex | 7 +++++++ 6 files changed, 45 insertions(+), 9 deletions(-) diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss index 2e2cba08a9..4c34e4a31b 100644 --- a/apps/block_scout_web/assets/css/components/_card.scss +++ b/apps/block_scout_web/assets/css/components/_card.scss @@ -67,7 +67,7 @@ $card-background-1-text-color: #fff !default; } .card-subtitle { - color: #aaa; + color: #333; font-size: 12px; font-weight: normal; line-height: 1.2; diff --git a/apps/block_scout_web/assets/css/components/_pagination_container.scss b/apps/block_scout_web/assets/css/components/_pagination_container.scss index 0ff6d96335..a97b338c29 100644 --- a/apps/block_scout_web/assets/css/components/_pagination_container.scss +++ b/apps/block_scout_web/assets/css/components/_pagination_container.scss @@ -17,6 +17,10 @@ $pagination-page-link-color-active: #fff !default; display: flex; justify-content: space-between; + @include media-breakpoint-down(sm) { + flex-direction: column; + } + &.position-bottom { padding-top: 30px; } @@ -33,6 +37,10 @@ $pagination-page-link-color-active: #fff !default; font-weight: 600; line-height: 1.2; + @include media-breakpoint-down(sm) { + margin-bottom: 15px; + } + select { margin: 0 10px; } @@ -43,7 +51,7 @@ $pagination-page-link-color-active: #fff !default; padding: 0; .page-item { - margin: 0 10px 0 0; + margin: 0 5px 0 0; &:last-child { margin-right: 0; @@ -69,9 +77,11 @@ $pagination-page-link-color-active: #fff !default; font-weight: 600; height: 24px; margin: 0; - padding: 0 10px; + 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); diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex index 7a0c24a5d7..080102d2c9 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex @@ -1,8 +1,6 @@
- <%= 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 %> -

<%= gettext "Addresses" %>

<%= gettext "Showing " %> @@ -14,6 +12,8 @@ <%= Cldr.Number.to_string!(@cur_page_number, format: "#,###)") %>

+ <%= 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 %> +
<%= for {{address, tx_count}, index} <- Enum.with_index(@address_tx_count_pairs, 1) do %> <%= render "_tile.html", diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex index 3a832e45a0..43941ca359 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex @@ -6,7 +6,11 @@ <%= gettext "Connection Lost, click to load newer blocks" %>
+

<%= gettext("%{block_type}s", block_type: @block_type) %>

+ + <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %> +
- + + <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %> + + + +
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex index cbd3b28eca..361d459179 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex @@ -7,6 +7,9 @@ <%= Cldr.Number.to_string!(@pending_transaction_count, format: "#,###") %> <%= gettext("Pending Transactions") %>

+ + <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %> +
<%= gettext "More transactions have come in" %> @@ -33,9 +36,15 @@ <%= gettext("Loading") %>...
+ + <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %> + + +