(fix) dashboard graph tablet style

pull/1844/head
Gabriel Rodriguez Alsina 6 years ago
parent 116f35f9aa
commit 47c69cd1eb
  1. 47
      apps/block_scout_web/assets/css/components/_dashboard-banner.scss

@ -32,14 +32,13 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
position: absolute;
right: 0;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
display: none;
}
}
}
.dashboard-banner {
align-items: flex-end;
display: flex;
justify-content: space-between;
margin-bottom: 3rem;
@ -47,14 +46,17 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
z-index: 9;
@include media-breakpoint-down(sm) {
align-items: center;
flex-direction: column;
}
}
.dashboard-banner-network-graph {
flex-grow: 1;
padding: 15px 0 0 0;
@include media-breakpoint-down(md) {
padding-top: 20px;
}
}
.dashboard-banner-chart {
@ -64,13 +66,11 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
position: relative;
@include media-breakpoint-down(md) {
margin: 0 0 20px 0;
max-width: 300px;
width: 100%;
margin-bottom: 20px;
max-width: 100%;
}
> canvas {
// height: 100px;
max-height: 100%;
max-width: 100%;
width: 100%;
@ -136,6 +136,7 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
.dashboard-banner-network-plain-container {
align-items: center;
align-self: flex-end;
background-color: $dashboard-banner-network-plain-container-background-color;
border-top-left-radius: 10px;
display: flex;
@ -147,16 +148,21 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
width: 750px;
@include media-breakpoint-down(md) {
align-items: flex-start;
flex-direction: column;
margin-left: 30px;
}
@include media-breakpoint-down(sm) {
border-top-right-radius: 10px;
margin: 0;
padding: 15px 0 15px 15px;
height: auto;
justify-content: flex-start;
margin-left: 15px;
margin-top: 30px;
max-width: 100%;
padding: 20px 0 20px 20px;
width: 250px;
}
// @include media-breakpoint-down(sm) {
// border-top-right-radius: 10px;
// margin: 0;
// padding: 15px 0 15px 15px;
// }
}
.dashboard-banner-network-stats {
@ -165,15 +171,16 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
flex-shrink: 0;
grid-template-columns: 1fr 1fr 1fr;
@include media-breakpoint-down(md) {
grid-template-columns: 1fr;
row-gap: 20px;
}
@include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color);
.dashboard-banner-network-stats-item {
@include media-breakpoint-down(sm) {
margin-bottom: 25px;
&:last-child {
margin-bottom: 0;
}
}
}
}
Loading…
Cancel
Save