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

Added media query for md devices for dashboard banner container

Browse Source
pull/2607/head
Yegor San 5 years ago
parent 8e43c71cdf
commit 20d8219c4a
2 changed files with 171 additions and 202 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. 52
      apps/block_scout_web/assets/css/components/_dashboard-banner.scss
  2. 13
      apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex

52
apps/block_scout_web/assets/css/components/_dashboard-banner.scss
Unescape View File

@ -1,16 +1,7 @@
$dashboard-banner-gradient-start: $primary !default;
$dashboard-banner-gradient-end: lighten(
$dashboard-banner-gradient-start,
5%
) !default;
$dashboard-banner-network-plain-container-background-color: lighten(
$dashboard-banner-gradient-end,
5%
) !default;
$dashboard-line-color-price: lighten(
$dashboard-banner-gradient-end,
5%
) !default;
$dashboard-banner-gradient-end: lighten( $dashboard-banner-gradient-start, 5%) !default;
$dashboard-banner-network-plain-container-background-color: lighten( $dashboard-banner-gradient-end, 5%) !default;
$dashboard-line-color-price: lighten( $dashboard-banner-gradient-end, 5%) !default;
$dashboard-line-color-market: $secondary !default;
$dashboard-stats-item-label-color: #fff !default;
$dashboard-stats-item-value-color: rgba(#fff, 0.8) !default;
@ -19,7 +10,6 @@ $dashboard-banner-chart-legend-value-color: $dashboard-stats-item-value-color !d
$dashboard-stats-item-border-color: $primary !default;
$dashboard-banner-network-plain-container-height: 205px;
$dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !default;
.dashboard-banner-container {
@include gradient-container();
margin-bottom: 3rem;
@ -30,6 +20,9 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
@include media-breakpoint-down(sm) {
height: auto;
}
@include media-breakpoint-down(md) {
height: auto;
}
}
.dashboard-banner {
@ -37,7 +30,6 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
justify-content: space-between;
position: relative;
z-index: 9;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
@ -46,7 +38,6 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
.dashboard-banner-network-graph {
flex-grow: 1;
padding: 15px 0 0 0;
@include media-breakpoint-down(md) {
display: flex;
flex-direction: column;
@ -59,15 +50,13 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
margin: 0 0 35px 0;
max-width: 350px;
position: relative;
@include media-breakpoint-down(md) {
flex-grow: 0;
margin-bottom: 20px;
margin-top: auto;
max-width: 100%;
}
> canvas {
>canvas {
max-height: 100%;
max-width: 100%;
width: 100%;
@ -78,25 +67,21 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
display: flex;
/* grid-template-columns: 1fr 1fr; */
padding-bottom: 12px;
.dashboard-banner-chart-legend-item {
padding-bottom: 3px;
padding-left: 12px;
padding-top: 3px;
position: relative;
padding-right: 60px;
@include media-breakpoint-down(md) {
display: flex;
flex-direction: row;
}
@media (max-width: 599px) {
padding-top: 0;
padding-bottom: 0;
flex-direction: column;
}
&::before {
border-radius: 2px;
content: "";
@ -106,16 +91,13 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
top: 0;
width: 4px;
}
&:nth-child(1)::before {
background-color: $dashboard-line-color-price;
}
&:nth-child(2)::before {
background-color: $dashboard-line-color-market;
}
}
.dashboard-banner-chart-legend-label {
color: $dashboard-banner-chart-legend-label-color;
display: block;
@ -123,17 +105,14 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
font-weight: 600;
line-height: 1.2;
margin: 0 0 5px;
@media (max-width: 374px) {
position: relative;
top: -2px;
}
@include media-breakpoint-down(md) {
margin: 0 5px 0 0;
}
}
.dashboard-banner-chart-legend-value {
color: $dashboard-banner-chart-legend-value-color;
display: block;
@ -156,12 +135,10 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
padding: 30px 0 30px 60px;
width: 750px;
position: relative;
@include media-breakpoint-down(lg) {
margin-top: 15px;
width: 550px;
}
@include media-breakpoint-down(md) {
border-top-right-radius: 10px;
height: auto;
@ -172,11 +149,9 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
width: 250px;
box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
}
@include media-breakpoint-down(sm) {
width: 100%;
}
&::after {
background-color: $dashboard-banner-network-plain-container-background-color;
bottom: 0;
@ -189,7 +164,6 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
z-index: -1;
box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
border-top-left-radius: 10px;
@include media-breakpoint-down(md) {
display: none;
}
@ -200,35 +174,25 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
column-gap: 25px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
@include media-breakpoint-down(lg) {
grid-template-columns: 1fr 1fr;
row-gap: 20px;
}
@include media-breakpoint-down(md) {
grid-template-columns: 1fr;
row-gap: 20px;
}
@include media-breakpoint-down(sm) {
column-gap: 10px;
grid-template-columns: 1fr 1fr;
}
@include stats-item(
$dashboard-stats-item-border-color,
$dashboard-stats-item-label-color,
$dashboard-stats-item-value-color
);
@include stats-item( $dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color);
.dashboard-banner-network-stats-item {
@media (max-width: 374px) {
padding-left: calc(0.6rem + 4px);
padding-right: 0.5rem;
}
}
.dashboard-banner-network-stats-value {
@media (max-width: 374px) {
font-size: 0.9rem;

13
apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex
Unescape View File

@ -16,6 +16,11 @@
<%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %>
<% end %>
</h3>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<div class="d-flex justify-content-start text-muted block-details-row">
<!-- # of Transactions -->
<span class="mr-4 block-detail-el"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span>
@ -124,7 +129,7 @@
<h2 class="card-title balance-card-title"><%= gettext "Miner" %></h2>
<div class="text-right">
<!-- Validator's Name -->
<h3 class="address-balance-text text-truncate" data-toggle="tooltip" data-offset ="0 15" data-placement="left" title="" data-original-title="Block Miner / Validator Address">
<h3 class="address-balance-text text-truncate" data-toggle="tooltip" data-offset ="0 20" data-placement="left" title="" data-original-title="Block Miner / Validator Address">
<%= render BlockScoutWeb.AddressView,
"_link.html",
address: @block.miner,
@ -137,9 +142,9 @@
<!-- Validator Reward or Gas-->
<div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0" >
<div class="card-body card-body-flex-column-space-between" data-toggle="tooltip" data-offset ="0 0" data-animation="true" data-placement="left" title="" data-original-title="If Miner: Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees.
If POA: Amount of distributed reward. Currently validators receive 1 POA token + TX fees, and the Emission fund receives 1 POA per validated block.
If xDai: Validators receive Tx fees if collected (If transactions exist in the block)">
<div class="card-body card-body-flex-column-space-between" data-toggle="tooltip" data-offset ="0 0" data-animation="true" data-placement="left" title="" data-original-title="If Miner : Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees.
If POA : Amount of distributed reward. Currently validators receive 1 POA token + TX fees, and the Emission fund receives 1 POA per validated block.
If xDai : Validators receive Tx fees if collected (If transactions exist in the block)">
<%= if show_reward?(@block.rewards) do %>
<h2 class="card-title balance-card-title"><%= gettext "Block Rewards" %></h2>
<div class="text-right">

Write Preview
Loading…
Cancel
Save