From 4c70b0b5ab6891f374155c15270172b0ca8db962 Mon Sep 17 00:00:00 2001 From: Yegor San Date: Mon, 26 Aug 2019 16:44:54 +0300 Subject: [PATCH] Added tooltipsfor Block Details Page + fixed height issue on main Blockscout Page + Added ERC 721 image to the token transfers page(required additional logic) --- apps/block_scout_web/assets/css/app.scss | 29 +- .../assets/css/components/_card.scss | 346 ++++++++---------- .../_custom_tooltips_block_details.scss | 74 ++++ .../_erc721_token_image_container.scss | 10 + apps/block_scout_web/assets/package-lock.json | 13 +- .../templates/block/overview.html.eex | 35 +- .../tokens/overview/_details.html.eex | 7 + .../index.html.eex | 6 + 8 files changed, 302 insertions(+), 218 deletions(-) create mode 100644 apps/block_scout_web/assets/css/components/_custom_tooltips_block_details.scss create mode 100644 apps/block_scout_web/assets/css/components/_erc721_token_image_container.scss diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index 508bb5335b..c5d07c2ae2 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -1,10 +1,12 @@ @import "./mixins"; /* Phoenix flash messages */ + .alert:empty { - display: none; + display: none; } + /* This file is for your main application css. */ // Font Awesome @@ -13,13 +15,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "fa-brands"; @import "fa-regular"; @import "fa-solid"; - // Bootstrap Core CSS @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/mixins"; - @import "theme/variables"; - @import "node_modules/bootstrap/scss/root"; @import "node_modules/bootstrap/scss/reboot"; @import "node_modules/bootstrap/scss/grid"; @@ -38,7 +37,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "node_modules/bootstrap/scss/utilities/position"; @import "node_modules/bootstrap/scss/utilities/borders"; @import "node_modules/bootstrap/scss/progress"; - // Bootstrap Components @import "node_modules/bootstrap/scss/alert"; @import "node_modules/bootstrap/scss/badge"; @@ -50,13 +48,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "node_modules/bootstrap/scss/pagination"; @import "node_modules/bootstrap/scss/tables"; @import "node_modules/bootstrap/scss/transitions"; - // Code highlight @import "node_modules/highlight.js/styles/default"; - //Custom theme @import "theme/fonts"; - // Custom SCSS @import "layout"; @import "typography"; @@ -113,15 +108,19 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/new_smart_contract"; @import "components/radio_big"; @import "components/btn_no_border"; +@import "components/custom_tooltips_block_details"; +@import "components/_erc721_token_image_container"; @import "theme/dark-theme"; :export { - dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color; - dashboardLineColorMarket: $dashboard-line-color-market; - dashboardLineColorPrice: $dashboard-line-color-price; - primary: $primary; - secondary: $secondary; - darkprimary: $dark-primary; - darksecondary: $dark-secondary; + dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color; + dashboardLineColorMarket: $dashboard-line-color-market; + dashboardLineColorPrice: $dashboard-line-color-price; + primary: $primary; + secondary: $secondary; + darkprimary: $dark-primary; + darksecondary: $dark-secondary; } + + diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss index 0737e1b355..80d97305b5 100644 --- a/apps/block_scout_web/assets/css/components/_card.scss +++ b/apps/block_scout_web/assets/css/components/_card.scss @@ -7,244 +7,214 @@ $card-background-1: $primary !default; $card-background-1-text-color: #fff !default; $card-tab-icon-color: #20b760 !default; $card-tab-icon-color-active: #fff !default; - .card { - background-color: $card-background-color; - border-radius: $card-default-border-radius; - border: none; - box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5); - margin-bottom: $common-container-margin; - - .block-details-row { - flex-direction: row; - @include media-breakpoint-down(sm) { - flex-direction: column; - } - - .block-detail-el { - & + .block-detail-el { + background-color: $card-background-color; + border-radius: $card-default-border-radius; + border: none; + box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5); + margin-bottom: $common-container-margin; + .block-details-row { + flex-direction: row; @include media-breakpoint-down(sm) { - margin-top: 6px; + flex-direction: column; + } + .block-detail-el { + &+.block-detail-el { + @include media-breakpoint-down(sm) { + margin-top: 6px; + } + } } - } } - } } .card-background-1 { - background-color: $card-background-1; - color: $card-background-1-text-color; - - a:not(.dropdown-item), - a:not(.dropdown-item):hover { + background-color: $card-background-1; color: $card-background-1-text-color; - } + a:not(.dropdown-item), + a:not(.dropdown-item):hover { + color: $card-background-1-text-color; + } } .card-header { - background: transparent; - border-bottom: 1px solid $base-border-color; - padding: $card-vertical-padding $card-horizontal-padding; - - &-tabs { - margin: (-$card-spacer-y) (-$card-spacer-x); - } + background: transparent; + border-bottom: 1px solid $base-border-color; + padding: $card-vertical-padding $card-horizontal-padding; + &-tabs { + margin: (-$card-spacer-y) (-$card-spacer-x); + } } .card-title { - font-size: 18px; - font-weight: normal; - line-height: 1.2rem; - margin-bottom: 2rem; - - &.lg-card-title { - @media (max-width: 374px) { - font-size: 13px; + font-size: 18px; + font-weight: normal; + line-height: 1.2rem; + margin-bottom: 2rem; + &.lg-card-title { + @media (max-width: 374px) { + font-size: 13px; + } } - } - - &.margin-bottom-md { - margin-bottom: 25px; - } - - &.margin-bottom-sm { - margin-bottom: 15px; - } - - &.margin-bottom-xs { - margin-bottom: 10px; - } - - &.margin-bottom-0 { - margin-bottom: 0; - } - - .card-title-container & { - line-height: 1.2; - margin: 0; - - @include media-breakpoint-down(sm) { - margin-bottom: 25px; + &.margin-bottom-md { + margin-bottom: 25px; + } + &.margin-bottom-sm { + margin-bottom: 15px; + } + &.margin-bottom-xs { + margin-bottom: 10px; + } + &.margin-bottom-0 { + margin-bottom: 0; + } + .card-title-container & { + line-height: 1.2; + margin: 0; + @include media-breakpoint-down(sm) { + margin-bottom: 25px; + } } - } } .card-subtitle { - color: #333; - font-size: 12px; - font-weight: normal; - line-height: 1.2; - margin: 0 0 30px; - - &.margin-bottom-0 { - margin-bottom: 0; - } + color: #333; + font-size: 12px; + font-weight: normal; + line-height: 1.2; + margin: 0 0 30px; + &.margin-bottom-0 { + margin-bottom: 0; + } } .card-title-container { - align-items: center; - display: flex; - justify-content: space-between; - padding: 25px $card-horizontal-padding; - - @include media-breakpoint-down(sm) { - flex-direction: column; - } + align-items: center; + display: flex; + justify-content: space-between; + padding: 25px $card-horizontal-padding; + @include media-breakpoint-down(sm) { + flex-direction: column; + } } .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; - } - + align-items: center; + display: flex; + justify-content: flex-end; @include media-breakpoint-down(sm) { - margin-bottom: 20px; - margin-right: 0; - - &:last-child { - margin-bottom: 0; - } + 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; + padding: $card-horizontal-padding; } .card-body-flex-column-space-between { - display: flex; - flex-direction: column; - justify-content: space-between; + display: flex; + flex-direction: column; + justify-content: space-between; } .card-server-response-body { - max-height: 400px; - overflow-y: auto; + max-height: 400px; + overflow-y: auto; } .card-chain-blocks { - height: auto; - - [class*="col-"]:last-child { - .tile { - margin-bottom: 0; + height: auto; + [class*="col-"]:last-child { + .tile { + margin-bottom: 0; + } } - } } .card-chain-transactions { - height: auto; - - .tile { - margin-bottom: 0; - } + height: auto; + .tile { + margin-bottom: 0; + } } .card-tabs { - align-items: center; - border-top-left-radius: $card-default-border-radius; - border-top-right-radius: $card-default-border-radius; - border-bottom: 1px solid $base-border-color; - display: flex; - justify-content: flex-start; - overflow: hidden; - - @include media-breakpoint-down(md) { - flex-direction: column; - } + align-items: center; + border-top-left-radius: $card-default-border-radius; + border-top-right-radius: $card-default-border-radius; + border-bottom: 1px solid $base-border-color; + display: flex; + justify-content: flex-start; + overflow: hidden; + @include media-breakpoint-down(md) { + flex-direction: column; + } } .card-tab { - align-items: center; - background-color: $card-background-color; - color: #333; - cursor: pointer; - display: flex; - font-size: 14px; - font-weight: normal; - height: 70px; - padding: 0 25px; - text-align: center; - transition: $transition-cont; - - &:hover { - background-color: rgba($card-tab-active, .15); - color: $card-tab-active; - text-decoration: none; - } - - @include media-breakpoint-down(md) { - display: none; - width: 100%; - } - - .fa-check-circle { - color: $card-tab-icon-color; - margin-left: 6px; - } - - &.active { - background-color: $card-tab-active; - color: #fff; - cursor: default; - text-decoration: none; - - .fa-check-circle { - color: $card-tab-icon-color-active; + align-items: center; + background-color: $card-background-color; + color: #333; + cursor: pointer; + display: flex; + font-size: 14px; + font-weight: normal; + height: 70px; + padding: 0 25px; + text-align: center; + transition: $transition-cont; + &:hover { + background-color: rgba($card-tab-active, .15); + color: $card-tab-active; + text-decoration: none; } - @include media-breakpoint-down(md) { - cursor: pointer; - display: flex; - order: -1; - - &::after { - border-bottom: 0; - border-left: 0.3em solid transparent; - border-right: 0.3em solid transparent; - border-top: 0.3em solid; - content: ""; - display: inline-block; - height: 0; - margin-left: 10px; - width: 0; - } - - &.noCaret::after { display: none; - } + width: 100%; } - } -} + .fa-check-circle { + color: $card-tab-icon-color; + margin-left: 6px; + } + &.active { + background-color: $card-tab-active; + color: #fff; + cursor: default; + text-decoration: none; + .fa-check-circle { + color: $card-tab-icon-color-active; + } + @include media-breakpoint-down(md) { + cursor: pointer; + display: flex; + order: -1; + &::after { + border-bottom: 0; + border-left: 0.3em solid transparent; + border-right: 0.3em solid transparent; + border-top: 0.3em solid; + content: ""; + display: inline-block; + height: 0; + margin-left: 10px; + width: 0; + } + &.noCaret::after { + display: none; + } + } + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_custom_tooltips_block_details.scss b/apps/block_scout_web/assets/css/components/_custom_tooltips_block_details.scss new file mode 100644 index 0000000000..4b6e0eda36 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_custom_tooltips_block_details.scss @@ -0,0 +1,74 @@ +/* Custom Tooltips for Block Details Page */ +.tooltipCustom { + position: relative; + display: inline-block; +} +.tooltipCustom .tooltiptextTopMiner { + visibility: hidden; + position: absolute; + width: 50%; + background-color: white; + color: #5c34a2; + text-align: center; + border-radius: 6px; + left: 25%; + bottom: 100%; + padding: 15px 0px; + display: inline-block; + z-index: 1; + font-family: Nunito; + margin-bottom: 15px; + opacity: 0; + transition: opacity 0.5s; +} +.tooltipCustom .tooltiptextTopMiner::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: white transparent transparent transparent; +} +.tooltipCustom:hover .tooltiptextTopMiner { + visibility: visible; + opacity: 1; +} + +.tooltipCustom .tooltiptextTopR { + visibility: hidden; + position: absolute; + width: 50%; + background-color: $primary; + color: white; + text-align: center; + border-radius: 6px; + left: 52%; + bottom: 120%; + padding: 15px 10px; + font-family: Nunito; + display: inline-block; + z-index: 1; + margin-bottom: 15px; + opacity: 0; + transition: opacity 0.5s; +} + +.tooltipCustom .tooltiptextTopR::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: $primary transparent transparent transparent; +} + + +.tooltipCustom:hover .tooltiptextTopR { + visibility: visible; + opacity: 1; +} +/* Custom Tooltips for Block Details Page end*/ \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_erc721_token_image_container.scss b/apps/block_scout_web/assets/css/components/_erc721_token_image_container.scss new file mode 100644 index 0000000000..b5f9cb6a92 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_erc721_token_image_container.scss @@ -0,0 +1,10 @@ +/* ERC721 image block */ +.erc721-image { + display: flex; + justify-content: center; +} + +.erc721-image img { + height: 80px; +} +/* ERC721 image block end */ diff --git a/apps/block_scout_web/assets/package-lock.json b/apps/block_scout_web/assets/package-lock.json index 36068a9e80..a03732e4e0 100644 --- a/apps/block_scout_web/assets/package-lock.json +++ b/apps/block_scout_web/assets/package-lock.json @@ -4333,7 +4333,8 @@ "version": "2.1.1", "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -4798,7 +4799,8 @@ "version": "5.1.1", "resolved": false, "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4862,6 +4864,7 @@ "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4910,13 +4913,15 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "resolved": false, "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", - "dev": true + "dev": true, + "optional": true } } }, diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex index f2bc029e0e..bfa16776a1 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex @@ -8,15 +8,20 @@ <%= gettext("%{block_type} Details", block_type: block_type(@block)) %> -

+ + +

+ <%= if block_type(@block) == "Block" do %> + <%= gettext("Block Height: %{height}", height: @block.number) %> <%= if @block.number == 0, do: "- " <> gettext("Genesis Block")%> <% else %> <%= gettext("%{block_type} Height:", block_type: block_type(@block)) %> <%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %> <% end %> +

- +
<%= gettext "%{count} Transactions", count: @block_transaction_count %> @@ -36,10 +41,13 @@
+
<%= gettext "Hash" %>
-
<%= to_string(@block.hash) %>
+
<%= to_string(@block.hash) %>
+
+ <%= unless @block.number == 0 do %> @@ -123,9 +131,12 @@

<%= gettext "Miner" %>

-
+
-

+ Validator's Name + +

+ <%= render BlockScoutWeb.AddressView, "_link.html", address: @block.miner, @@ -135,17 +146,18 @@

-
-
+
+ <%= if show_reward?(@block.rewards) do %>

<%= gettext "Block Rewards" %>

-
+
+ Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees. <%= for block_reward <- @block.rewards do %> -

<%= block_reward_text(block_reward) %> <%= format_wei_value(block_reward.reward, :ether) %>

+ +

<%= block_reward_text(block_reward) %> <%= format_wei_value(block_reward.reward, :ether) %>

+ <% end %>
<% else %> @@ -156,6 +168,7 @@ If xDai : Validators receive Tx fees if collected (If transactions exist in the (<%= (Decimal.to_integer(@block.gas_used) / Decimal.to_integer(@block.gas_limit)) |> BlockScoutWeb.Cldr.Number.to_string!(format: "#.#%") %>)

<%= @block.gas_limit |> BlockScoutWeb.Cldr.Number.to_string! %><%= gettext "Gas Limit" %>

+
<% end %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_details.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_details.html.eex index c4fbdc2af2..bf397ac461 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_details.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_details.html.eex @@ -72,6 +72,13 @@
+ +
+ +
+ +

<%= gettext "Total Supply" %>

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex index 70162a3be8..7b112377f3 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex @@ -23,4 +23,10 @@ <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>

+ + + + + + \ No newline at end of file