From fbc566458d2957a738297d651c7c5df551619b0a Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Wed, 3 Apr 2019 15:24:38 -0300 Subject: [PATCH] (add) responsive view - (add) banned row style - (add) several components --- apps/block_scout_web/assets/css/_mixins.scss | 12 ++++ apps/block_scout_web/assets/css/app.scss | 1 + .../assets/css/components/_i_tooltip.scss | 2 +- .../css/components/_progress_from_to.scss | 12 ++++ .../assets/css/components/_stakes.scss | 58 ++++++++++++++++++- .../components/_stakes_btn_remove_pool.scss | 21 +++++++ .../assets/css/components/_stakes_table.scss | 13 +++++ .../templates/active_pools/index.html.eex | 2 +- .../common_components/_btn_add_full.html.eex | 6 ++ .../common_components/_btn_add_line.html.eex | 6 ++ .../templates/inactive_pools/index.html.eex | 2 +- .../stakes/_stakes_btn_remove_pool.html.eex | 6 ++ .../stakes/_stakes_empty_content.html.eex | 7 +-- .../stakes/_stakes_stats_item.html.eex | 6 ++ .../_stakes_stats_item_account.html.eex | 33 +++++++++++ .../templates/stakes/_stakes_top.html.eex | 49 +++------------- .../templates/validators/index.html.eex | 2 +- 17 files changed, 183 insertions(+), 55 deletions(-) create mode 100644 apps/block_scout_web/assets/css/components/_stakes_btn_remove_pool.scss create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_full.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_line.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_remove_pool.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex diff --git a/apps/block_scout_web/assets/css/_mixins.scss b/apps/block_scout_web/assets/css/_mixins.scss index a2b4508b84..d5a9f2eef8 100644 --- a/apps/block_scout_web/assets/css/_mixins.scss +++ b/apps/block_scout_web/assets/css/_mixins.scss @@ -23,6 +23,9 @@ @mixin stats-item() { &-item { color: #fff; + display: flex; + flex-direction: column; + justify-content: center; padding-left: calc(1rem + 4px); padding-right: 1rem; position: relative; @@ -44,6 +47,14 @@ white-space: nowrap; } + &-label-item { + margin-right: 20px; + + &:last-child { + margin-right: 0; + } + } + &-value { display: block; font-size: 1.5rem; @@ -54,6 +65,7 @@ font-size: 1.25rem; } } + } @mixin btn-full($bg-color: $primary, $text-color: #fff) { diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index 73875e39e8..43ad720cf9 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -100,6 +100,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/tooltip"; @import "components/progress_from_to"; @import "components/stakes_empty_content"; +@import "components/stakes_btn_remove_pool"; :export { primary: $primary; diff --git a/apps/block_scout_web/assets/css/components/_i_tooltip.scss b/apps/block_scout_web/assets/css/components/_i_tooltip.scss index 38b7db8643..2bb4a002cf 100644 --- a/apps/block_scout_web/assets/css/components/_i_tooltip.scss +++ b/apps/block_scout_web/assets/css/components/_i_tooltip.scss @@ -15,4 +15,4 @@ $i-tooltip-background-active: $primary !default; fill: $i-tooltip-background-active; } } -} \ No newline at end of file +} diff --git a/apps/block_scout_web/assets/css/components/_progress_from_to.scss b/apps/block_scout_web/assets/css/components/_progress_from_to.scss index c2cfbbaa73..71ffa54751 100644 --- a/apps/block_scout_web/assets/css/components/_progress_from_to.scss +++ b/apps/block_scout_web/assets/css/components/_progress_from_to.scss @@ -21,6 +21,10 @@ $progress-from-to-progress-background: $primary !default; font-size: 12px; font-weight: normal; line-height: 1.2; + + .stakes-tr-banned & { + color: $stakes-banned-color; + } } .progress-from-to-background { @@ -29,6 +33,10 @@ $progress-from-to-progress-background: $primary !default; height: 4px; overflow: hidden; position: relative; + + .stakes-tr-banned & { + background-color: darken($stakes-banned-background, 5%); + } } .progress-from-to-progress { @@ -38,4 +46,8 @@ $progress-from-to-progress-background: $primary !default; max-width: 100%; position: absolute; top: 0; + + .stakes-tr-banned & { + background-color: $stakes-banned-color; + } } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_stakes.scss b/apps/block_scout_web/assets/css/components/_stakes.scss index e5aa4bf2fa..63508e27bd 100644 --- a/apps/block_scout_web/assets/css/components/_stakes.scss +++ b/apps/block_scout_web/assets/css/components/_stakes.scss @@ -1,6 +1,8 @@ $stakes-dashboard-copy-icon-color: $copy-icon-color !default; $stakes-address-color: $primary !default; $stakes-control-color: $primary !default; +$stakes-banned-color: #ff7986!default; +$stakes-banned-background: #fff3f7!default; .stakes-top { @include gradient-container(); @@ -10,20 +12,48 @@ $stakes-control-color: $primary !default; } .stakes-top-stats { - @include stats-item(); - display: flex; justify-content: space-between; + @include stats-item(); + @include media-breakpoint-down(md) { - flex-direction: column; + column-gap: 30px; + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 30px; + } + + .stakes-top-stats-item { + @include media-breakpoint-down(md) { + &:nth-child(1), + &:nth-child(2), + &:nth-child(3) { + grid-column-start: 1; + } + &:nth-child(4) { + grid-column-start: 2; + grid-row-start: 1; + } + } + } + + @include media-breakpoint-down(sm) { + grid-template-columns: 1fr; } .stakes-top-stats-value { + align-items: center; display: flex; } + .stakes-top-stats-login { + color: $primary; + margin-right: 8px; + } + .copy-icon { + margin-left: 20px; path { fill: $stakes-dashboard-copy-icon-color; } @@ -32,11 +62,16 @@ $stakes-control-color: $primary !default; .stakes-address-container { display: flex; + cursor: pointer; justify-content: flex-start; .stakes-address { color: $stakes-address-color; margin-right: 10px; + + .stakes-tr-banned & { + color: $stakes-banned-color; + } } } @@ -68,4 +103,21 @@ $stakes-control-color: $primary !default; path { fill: $stakes-control-color; } +} + +.stakes-top-buttons { + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + + .btn-add-full { + margin-bottom: 10px; + } + + @include media-breakpoint-down(md) { + grid-column-start: 2; + grid-row-start: 2; + justify-self: end; + } } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_stakes_btn_remove_pool.scss b/apps/block_scout_web/assets/css/components/_stakes_btn_remove_pool.scss new file mode 100644 index 0000000000..36a3747e3c --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_stakes_btn_remove_pool.scss @@ -0,0 +1,21 @@ +$stakes-btn-remove-pool-color: $primary !default; + +.stakes-btn-remove-pool { + align-items: center; + color: $stakes-btn-remove-pool-color; + cursor: pointer; + display: flex; + font-size: 12px; + font-weight: 600; + height: 36px; + justify-content: center; + text-align: center; + + svg { + margin-right: 10px; + } + + path { + fill: $stakes-btn-remove-pool-color; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_stakes_table.scss b/apps/block_scout_web/assets/css/components/_stakes_table.scss index a1e656b3ec..e10cc20e71 100644 --- a/apps/block_scout_web/assets/css/components/_stakes_table.scss +++ b/apps/block_scout_web/assets/css/components/_stakes_table.scss @@ -19,6 +19,10 @@ $stakes-table-cell-separation: 25px !default; font-weight: bold; line-height: 1.2; text-align: left; + + &:first-child { + min-width: 15px; + } } .stakes-table-th-content { @@ -49,6 +53,11 @@ $stakes-table-cell-separation: 25px !default; &:last-child { padding-right: 0; } + + .stakes-tr-banned & { + background-color: $stakes-banned-background; + color: $stakes-banned-color; + } } .stakes-td-order { @@ -59,4 +68,8 @@ $stakes-table-cell-separation: 25px !default; .stakes-td-link-style { color: $primary; + + .stakes-tr-banned & { + color: $stakes-banned-color; + } } \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/active_pools/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/active_pools/index.html.eex index c972614d39..22ec95af9f 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/active_pools/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/active_pools/index.html.eex @@ -1,4 +1,4 @@ -<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %> +<%= render BlockScoutWeb.StakesView, "_stakes_top.html", logged_in: true %>
<%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_full.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_full.html.eex new file mode 100644 index 0000000000..2d733b0c42 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_full.html.eex @@ -0,0 +1,6 @@ + + + + + <%= @text %> + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_line.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_line.html.eex new file mode 100644 index 0000000000..f07795a0ce --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_line.html.eex @@ -0,0 +1,6 @@ + + + + + <%= @text %> + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/inactive_pools/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/inactive_pools/index.html.eex index 525b18d53f..3f7b945200 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/inactive_pools/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/inactive_pools/index.html.eex @@ -1,4 +1,4 @@ -<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %> +<%= render BlockScoutWeb.StakesView, "_stakes_top.html", logged_in: true %>
<%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_remove_pool.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_remove_pool.html.eex new file mode 100644 index 0000000000..89da4dae44 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_remove_pool.html.eex @@ -0,0 +1,6 @@ + + + + + <%= @text %> + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_empty_content.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_empty_content.html.eex index 35cb792152..d2999daf68 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_empty_content.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_empty_content.html.eex @@ -11,11 +11,6 @@

Lorem Ipsum

Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod temp incididunt ut labore et dolore magna.

- - - - - <%= gettext "Become Candidate" %> - + <%= render BlockScoutWeb.CommonComponentsView, "_btn_add_line.html", text: gettext("Become Candidate"), extra_class: "js-become-candidate" %>
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item.html.eex new file mode 100644 index 0000000000..b44cf8ac91 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item.html.eex @@ -0,0 +1,6 @@ +
+ + <%= @title %> + + <%= @value %> +
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex new file mode 100644 index 0000000000..96a39d1024 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex @@ -0,0 +1,33 @@ +
+ + <%= if assigns[:logged_in] do %> + <%= @title %> +
+ + + +
+ <%= else %> + with MetaMask + <%= end %> + + + <%= gettext "Balance" %>: + <%= + if assigns[:balance] do + @balance + else + "-" + end + %> POA20 + <%= gettext "Staked" %>: + <%= + if assigns[:staked] do + @staked + else + "-" + end + %> POA20 + + +
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_top.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_top.html.eex index 4eb75426a5..6c3711e69c 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_top.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_top.html.eex @@ -1,49 +1,14 @@
- -
- - <%= gettext "Epoch number" %> - - 6 -
- -
- - <%= gettext "Block number" %> - - 348 -
- -
- - <%= gettext "Next epoch in" %> - - 999 blocks -
- -
- 0x1fddEc96688e0538A316C64dc... -
- - - -
- - - <%= gettext "Balance" %>: 20.08 POA20 - <%= gettext "Staked" %>: 1000 POA20 - -
+ <%= render BlockScoutWeb.StakesView, "_stakes_stats_item.html", title: gettext("Epoch number"), value: "6" %> + <%= render BlockScoutWeb.StakesView, "_stakes_stats_item.html", title: gettext("Block number"), value: "348" %> + <%= render BlockScoutWeb.StakesView, "_stakes_stats_item.html", title: gettext("Next epoch in"), value: "999 blocks" %> + <%= render BlockScoutWeb.StakesView, "_stakes_stats_item_account.html", title: "0x1fddEc96688e0538A316C64dc...", balance: "20", staked: "1000", logged_in: @logged_in %> -
- - - - - <%= gettext "Become Candidate" %> - +
+ <%= render BlockScoutWeb.CommonComponentsView, "_btn_add_full.html", text: gettext("Become Candidate"), extra_class: "js-become-candidate" %> + <%= render BlockScoutWeb.StakesView, "_stakes_btn_remove_pool.html", text: gettext("Remove My Pool"), extra_class: "js-remove-pool" %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/validators/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/validators/index.html.eex index 5fc1c440ae..d0d11f637f 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/validators/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/validators/index.html.eex @@ -1,4 +1,4 @@ -<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %> +<%= render BlockScoutWeb.StakesView, "_stakes_top.html", logged_in: false %>
<%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>