CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

(add) home blocks style

Browse Source
pull/1704/head
Gabriel Rodriguez Alsina 6 years ago
parent 72e887a777
commit 0466761253
8 changed files with 127 additions and 88 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      apps/block_scout_web/assets/css/_typography.scss
  2. 41
      apps/block_scout_web/assets/css/components/_button.scss
  3. 43
      apps/block_scout_web/assets/css/components/_card.scss
  4. 72
      apps/block_scout_web/assets/css/components/_tile.scss
  5. 1
      apps/block_scout_web/assets/css/theme/_poa_variables.scss
  6. 2
      apps/block_scout_web/assets/css/theme/_posdao_variables.scss
  7. 38
      apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex
  8. 4
      apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

10
apps/block_scout_web/assets/css/_typography.scss
Unescape View File

@ -1,3 +1,5 @@
$common-link-color: $primary !default;
body { body {
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: 12px; font-size: 12px;
@ -20,10 +22,10 @@ h3 {
} }
h4 { h4 {
color: $gray-600;
font-size: 16px; font-size: 16px;
line-height: 24px;
font-weight: 300; font-weight: 300;
color: $gray-600; line-height: 24px;
margin-top: 4px; margin-top: 4px;
&.underline { &.underline {
@ -44,12 +46,12 @@ p {
} }
a { a {
color: $common-link-color;
text-decoration: none; text-decoration: none;
color: $tertiary;
&:hover, &:hover,
&:focus { &:focus {
color: darken($tertiary, 20%); color: darken($common-link-color, 20%);
text-decoration: underline; text-decoration: underline;
} }

41
apps/block_scout_web/assets/css/components/_button.scss
Unescape View File

@ -1,25 +1,28 @@
$button-primary-color: $primary !default;
$button-secondary-color: $secondary !default;
.button { .button {
border-radius: 2px;
border: none; border: none;
cursor: pointer;
display: inline-block; display: inline-block;
line-height: 1.2;
padding: 10px 16px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
white-space: nowrap;
padding: 8px 10px;
border-radius: 2px;
cursor: pointer;
-webkit-transition: all 0.25s;
transition: all 0.25s; transition: all 0.25s;
white-space: nowrap;
&-primary { &-primary {
background-color: $primary; background-color: $button-primary-color;
color: $white; border: 1px solid $button-primary-color;
border: 1px solid $primary; color: #fff;
&:hover, &:hover,
&:focus { &:focus {
color: $white; background-color: darken($button-primary-color, 10%);
background-color: darken($primary, 10%); border-color: darken($button-primary-color, 10%);
border-color: darken($primary, 10%); color: #fff;
text-decoration: none; text-decoration: none;
} }
@ -31,18 +34,18 @@
} }
&-secondary { &-secondary {
border: 1px solid $tertiary; background-color: #fff;
color: $tertiary; border: 1px solid $button-secondary-color;
background-color: $white; color: $button-secondary-color;
font-weight: 400; font-weight: 400;
&:hover, &:hover,
&:focus { &:focus {
background-color: darken($tertiary, 10%); background-color: darken($button-secondary-color, 10%);
border-color: darken($tertiary, 10%); border-color: darken($button-secondary-color, 10%);
color: $white; color: #fff;
text-decoration: none;
outline: none !important; outline: none !important;
text-decoration: none;
} }
} }
@ -75,7 +78,7 @@
} }
&-disabled, &-disabled,
&:disabled, { &:disabled {
background-color: $gray-300; background-color: $gray-300;
color: $gray-500; color: $gray-500;
text-decoration: none; text-decoration: none;

43
apps/block_scout_web/assets/css/components/_card.scss
Unescape View File

@ -1,38 +1,43 @@
.card { .card {
border: none; border-radius: 10px;
box-shadow: 0 5px 40px -5px rgba($black, 0.25); border: none;
border-radius: 0; box-shadow: 0 5px 40px -5px rgba(#000, 0.25);
margin-bottom: 3rem; margin-bottom: 3rem;
&-primary { &-primary {
background-color: $primary; background-color: $primary;
} }
} }
.card-header { .card-header {
background-color: $white; background-color: #fff;
&-tabs { &-tabs {
margin: (-$card-spacer-y) (-$card-spacer-x); margin: (-$card-spacer-y) (-$card-spacer-x);
} }
} }
.card-title { .card-title {
line-height: 2.2rem; color: #333;
margin-bottom: 2rem; font-size: 18px;
font-weight: normal;
line-height: 2.2rem;
margin-bottom: 2rem;
} }
.card-body { .card-body {
padding: 2.25rem 1.25rem; padding: 30px;
} }
.card-server-response-body { .card-server-response-body {
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
} }
.card-chain-blocks { .card-chain-blocks {
height: auto; height: auto;
@include media-breakpoint-down(md) { height: 595px; } @include media-breakpoint-down(md) {
height: 595px;
}
} }

72
apps/block_scout_web/assets/css/components/_tile.scss
Unescape View File

@ -1,11 +1,17 @@
$tile-type-block-border-color: $primary !default;
.tile { .tile {
font-size: 12px; border-radius: 4px;
border: 1px solid $border-color;
box-shadow: 0 1px 5px rgba($black, 0.15);
color: $text-muted; color: $text-muted;
font-size: 12px;
line-height: 1.4rem; line-height: 1.4rem;
border: 1px solid $border-color;
border-radius: 2px;
padding: 1rem; padding: 1rem;
box-shadow: 0 1px 5px rgba($black, 0.15);
&.n-p {
padding: 0;
}
& + & { & + & {
margin-top: 1rem; margin-top: 1rem;
@ -18,10 +24,10 @@
&-type { &-type {
&-block { &-block {
border-left: 4px solid $indigo; border-left: 4px solid $tile-type-block-border-color;
.tile-label { .tile-label {
color: $indigo; color: $tile-type-block-border-color;
} }
} }
@ -91,10 +97,10 @@
} }
&-short-name { &-short-name {
overflow: hidden;
max-width: 45%; max-width: 45%;
vertical-align: middle; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle;
} }
} }
@ -129,12 +135,12 @@
} }
&-api-documentation { &-api-documentation {
border-left: 4px solid $primary;
background-color: transparent; background-color: transparent;
width: 100%; border-left: 4px solid $primary;
text-align: left;
padding: 15px;
cursor: pointer; cursor: pointer;
padding: 15px;
text-align: left;
width: 100%;
.tile-label { .tile-label {
color: $primary; color: $primary;
@ -144,18 +150,18 @@
&-status { &-status {
&--error--reason { &--error--reason {
border-top: 2px solid lighten($danger, 10%);
border-right: 2px solid lighten($danger, 10%);
border-bottom: 2px solid lighten($danger, 10%); border-bottom: 2px solid lighten($danger, 10%);
border-right: 2px solid lighten($danger, 10%);
border-top: 2px solid lighten($danger, 10%);
.tile-status-label { .tile-status-label {
color: $danger; color: $danger;
} }
} }
&--awaiting-internal-transactions { &--awaiting-internal-transactions {
border-top: 2px solid lighten($warning, 10%);
border-right: 2px solid lighten($warning, 10%);
border-bottom: 2px solid lighten($warning, 10%); border-bottom: 2px solid lighten($warning, 10%);
border-right: 2px solid lighten($warning, 10%);
border-top: 2px solid lighten($warning, 10%);
.tile-status-label { .tile-status-label {
color: $warning; color: $warning;
@ -165,32 +171,50 @@
} }
.tile-title { .tile-title {
color: #333;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 700;
color: $gray-700; line-height: 1.2;
margin-bottom: 0; margin-bottom: 12px;
padding: 1rem 1rem 0 1rem;
&-hash { &-hash {
font-weight: 300; font-weight: 300;
} }
&-lg { &-lg {
font-size: 16px;
color: $body-color; color: $body-color;
font-size: 16px;
} }
} }
.tile-bottom-contents {
background-color: #f6f7f9;
font-size: 12px;
line-height: 1.2;
padding: 0.8rem 1rem;
}
.tile-transactions {
color: #a3a9b5;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
margin-bottom: 10px;
text-align: left;
}
.tile-badge { .tile-badge {
line-height: 1.25rem;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
padding: 0; padding: 0;
width: 2.5rem;
line-height: 1.25rem;
text-align: center; text-align: center;
width: 2.5rem;
} }
.tile-muted { .tile-muted {
border-left: 1px solid $border-color;
background-color: $gray-100; background-color: $gray-100;
border-left: 1px solid $border-color;
box-shadow: none; box-shadow: none;
} }
@ -209,6 +233,6 @@
} }
.tile-image { .tile-image {
max-width: 140px;
max-height: 140px; max-height: 140px;
max-width: 140px;
} }

1
apps/block_scout_web/assets/css/theme/_poa_variables.scss
Unescape View File

@ -3,3 +3,4 @@ $secondary: #7dd79f;
$tertiary: #997fdc; $tertiary: #997fdc;
$header-links-color-active: #333; $header-links-color-active: #333;
$button-secondary-color: $primary;

2
apps/block_scout_web/assets/css/theme/_posdao_variables.scss
Unescape View File

@ -8,3 +8,5 @@ $dashboard-banner-gradient-end: #1e4168;
$dashboard-line-color-price: $secondary; $dashboard-line-color-price: $secondary;
$dashboard-line-color-market: $primary; $dashboard-line-color-market: $primary;
$tile-type-block-border-color: $secondary !default;

38
apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex
Unescape View File

@ -1,30 +1,32 @@
<div class="col-lg-3 fade-up-blocks-chain" data-selector="chain-block" data-block-number="<%= @block.number %>"> <div class="col-lg-3 fade-up-blocks-chain" data-selector="chain-block" data-block-number="<%= @block.number %>">
<div class="tile tile-type-block d-flex flex-column"> <div class="tile tile-type-block n-p d-flex flex-column">
<%= link( <%= link(
@block, @block,
class: "tile-title", class: "tile-title",
to: block_path(BlockScoutWeb.Endpoint, :show, @block), to: block_path(BlockScoutWeb.Endpoint, :show, @block),
"data-selector": "block-number" "data-selector": "block-number"
) %> ) %>
<div> <div class="tile-bottom-contents">
<span class="mr-2"> <%= gettext("%{count} Transactions", count: Enum.count(@block.transactions)) %> </span> <div class="tile-transactions">
<span class="text-nowrap" data-from-now="<%= @block.timestamp %>"> </span> <span class="mr-2"> <%= gettext("%{count} Transactions", count: Enum.count(@block.transactions)) %> </span>
</div> <span class="text-nowrap" data-from-now="<%= @block.timestamp %>"> </span>
<span class="text-truncate"> </div>
<%= gettext "Miner" %> <div class="text-truncate">
<%= gettext "Miner" %>
<%= render BlockScoutWeb.AddressView, <%= render BlockScoutWeb.AddressView,
"_link.html", "_link.html",
address: @block.miner, address: @block.miner,
contract: false %> contract: false %>
</span> </div>
<%= if BlockScoutWeb.BlockView.show_reward?(@block.rewards) do %> <%= if BlockScoutWeb.BlockView.show_reward?(@block.rewards) do %>
<span class="text-truncate"> <div class="text-truncate">
<%= gettext "Reward" %> <%= gettext "Reward" %>
<%= BlockScoutWeb.BlockView.combined_rewards_value(@block) %> <%= BlockScoutWeb.BlockView.combined_rewards_value(@block) %>
</span> </div>
<% end %> <% end %>
</div>
</div> </div>
</div> </div>

4
apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
Unescape View File

@ -71,7 +71,7 @@
<section class="container"> <section class="container">
<div class="card card-chain-blocks"> <div class="card card-chain-blocks">
<div class="card-body"> <div class="card-body">
<%= link(gettext("View All Blocks →"), to: block_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %> <%= link(gettext("View All Blocks"), to: block_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>
<h2 class="card-title"><%= gettext "Blocks" %></h2> <h2 class="card-title"><%= gettext "Blocks" %></h2>
<div class="row" data-selector="chain-block-list" data-url="<%= chain_blocks_path(@conn, :chain_blocks) %>"> <div class="row" data-selector="chain-block-list" data-url="<%= chain_blocks_path(@conn, :chain_blocks) %>">
<button data-selector="error-message" class="alert alert-danger col-12 text-left" style="display: none;"> <button data-selector="error-message" class="alert alert-danger col-12 text-left" style="display: none;">
@ -92,7 +92,7 @@
<div class="card card-chain-transactions"> <div class="card card-chain-transactions">
<div class="card-body"> <div class="card-body">
<%= link(gettext("View All Transactions →"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %> <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>
<h2 class="card-title"><%= gettext "Transactions" %></h2> <h2 class="card-title"><%= gettext "Transactions" %></h2>
<div data-selector="channel-batching-message" style="display: none;"> <div data-selector="channel-batching-message" style="display: none;">
<div data-selector="reload-button" class="alert alert-info"> <div data-selector="reload-button" class="alert alert-info">

Write Preview
Loading…
Cancel
Save