(add) home blocks style

6 years ago · 0466761253
parent 72e887a777
commit 0466761253
8 changed files with 127 additions and 88 deletions
--- a/apps/block_scout_web/assets/css/_typography.scss
+++ b/apps/block_scout_web/assets/css/_typography.scss
@ -1,3 +1,5 @@
+$common-link-color: $primary !default;
+
 body {
  font-family: $font-family-sans-serif;
  font-size: 12px;
@ -20,10 +22,10 @@ h3 {
 }

 h4 {
+  color: $gray-600;
  font-size: 16px;
-  line-height: 24px;
  font-weight: 300;
-  color: $gray-600;
+  line-height: 24px;
  margin-top: 4px;

  &.underline {
@ -44,12 +46,12 @@ p {
 }

 a {
+  color: $common-link-color;
  text-decoration: none;
-  color: $tertiary;

  &:hover,
  &:focus {
-    color: darken($tertiary, 20%);
+    color: darken($common-link-color, 20%);
    text-decoration: underline;
  }

--- a/apps/block_scout_web/assets/css/components/_button.scss
+++ b/apps/block_scout_web/assets/css/components/_button.scss
@ -1,25 +1,28 @@
+$button-primary-color: $primary !default;
+$button-secondary-color: $secondary !default;
+
 .button {
+  border-radius: 2px;
  border: none;
+  cursor: pointer;
  display: inline-block;
+  line-height: 1.2;
+  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
-  white-space:  nowrap;
-  padding: 8px 10px;
-  border-radius: 2px;
-  cursor: pointer;
-  -webkit-transition: all 0.25s;
  transition: all 0.25s;
+  white-space:  nowrap;

  &-primary {
-    background-color: $primary;
-    color: $white;
-    border: 1px solid $primary;
+    background-color: $button-primary-color;
+    border: 1px solid $button-primary-color;
+    color: #fff;

    &:hover,
    &:focus {
-      color: $white;
-      background-color: darken($primary, 10%);
-      border-color: darken($primary, 10%);
+      background-color: darken($button-primary-color, 10%);
+      border-color: darken($button-primary-color, 10%);
+      color: #fff;
      text-decoration: none;
    }

@ -31,18 +34,18 @@
  }

  &-secondary {
-    border: 1px solid $tertiary;
-    color: $tertiary;
-    background-color: $white;
+    background-color: #fff;
+    border: 1px solid $button-secondary-color;
+    color: $button-secondary-color;
    font-weight: 400;

    &:hover,
    &:focus {
-      background-color: darken($tertiary, 10%);
-      border-color: darken($tertiary, 10%);
-      color: $white;
-      text-decoration: none;
+      background-color: darken($button-secondary-color, 10%);
+      border-color: darken($button-secondary-color, 10%);
+      color: #fff;
      outline: none !important;
+      text-decoration: none;
    }
  }

@ -75,7 +78,7 @@
  }

  &-disabled,
-  &:disabled, {
+  &:disabled {
    background-color: $gray-300;
    color: $gray-500;
    text-decoration: none;
--- a/apps/block_scout_web/assets/css/components/_card.scss
+++ b/apps/block_scout_web/assets/css/components/_card.scss
@ -1,38 +1,43 @@
 .card {
-  border: none;
-  box-shadow: 0 5px 40px -5px rgba($black, 0.25);
-  border-radius: 0;
-  margin-bottom: 3rem;
-
-  &-primary {
-    background-color: $primary;
-  }
+    border-radius: 10px;
+    border: none;
+    box-shadow: 0 5px 40px -5px rgba(#000, 0.25);
+    margin-bottom: 3rem;
+
+    &-primary {
+        background-color: $primary;
+    }
 }

 .card-header {
-  background-color: $white;
+    background-color: #fff;

-  &-tabs {
-    margin: (-$card-spacer-y) (-$card-spacer-x);
-  }
+    &-tabs {
+        margin: (-$card-spacer-y) (-$card-spacer-x);
+    }
 }

 .card-title {
-  line-height: 2.2rem;
-  margin-bottom: 2rem;
+    color: #333;
+    font-size: 18px;
+    font-weight: normal;
+    line-height: 2.2rem;
+    margin-bottom: 2rem;
 }

 .card-body {
-  padding: 2.25rem 1.25rem;
+    padding: 30px;
 }

 .card-server-response-body {
-  max-height: 400px;
-  overflow-y: auto;
+    max-height: 400px;
+    overflow-y: auto;
 }

 .card-chain-blocks {
-  height: auto;
+    height: auto;

-  @include media-breakpoint-down(md) { height: 595px; }
-}
+    @include media-breakpoint-down(md) {
+        height: 595px;
+    }
+}
--- a/apps/block_scout_web/assets/css/components/_tile.scss
+++ b/apps/block_scout_web/assets/css/components/_tile.scss
@ -1,11 +1,17 @@
+$tile-type-block-border-color: $primary !default;
+
 .tile {
-  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid $border-color;
+  box-shadow: 0 1px 5px rgba($black, 0.15);
  color: $text-muted;
+  font-size: 12px;
  line-height: 1.4rem;
-  border: 1px solid $border-color;
-  border-radius: 2px;
  padding: 1rem;
-  box-shadow: 0 1px 5px rgba($black, 0.15);
+
+  &.n-p {
+    padding: 0;
+  }

  & + & {
    margin-top: 1rem;
@ -18,10 +24,10 @@
  &-type {

    &-block {
-      border-left: 4px solid $indigo;
+      border-left: 4px solid $tile-type-block-border-color;

      .tile-label {
-        color: $indigo;
+        color: $tile-type-block-border-color;
      }
    }

@ -91,10 +97,10 @@
      }

      &-short-name {
-        overflow: hidden;
        max-width: 45%;
-        vertical-align: middle;
+        overflow: hidden;
        text-overflow: ellipsis;
+        vertical-align: middle;
      }
    }

@ -129,12 +135,12 @@
    }

    &-api-documentation {
-      border-left: 4px solid $primary;
      background-color: transparent;
-      width: 100%;
-      text-align: left;
-      padding: 15px;
+      border-left: 4px solid $primary;
      cursor: pointer;
+      padding: 15px;
+      text-align: left;
+      width: 100%;

      .tile-label {
        color: $primary;
@ -144,18 +150,18 @@

  &-status {
    &--error--reason {
-      border-top: 2px solid lighten($danger, 10%);
-      border-right: 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 {
        color: $danger;
      }
    }
    &--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-right: 2px solid lighten($warning, 10%);
+      border-top: 2px solid lighten($warning, 10%);

      .tile-status-label {
        color: $warning;
@ -165,32 +171,50 @@
 }

 .tile-title {
+  color: #333;
  font-size: 12px;
-  font-weight: 600;
-  color: $gray-700;
-  margin-bottom: 0;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 12px;
+  padding: 1rem 1rem 0 1rem;

  &-hash {
    font-weight: 300;
  }

  &-lg {
-    font-size: 16px;
    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 {
+  line-height: 1.25rem;
  margin-bottom: 0.1rem;
  padding: 0;
-  width: 2.5rem;
-  line-height: 1.25rem;
  text-align: center;
+  width: 2.5rem;
 }

 .tile-muted {
-  border-left: 1px solid $border-color;
  background-color: $gray-100;
+  border-left: 1px solid $border-color;
  box-shadow: none;
 }

@ -209,6 +233,6 @@
 }

 .tile-image {
-  max-width: 140px;
  max-height: 140px;
+  max-width: 140px;
 }
--- a/apps/block_scout_web/assets/css/theme/_poa_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_poa_variables.scss
@ -3,3 +3,4 @@ $secondary:     #7dd79f;
 $tertiary:      #997fdc;

 $header-links-color-active: #333;
+$button-secondary-color: $primary;
--- a/apps/block_scout_web/assets/css/theme/_posdao_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss
@ -7,4 +7,6 @@ $dashboard-banner-gradient-start: $secondary;
 $dashboard-banner-gradient-end: #1e4168;

 $dashboard-line-color-price: $secondary;
-$dashboard-line-color-market: $primary;
+$dashboard-line-color-market: $primary;
+
+$tile-type-block-border-color: $secondary !default;
--- a/apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex
@ -1,30 +1,32 @@
 <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(
          @block,
          class: "tile-title",
          to: block_path(BlockScoutWeb.Endpoint, :show, @block),
          "data-selector": "block-number"
        ) %>
-    <div>
-      <span class="mr-2"> <%= gettext("%{count} Transactions", count: Enum.count(@block.transactions)) %> </span>
-      <span class="text-nowrap" data-from-now="<%= @block.timestamp %>"> </span>
-    </div>
-    <span class="text-truncate">
-      <%= gettext "Miner" %>
+    <div class="tile-bottom-contents">
+      <div class="tile-transactions">
+        <span class="mr-2"> <%= gettext("%{count} Transactions", count: Enum.count(@block.transactions)) %> </span>
+        <span class="text-nowrap" data-from-now="<%= @block.timestamp %>"> </span>
+      </div>
+      <div class="text-truncate">
+        <%= gettext "Miner" %>

-      <%= render BlockScoutWeb.AddressView,
-        "_link.html",
-        address: @block.miner,
-        contract: false %>
-    </span>
+        <%= render BlockScoutWeb.AddressView,
+          "_link.html",
+          address: @block.miner,
+          contract: false %>
+      </div>

-    <%= if BlockScoutWeb.BlockView.show_reward?(@block.rewards) do %>
-      <span class="text-truncate">
-        <%= gettext "Reward" %>
+      <%= if BlockScoutWeb.BlockView.show_reward?(@block.rewards) do %>
+        <div class="text-truncate">
+          <%= gettext "Reward" %>

-        <%= BlockScoutWeb.BlockView.combined_rewards_value(@block) %>
-      </span>
-    <% end %>
+          <%= BlockScoutWeb.BlockView.combined_rewards_value(@block) %>
+        </div>
+      <% end %>
+    </div>
  </div>
 </div>
--- a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
@ -71,7 +71,7 @@
 <section class="container">
  <div class="card card-chain-blocks">
    <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>
      <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;">
@ -92,7 +92,7 @@

  <div class="card card-chain-transactions">
    <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>
      <div data-selector="channel-batching-message" style="display: none;">
        <div data-selector="reload-button" class="alert alert-info">