machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix TV View graph height. (#527)

Browse Source 
* Fix graph alignment.
Only show the graph on desktop resolutions.

* Fix mempool-info-chart chart alignment.
This commit is contained in:
Miguel Medeiros 2021-05-18 16:59:48 -03:00 committed by GitHub
parent f6f5b69487
commit 50b94f8b72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 94 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/app/components/television/television.component.html
View File

@ -1,21 +1,23 @@
<div id="tv-wrapper"> <div id="tv-wrapper">
<div *ngIf="loading" class="text-center"> <div *ngIf="loading" class="loading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
<div class="chart-holder" *ngIf="mempoolStats.length"> <div class="tv-only" i18n="television.tv-only">TV only</div>
<app-mempool-graph dir="ltr" [data]="mempoolStats"></app-mempool-graph>
</div>
<div class="text-center" class="blockchain-wrapper"> <div class="tv-container" *ngIf="!loading">
<div class="position-container">
<app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks>
<div id="divider"></div> <div class="chart-holder" *ngIf="mempoolStats.length">
<app-mempool-graph dir="ltr" [data]="mempoolStats"></app-mempool-graph>
</div> </div>
<div class="blockchain-wrapper">
<div class="position-container">
<app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks>
<div id="divider"></div>
</div>
</div>
</div> </div>
</div> </div>

115
frontend/src/app/components/television/television.component.scss
View File

@ -1,49 +1,96 @@
.loading {
margin: auto;
width: 100%;
display: flex;
text-align: center;
justify-content: center;
height: 100vh;
align-items: center;
}
#tv-wrapper { #tv-wrapper {
height: 100%; height: 100vh;
padding: 10px;
padding-top: 20px;
}
.blockchain-wrapper {
overflow: hidden; overflow: hidden;
} position: relative;
.position-container {
position: absolute;
left: 50%;
bottom: 170px;
} }
.chart-holder { .chart-holder {
height: calc(100% - 220px); height: calc(100vh - 270px);
min-height: 600px;
padding-left: 20px;
width: 97%;
padding-top: 70px;
@media(min-width: 992px){
padding-top: 30px;
}
} }
#divider { .blockchain-wrapper {
width: 3px;
height: 175px;
left: 0;
top: -40px;
background-image: url('/resources/divider-new.png');
background-repeat: repeat-y;
position: absolute;
}
#divider > img {
position: absolute;
left: -100px;
top: -28px;
}
@media (min-width: 1920px) {
.position-container { .position-container {
transform: scale(1.3); position: absolute;
bottom: 210px; left: 50%;
bottom: 170px;
} }
.chart-holder { .chart-holder {
height: calc(100% - 280px); height: calc(100% - 220px);
}
#divider {
width: 3px;
height: 175px;
left: 0;
top: -40px;
background-image: url('/resources/divider-new.png');
background-repeat: repeat-y;
position: absolute;
img {
position: absolute;
left: -100px;
top: -28px;
}
}
@media (min-width: 1920px) {
.position-container {
transform: scale(1.3);
bottom: 210px;
}
.chart-holder {
height: calc(100% - 280px);
}
}
:host ::ng-deep .ct-legend {
top: 25px;
} }
} }
:host ::ng-deep .ct-legend { .tv-only {
top: 25px; display: block;
height: 100vh;
width: 100%;
position: relative;
display: flex;
text-align: center;
flex-direction: row;
align-items: center;
justify-content: center;
@media(min-width: 768px) {
display: none;
}
@media(max-height: 720px) {
display: flex;
}
} }
.tv-container {
display: none;
@media(min-width: 768px) {
display: flex;
}
@media(max-height: 720px) {
display: none;
}
}

2
frontend/src/app/dashboard/dashboard.component.scss
View File

@ -58,7 +58,7 @@
} }
.item { .item {
width: 124px; width: 124px;
margin: 0px auto 20px; margin: 0px auto 0px;
display: inline-block; display: inline-block;
@media (min-width: 400px) { @media (min-width: 400px) {
width: 50%; width: 50%;