From 5ffa49cbbe287dc1d4f1eeaf5c1ac8f969687c3e Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Thu, 11 Apr 2019 14:50:04 -0300 Subject: [PATCH] (add) address details and account balance styles --- apps/block_scout_web/assets/css/_mixins.scss | 28 ++++++++ apps/block_scout_web/assets/css/app.scss | 2 + .../css/components/_address-overview.scss | 44 ++++++++++++- .../assets/css/components/_btn_copy.scss | 6 ++ .../assets/css/components/_btn_qr.scss | 6 ++ .../assets/css/components/_card.scss | 14 ++-- .../assets/css/theme/_lukso_variables.scss | 5 +- .../templates/address/_balance_card.html.eex | 38 ++++++----- .../templates/address/overview.html.eex | 64 +++++++++++++------ .../_token_balances.html.eex | 2 +- .../templates/block/overview.html.eex | 2 +- .../tokens/overview/_details.html.eex | 2 +- .../templates/transaction/overview.html.eex | 2 +- 13 files changed, 167 insertions(+), 48 deletions(-) create mode 100644 apps/block_scout_web/assets/css/components/_btn_copy.scss create mode 100644 apps/block_scout_web/assets/css/components/_btn_qr.scss diff --git a/apps/block_scout_web/assets/css/_mixins.scss b/apps/block_scout_web/assets/css/_mixins.scss index add1c7be09..42b6ed56fb 100644 --- a/apps/block_scout_web/assets/css/_mixins.scss +++ b/apps/block_scout_web/assets/css/_mixins.scss @@ -168,3 +168,31 @@ } } } + +@mixin square-icon-button($color, $dimensions) { + border: 1px solid $color; + border-radius: 2px; + cursor: pointer; + display: inline-block; + height: $dimensions; + transition: all 0.15s; + width: $dimensions; + + svg { + display: block; + height: 100%; + width: 100%; + } + + path { + fill: $color; + } + + &:hover { + background-color: $color; + + path { + fill: #fff; + } + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index 3425331ff1..3e0e76dbbc 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -111,6 +111,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/modal_bottom_disclaimer"; @import "components/modal_become_candidate"; @import "components/modal_stake"; +@import "components/btn_copy"; +@import "components/btn_qr"; :export { primary: $primary; diff --git a/apps/block_scout_web/assets/css/components/_address-overview.scss b/apps/block_scout_web/assets/css/components/_address-overview.scss index 00ae9852e8..500ff47196 100644 --- a/apps/block_scout_web/assets/css/components/_address-overview.scss +++ b/apps/block_scout_web/assets/css/components/_address-overview.scss @@ -1,3 +1,22 @@ +.address-detail-hash-title { + color: #333; + font-size: 12px; + font-weight: bold; + line-height: 1.2; + margin: 0 0 12px; + text-align: left; +} + +.overview-title-item { + display: inline-block; + height: fit-content; + margin-right: 9px; + + &:last-child { + margin-right: 0; + } +} + .address-overview { .card-section { margin-bottom: 3rem; @@ -14,7 +33,28 @@ } .address-detail-item { - display: inline-block; - padding-bottom: 0.5em; margin-right: 1em; + padding-bottom: 0.5em; +} + +.address-balance-text { + font-size: 12px; + font-weight: bold; + line-height: 1.2; + margin: 0 0 12px; } + +.address-current-balance { + font-size: 12px; + font-weight: 200; + line-height: 1.2; + margin: 0 0 12px; + + small { + font-size: 11px; + } + + &:last-child { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_btn_copy.scss b/apps/block_scout_web/assets/css/components/_btn_copy.scss new file mode 100644 index 0000000000..985a418a02 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_copy.scss @@ -0,0 +1,6 @@ +$btn-copy-color: $primary !default; +$btn-copy-dimensions: 31px !default; + +.btn-copy-icon { + @include square-icon-button($btn-copy-color, $btn-copy-dimensions); +} diff --git a/apps/block_scout_web/assets/css/components/_btn_qr.scss b/apps/block_scout_web/assets/css/components/_btn_qr.scss new file mode 100644 index 0000000000..0f8fbc54f3 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_qr.scss @@ -0,0 +1,6 @@ +$btn-qr-color: $primary !default; +$btn-qr-dimensions: 31px !default; + +.btn-qr-icon { + @include square-icon-button($btn-qr-color, $btn-qr-dimensions); +} diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss index 96db1c1aea..9d67f0e124 100644 --- a/apps/block_scout_web/assets/css/components/_card.scss +++ b/apps/block_scout_web/assets/css/components/_card.scss @@ -3,6 +3,8 @@ $card-tab-active: $primary !default; $card-default-border-radius: 10px !default; $card-horizontal-padding: 30px; $card-vertical-padding: 30px; +$card-background-1: $primary !default; +$card-background-1-text-color: #fff !default; .card { background-color: $card-background-color; @@ -10,10 +12,11 @@ $card-vertical-padding: 30px; border: none; box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5); margin-bottom: 3rem; +} - &-primary { - background-color: $primary; - } +.card-background-1 { + background-color: $card-background-1; + color: $card-background-1-text-color; } .card-header { @@ -25,12 +28,15 @@ $card-vertical-padding: 30px; } .card-title { - color: #333; font-size: 18px; font-weight: normal; line-height: 2.2rem; margin-bottom: 2rem; + &.margin-bottom-md { + margin-bottom: 20px; + } + .card-title-container & { line-height: 1.2; margin: 0; diff --git a/apps/block_scout_web/assets/css/theme/_lukso_variables.scss b/apps/block_scout_web/assets/css/theme/_lukso_variables.scss index c011f32c10..ac52adcb88 100644 --- a/apps/block_scout_web/assets/css/theme/_lukso_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_lukso_variables.scss @@ -25,4 +25,7 @@ $btn-line-color: $primary; $dashboard-stats-item-color: $primary; $dashboard-stats-item-border-color: $primary; $stakes-stats-item-color: $primary; -$stakes-stats-item-border-color: $primary; \ No newline at end of file +$stakes-stats-item-border-color: $primary; + +$card-background-1: $secondary; +$card-background-1-text-color: $primary; \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/_balance_card.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/_balance_card.html.eex index 3a2cbedff1..a3fbab854f 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address/_balance_card.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address/_balance_card.html.eex @@ -1,33 +1,37 @@ -
+
- -

<%= gettext "Balance" %>

+

<%= gettext "Balance" %>

-

<%= balance(@address) %>

+

<%= balance(@address) %>

<%= if !match?({:pending, _}, @coin_balance_status) && !empty_exchange_rate?(@exchange_rate) do %> - - + - + data-usd-exchange-rate="<%= @exchange_rate.usd_value %>" + > (@ /<%= gettext("Ether") %>) -
- +

<% end %> -
-
+

+ <%= gettext("Fetching tokens...") %> -

- - -
+ +

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex index 01b8929d58..a4bb53bd26 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex @@ -1,29 +1,52 @@
+
-
- - - - - - - <%= if validator_metadata = primary_validator_metadata(@address) do %> - - +

+ <%= address_title(@address) %> <%= gettext "Details" %> + +
+ + + + + + - <% end %> -
-

<%= address_title(@address) %> <%= gettext "Details" %>

-

<%= @address %>

+ + + + + + + + <%= if validator_metadata = primary_validator_metadata(@address) do %> + + + + <% end %> +
+ +

<%= @address %>

<%= if address_name = primary_name(@address) do %> <%= address_name %> @@ -87,6 +110,7 @@
+
<%= render BlockScoutWeb.AddressView, "_balance_card.html", conn: @conn, address: @address, exchange_rate: @exchange_rate, coin_balance_status: @coin_balance_status %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex index 3263673693..6f1dc762fd 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex @@ -13,7 +13,7 @@ <%= tokens_count_title(@token_balances) %> <% else %> - <%= tokens_count_title(@token_balances) %> + <%= tokens_count_title(@token_balances) %> <% end %>
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 8ff8237bcd..ab57ec1a5a 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 @@ -114,7 +114,7 @@
-
+

<%= gettext "Miner" %>

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 c0f624a0a9..e1df76f505 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 @@ -49,7 +49,7 @@ <%= if total_supply?(@token) do %>
-
+

<%= gettext "Total Supply" %>

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex index 1605a58cd0..355e0215eb 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex @@ -140,7 +140,7 @@
-
+

<%= gettext "Ether" %> <%= gettext "Value" %>