From 66c73e7b3943421d6a2252941338b7109040e1bd Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Mon, 1 Apr 2019 16:39:16 -0300 Subject: [PATCH] (add) validators table --- apps/block_scout_web/assets/css/app.scss | 5 ++ .../assets/css/components/_card.scss | 27 +++++++ .../assets/css/components/_check_tooltip.scss | 26 +++++++ .../assets/css/components/_i_tooltip.scss | 18 +++++ .../css/components/_progress_from_to.scss | 41 +++++++++++ .../assets/css/components/_stakes.scss | 11 +++ .../assets/css/components/_stakes_table.scss | 58 +++++++++++++++ .../assets/css/components/_tooltip.scss | 8 ++ .../common_components_controller.ex | 14 ++++ .../templates/active_pools/index.html.eex | 3 +- .../common_components/_check_tooltip.html.eex | 14 ++++ .../common_components/_i_tooltip.html.eex | 13 ++++ .../_progress_from_to.html.eex | 9 +++ .../templates/inactive_pools/index.html.eex | 3 +- .../templates/stakes/_stakes_address.html.eex | 4 + .../templates/stakes/_stakes_table.html.eex | 73 +++++++++++++++++++ .../templates/stakes/_stakes_th.html.eex | 6 ++ .../templates/stakes/_stakes_title.html.eex | 17 ++++- .../templates/validators/index.html.eex | 3 +- .../views/common_components_view..ex | 3 + 20 files changed, 349 insertions(+), 7 deletions(-) create mode 100644 apps/block_scout_web/assets/css/components/_check_tooltip.scss create mode 100644 apps/block_scout_web/assets/css/components/_i_tooltip.scss create mode 100644 apps/block_scout_web/assets/css/components/_progress_from_to.scss create mode 100644 apps/block_scout_web/assets/css/components/_stakes_table.scss create mode 100644 apps/block_scout_web/assets/css/components/_tooltip.scss create mode 100644 apps/block_scout_web/lib/block_scout_web/controllers/common_components_controller.ex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/common_components/_check_tooltip.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/common_components/_i_tooltip.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/common_components/_progress_from_to.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_address.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_th.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/views/common_components_view..ex diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index af841d277b..3225490106 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -92,6 +92,11 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/btn_add_full"; @import "components/stakes"; @import "components/check"; +@import "components/stakes_table"; +@import "components/i_tooltip"; +@import "components/check_tooltip"; +@import "components/tooltip"; +@import "components/progress_from_to"; :export { primary: $primary; diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss index e868457af2..8f3f636337 100644 --- a/apps/block_scout_web/assets/css/components/_card.scss +++ b/apps/block_scout_web/assets/css/components/_card.scss @@ -52,6 +52,33 @@ $card-vertical-padding: 30px; } } +.card-title-controls { + align-items: center; + display: flex; + justify-content: flex-end; + + @include media-breakpoint-down(sm) { + flex-direction: column; + } + + .card-title-control { + margin-right: 20px; + + &:last-child { + margin-right: 0; + } + + @include media-breakpoint-down(sm) { + margin-bottom: 20px; + margin-right: 0; + + &:last-child { + margin-bottom: 0; + } + } + } +} + .card-body { padding: $card-horizontal-padding; } diff --git a/apps/block_scout_web/assets/css/components/_check_tooltip.scss b/apps/block_scout_web/assets/css/components/_check_tooltip.scss new file mode 100644 index 0000000000..b84862b84a --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_check_tooltip.scss @@ -0,0 +1,26 @@ +$check-tooltip-background: #f5f6fa !default; +$check-tooltip-background-active: $primary !default; +$check-tooltip-check: #a3a9b5 !default; +$check-tooltip-check-active: #fff !default; + +.check-tooltip { + display: block; + height: 16px; + width: 16px; + + .check-tooltip-circle { + fill: $check-tooltip-background; + } + .check-tooltip-check { + fill: $check-tooltip-check; + } + + &:hover { + .check-tooltip-circle { + fill: $check-tooltip-background-active; + } + .check-tooltip-check { + fill: $check-tooltip-check-active; + } + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_i_tooltip.scss b/apps/block_scout_web/assets/css/components/_i_tooltip.scss new file mode 100644 index 0000000000..38b7db8643 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_i_tooltip.scss @@ -0,0 +1,18 @@ +$i-tooltip-background: #a3a9b5 !default; +$i-tooltip-background-active: $primary !default; + +.i-tooltip { + display: block; + height: 16px; + width: 16px; + + path { + fill: $i-tooltip-background; + } + + &:hover { + path { + 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 new file mode 100644 index 0000000000..c2cfbbaa73 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_progress_from_to.scss @@ -0,0 +1,41 @@ +$progress-from-to-background: #f5f6fa !default; +$progress-from-to-progress-background: $primary !default; + +.progress-from-to { + min-width: 120px; + max-width: 100%; + + .stakes-table & { + width: 120px; + } +} + +.progress-from-to-values { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} + +.progress-from-to-value { + color: #333; + font-size: 12px; + font-weight: normal; + line-height: 1.2; +} + +.progress-from-to-background { + background-color: $progress-from-to-background; + border-radius: 2px; + height: 4px; + overflow: hidden; + position: relative; +} + +.progress-from-to-progress { + background-color: $progress-from-to-progress-background; + height: 100%; + left: 0; + max-width: 100%; + position: absolute; + top: 0; +} \ 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 3d6989fcb6..2f2cef0029 100644 --- a/apps/block_scout_web/assets/css/components/_stakes.scss +++ b/apps/block_scout_web/assets/css/components/_stakes.scss @@ -1,4 +1,5 @@ $stakes-dashboard-copy-icon-color: $copy-icon-color !default; +$stakes-address-color: $primary !default; .stakes-top { @include gradient-container(); @@ -26,4 +27,14 @@ $stakes-dashboard-copy-icon-color: $copy-icon-color !default; fill: $stakes-dashboard-copy-icon-color; } } +} + +.stakes-address-container { + display: flex; + justify-content: flex-start; + + .stakes-address { + color: $stakes-address-color; + margin-right: 10px; + } } \ 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 new file mode 100644 index 0000000000..1d96aedb22 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_stakes_table.scss @@ -0,0 +1,58 @@ +$stakes-table-th-background: #f5f6fa !default; + +.stakes-table-container { + max-width: 100%; + overflow-x: auto; + width: 100%; +} + +.stakes-table { + min-width: fit-content; + width: 100%; +} + +.stakes-table-th { + background-color: $stakes-table-th-background; + color: #a3a9b5; + font-size: 14px; + font-weight: bold; + line-height: 1.2; + text-align: left; +} + +.stakes-table-th-content { + align-items: center; + display: flex; + justify-content: flex-start; + padding: 21px 15px 21px 0; + position: relative; + z-index: 0; +} + +.stakes-th-text { + margin-right: 10px; +} + +.stakes-th-text { + margin-right: 10px; +} + +.stakes-td { + border-bottom: 1px solid #f5f6fa; + font-size: 14px; + font-weight: normal; + height: 57px; + line-height: 1.2; + text-align: left; + vertical-align: center; + white-space: nowrap; +} + +.stakes-td-order { + min-width: 50px; + text-align: center; +} + +.stakes-td-link-style { + color: $primary; +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_tooltip.scss b/apps/block_scout_web/assets/css/components/_tooltip.scss new file mode 100644 index 0000000000..f1ae20f95a --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_tooltip.scss @@ -0,0 +1,8 @@ +.tooltip { + max-width: 250px; + + .tooltip-inner { + border-radius: 5px; + padding: 15px; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/controllers/common_components_controller.ex b/apps/block_scout_web/lib/block_scout_web/controllers/common_components_controller.ex new file mode 100644 index 0000000000..8c23d8ed8d --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/controllers/common_components_controller.ex @@ -0,0 +1,14 @@ +defmodule BlockScoutWeb.CommonComponentsController do + use BlockScoutWeb, :controller + + alias BlockScoutWeb.CommonComponentsView + + def index(conn, params) do + [] + |> handle_render(conn, params) + end + + defp handle_render(full_options, conn, _params) do + render(conn, "index.html") + end +end 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 7437ddbc68..c972614d39 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 @@ -2,6 +2,7 @@
<%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %> - <%= render BlockScoutWeb.StakesView, "_stakes_title.html", title: "Active Pools" %> + <%= render BlockScoutWeb.StakesView, "_stakes_title.html", title: "Active Pools", show_banned_checkbox: false %> + <%= render BlockScoutWeb.StakesView, "_stakes_table.html", empty_content: false %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_check_tooltip.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_check_tooltip.html.eex new file mode 100644 index 0000000000..7b7b1de976 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_check_tooltip.html.eex @@ -0,0 +1,14 @@ +
+ + + + +
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_i_tooltip.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_i_tooltip.html.eex new file mode 100644 index 0000000000..48442fd028 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_i_tooltip.html.eex @@ -0,0 +1,13 @@ +
+ + + +
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_progress_from_to.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_progress_from_to.html.eex new file mode 100644 index 0000000000..4ae44e51cd --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_progress_from_to.html.eex @@ -0,0 +1,9 @@ +
+
+
<%= @from %>
+
<%= @to %>
+
+
+
+
+
\ 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 363e09eeba..525b18d53f 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 @@ -2,6 +2,7 @@
<%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %> - <%= render BlockScoutWeb.StakesView, "_stakes_title.html", title: "Inactive Pools" %> + <%= render BlockScoutWeb.StakesView, "_stakes_title.html", title: "Inactive Pools", show_banned_checkbox: true %> + <%= render BlockScoutWeb.StakesView, "_stakes_table.html", empty_content: false %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_address.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_address.html.eex new file mode 100644 index 0000000000..731b699f10 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_address.html.eex @@ -0,0 +1,4 @@ +
+ <%= @address %> + <%= render BlockScoutWeb.CommonComponentsView, "_check_tooltip.html", text: @tooltip %> +
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex new file mode 100644 index 0000000000..0bf60fe50d --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex @@ -0,0 +1,73 @@ +
+ + + + + <%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: "Validator", tooltip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut." %> + <%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: "Staked Amount", tooltip: "Lorem ipsum dolor sit iusmod tempor incididunt ut." %> + <%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: "Stakes Ratio", tooltip: "Sed do eiusmod tempor incididunt ut." %> + <%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: "Delegators", tooltip: "Lorem ipsum dolor sit amet." %> + + + + + <%= if @empty_content do %> + + + + <%= end %> + <%= if not @empty_content do %> + + + + + + + + + <%= for i <- 2..5 do %> + + + + + + + + + <%= end %> + <%= end %> + +
  
+ empty +
1
 + <%= + render BlockScoutWeb.StakesView, + "_stakes_address.html", + address: "0x59D8-d6Fc43", + tooltip: "This is a validator" + %> + + <%= + render BlockScoutWeb.CommonComponentsView, + "_progress_from_to.html", + from: 10, + to: 100, + progress: 83 + %> + 2.56%1455text
<%= i %>
 + <%= + render BlockScoutWeb.StakesView, + "_stakes_address.html", + address: "0x59D8-d6Fc43", + tooltip: "This is a validator" + %> + + <%= + render BlockScoutWeb.CommonComponentsView, + "_progress_from_to.html", + from: 500, + to: 15000, + progress: 40 + %> + 2.56%1455text
+
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_th.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_th.html.eex new file mode 100644 index 0000000000..bb44f76e91 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_th.html.eex @@ -0,0 +1,6 @@ + +
+ <%= @title %> + <%= render BlockScoutWeb.CommonComponentsView, "_i_tooltip.html", text: @tooltip %> +
+ \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_title.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_title.html.eex index 1b3b47f1f3..df122f57e1 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_title.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_title.html.eex @@ -1,8 +1,17 @@
<%= @title %>
-
- -
-
Show only those I staked into
+
+ <%= if @show_banned_checkbox do %> +
+ +
+
Show banned only
+
+ <%= end %> +
+ +
+
Show only those I staked into
+
\ No newline at end of file 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 35d65f4eba..5fc1c440ae 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 @@ -2,6 +2,7 @@
<%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %> - <%= render BlockScoutWeb.StakesView, "_stakes_title.html", title: "Validators" %> + <%= render BlockScoutWeb.StakesView, "_stakes_title.html", title: "Validators", show_banned_checkbox: false %> + <%= render BlockScoutWeb.StakesView, "_stakes_table.html", empty_content: true %>
diff --git a/apps/block_scout_web/lib/block_scout_web/views/common_components_view..ex b/apps/block_scout_web/lib/block_scout_web/views/common_components_view..ex new file mode 100644 index 0000000000..c731c8609f --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/views/common_components_view..ex @@ -0,0 +1,3 @@ +defmodule BlockScoutWeb.CommonComponentsView do + use BlockScoutWeb, :view +end