highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-08 20:08:32 +02:00
Code Issues 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 *ngIf="loading" class="text-center">
<div *ngIf="loading" class="loading">
<div class="spinner-border text-light"></div>
</div>
<div class="chart-holder" *ngIf="mempoolStats.length">
<app-mempool-graph dir="ltr" [data]="mempoolStats"></app-mempool-graph>
</div>
<div class="tv-only" i18n="television.tv-only">TV only</div>
<div class="text-center" class="blockchain-wrapper">
<div class="position-container">
<app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks>
<div class="tv-container" *ngIf="!loading">
<div id="divider"></div>
<div class="chart-holder" *ngIf="mempoolStats.length">
<app-mempool-graph dir="ltr" [data]="mempoolStats"></app-mempool-graph>
</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>

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 {
height: 100%;
padding: 10px;
padding-top: 20px;
}
.blockchain-wrapper {
height: 100vh;
overflow: hidden;
}
.position-container {
position: absolute;
left: 50%;
bottom: 170px;
position: relative;
}
.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 {
width: 3px;
height: 175px;
left: 0;
top: -40px;
background-image: url('/resources/divider-new.png');
background-repeat: repeat-y;
position: absolute;
}
.blockchain-wrapper {
#divider > img {
position: absolute;
left: -100px;
top: -28px;
}
@media (min-width: 1920px) {
.position-container {
transform: scale(1.3);
bottom: 210px;
position: absolute;
left: 50%;
bottom: 170px;
}
.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 {
top: 25px;
.tv-only {
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 {
width: 124px;
margin: 0px auto 20px;
margin: 0px auto 0px;
display: inline-block;
@media (min-width: 400px) {
width: 50%;