+
+ Next Block
+
+
+
@@ -48,7 +53,15 @@
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
index 145569342..77e287447 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@@ -17,6 +17,16 @@
}
}
+.mempool-graph {
+ height: 295px;
+ @media (min-width: 768px) {
+ height: 325px;
+ }
+ @media (min-width: 992px) {
+ height: 400px;
+ }
+}
+
.card-title {
font-size: 1rem;
color: #4a68b9;
@@ -135,7 +145,12 @@
}
.card {
- height: 385px;
+ @media (min-width: 768px) {
+ height: 420px;
+ }
+ @media (min-width: 992px) {
+ height: 500px;
+ }
}
.list-card {
height: 410px;
@@ -145,7 +160,16 @@
}
.mempool-block-wrapper {
- max-height: 380px;
- max-width: 380px;
+ max-height: 430px;
+ max-width: 430px;
margin: auto;
+
+ @media (min-width: 768px) {
+ max-height: 344px;
+ max-width: 344px;
+ }
+ @media (min-width: 992px) {
+ max-height: 430px;
+ max-width: 430px;
+ }
}
\ No newline at end of file
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
index c39dbd253..07a513e7f 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
import { SeoService } from '../../../services/seo.service';
import { WebsocketService } from '../../../services/websocket.service';
import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
@@ -30,6 +30,8 @@ export class AcceleratorDashboardComponent implements OnInit {
minedAccelerations$: Observable
;
loadingBlocks: boolean = true;
+ graphHeight: number = 300;
+
constructor(
private seoService: SeoService,
private websocketService: WebsocketService,
@@ -40,6 +42,7 @@ export class AcceleratorDashboardComponent implements OnInit {
}
ngOnInit(): void {
+ this.onResize();
this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
this.pendingAccelerations$ = interval(30000).pipe(
@@ -121,4 +124,15 @@ export class AcceleratorDashboardComponent implements OnInit {
return normalColors[feeLevelIndex] || normalColors[mempoolFeeColors.length - 1];
}
}
+
+ @HostListener('window:resize', ['$event'])
+ onResize(): void {
+ if (window.innerWidth >= 992) {
+ this.graphHeight = 330;
+ } else if (window.innerWidth >= 768) {
+ this.graphHeight = 245;
+ } else {
+ this.graphHeight = 210;
+ }
+ }
}