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. 358
      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

358
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-start: $primary !default;
$dashboard-banner-gradient-end: lighten( $dashboard-banner-gradient-end: lighten( $dashboard-banner-gradient-start, 5%) !default;
$dashboard-banner-gradient-start, $dashboard-banner-network-plain-container-background-color: lighten( $dashboard-banner-gradient-end, 5%) !default;
5% $dashboard-line-color-price: lighten( $dashboard-banner-gradient-end, 5%) !default;
) !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-line-color-market: $secondary !default;
$dashboard-stats-item-label-color: #fff !default; $dashboard-stats-item-label-color: #fff !default;
$dashboard-stats-item-value-color: rgba(#fff, 0.8) !default; $dashboard-stats-item-value-color: rgba(#fff, 0.8) !default;
@ -19,219 +10,192 @@ $dashboard-banner-chart-legend-value-color: $dashboard-stats-item-value-color !d
$dashboard-stats-item-border-color: $primary !default; $dashboard-stats-item-border-color: $primary !default;
$dashboard-banner-network-plain-container-height: 205px; $dashboard-banner-network-plain-container-height: 205px;
$dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !default; $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !default;
.dashboard-banner-container { .dashboard-banner-container {
@include gradient-container(); @include gradient-container();
margin-bottom: 3rem; margin-bottom: 3rem;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: relative; position: relative;
height: 249px; height: 249px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
height: auto; height: auto;
} }
@include media-breakpoint-down(md) {
height: auto;
}
} }
.dashboard-banner { .dashboard-banner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
z-index: 9; z-index: 9;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(sm) { flex-direction: column;
flex-direction: column; }
}
} }
.dashboard-banner-network-graph { .dashboard-banner-network-graph {
flex-grow: 1; flex-grow: 1;
padding: 15px 0 0 0; padding: 15px 0 0 0;
@include media-breakpoint-down(md) {
@include media-breakpoint-down(md) { display: flex;
display: flex; flex-direction: column;
flex-direction: column; padding-top: 20px;
padding-top: 20px; }
}
} }
.dashboard-banner-chart { .dashboard-banner-chart {
flex-grow: 1; flex-grow: 1;
margin: 0 0 35px 0; margin: 0 0 35px 0;
max-width: 350px; max-width: 350px;
position: relative;
@include media-breakpoint-down(md) {
flex-grow: 0;
margin-bottom: 20px;
margin-top: auto;
max-width: 100%;
}
> canvas {
max-height: 100%;
max-width: 100%;
width: 100%;
}
}
.dashboard-banner-chart-legend {
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; position: relative;
padding-right: 60px;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
display: flex; flex-grow: 0;
flex-direction: row; margin-bottom: 20px;
margin-top: auto;
max-width: 100%;
} }
>canvas {
@media (max-width: 599px) { max-height: 100%;
padding-top: 0; max-width: 100%;
padding-bottom: 0; width: 100%;
flex-direction: column;
} }
}
&::before { .dashboard-banner-chart-legend {
border-radius: 2px; display: flex;
content: ""; /* grid-template-columns: 1fr 1fr; */
height: 100%; padding-bottom: 12px;
left: 0; .dashboard-banner-chart-legend-item {
position: absolute; padding-bottom: 3px;
top: 0; padding-left: 12px;
width: 4px; 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: "";
height: 100%;
left: 0;
position: absolute;
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 {
&:nth-child(1)::before { color: $dashboard-banner-chart-legend-label-color;
background-color: $dashboard-line-color-price; display: block;
font-size: 12px;
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 {
&:nth-child(2)::before { color: $dashboard-banner-chart-legend-value-color;
background-color: $dashboard-line-color-market; display: block;
font-size: 12px;
font-weight: normal;
line-height: 1.2;
} }
}
.dashboard-banner-chart-legend-label {
color: $dashboard-banner-chart-legend-label-color;
display: block;
font-size: 12px;
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;
font-size: 12px;
font-weight: normal;
line-height: 1.2;
}
} }
.dashboard-banner-network-plain-container { .dashboard-banner-network-plain-container {
align-items: center; align-items: center;
align-self: flex-end; align-self: flex-end;
background-color: $dashboard-banner-network-plain-container-background-color;
border-top-left-radius: 10px;
display: flex;
height: $dashboard-banner-network-plain-container-height;
justify-content: center;
margin: 45px 0 0 30px;
max-width: 100%;
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;
justify-content: flex-start;
margin-left: 0;
max-width: 100%;
padding: 20px 0 20px 20px;
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; background-color: $dashboard-banner-network-plain-container-background-color;
bottom: 0;
content: "";
display: block;
height: $dashboard-banner-network-plain-container-height;
left: 0;
position: absolute;
width: 9999px;
z-index: -1;
box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
border-top-left-radius: 10px; border-top-left-radius: 10px;
display: flex;
height: $dashboard-banner-network-plain-container-height;
justify-content: center;
margin: 45px 0 0 30px;
max-width: 100%;
padding: 30px 0 30px 60px;
width: 750px;
position: relative;
@include media-breakpoint-down(lg) {
margin-top: 15px;
width: 550px;
}
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
display: none; border-top-right-radius: 10px;
height: auto;
justify-content: flex-start;
margin-left: 0;
max-width: 100%;
padding: 20px 0 20px 20px;
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;
content: "";
display: block;
height: $dashboard-banner-network-plain-container-height;
left: 0;
position: absolute;
width: 9999px;
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;
}
} }
}
} }
.dashboard-banner-network-stats { .dashboard-banner-network-stats {
column-gap: 25px; column-gap: 25px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
@include media-breakpoint-down(lg) {
@include media-breakpoint-down(lg) { grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr; row-gap: 20px;
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
);
.dashboard-banner-network-stats-item {
@media (max-width: 374px) {
padding-left: calc(0.6rem + 4px);
padding-right: 0.5rem;
} }
} @include media-breakpoint-down(md) {
grid-template-columns: 1fr;
.dashboard-banner-network-stats-value { row-gap: 20px;
@media (max-width: 374px) { }
font-size: 0.9rem; @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);
.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)) %> <%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %>
<% end %> <% end %>
</h3> </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"> <div class="d-flex justify-content-start text-muted block-details-row">
<!-- # of Transactions --> <!-- # of Transactions -->
<span class="mr-4 block-detail-el"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span> <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> <h2 class="card-title balance-card-title"><%= gettext "Miner" %></h2>
<div class="text-right"> <div class="text-right">
<!-- Validator's Name --> <!-- 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, <%= render BlockScoutWeb.AddressView,
"_link.html", "_link.html",
address: @block.miner, address: @block.miner,
@ -137,9 +142,9 @@
<!-- Validator Reward or Gas--> <!-- Validator Reward or Gas-->
<div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0" > <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. <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 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 xDai : Validators receive Tx fees if collected (If transactions exist in the block)">
<%= if show_reward?(@block.rewards) do %> <%= if show_reward?(@block.rewards) do %>
<h2 class="card-title balance-card-title"><%= gettext "Block Rewards" %></h2> <h2 class="card-title balance-card-title"><%= gettext "Block Rewards" %></h2>
<div class="text-right"> <div class="text-right">

Write Preview
Loading…
Cancel
Save