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

clock size query params

Browse Source
This commit is contained in:
Mononaut 2023-04-20 05:30:24 +09:00
parent 3bf269fea9
commit b92d7dedd1
3 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/components/clock/clock.component.ts
View File

@ -25,6 +25,8 @@ export class ClockComponent implements OnInit {
blockStyle;
blockSizerStyle;
wrapperStyle;
limitWidth: number;
limitHeight: number;
gradientColors = {
'': ['#9339f4', '#105fb0'],
@ -40,16 +42,18 @@ export class ClockComponent implements OnInit {
private websocketService: WebsocketService,
private route: ActivatedRoute,
private cd: ChangeDetectorRef,
) {}
) {
this.route.queryParams.subscribe((params) => {
this.hideStats = params && params.stats === 'false';
this.limitWidth = Number.parseInt(params.width) || null;
this.limitHeight = Number.parseInt(params.height) || null;
});
}
ngOnInit(): void {
this.resizeCanvas();
this.websocketService.want(['blocks']);
this.route.queryParams.subscribe((params) => {
this.hideStats = params && params.stats === 'false';
});
this.blocksSubscription = this.stateService.blocks$
.subscribe(([block]) => {
if (block) {
@ -78,9 +82,11 @@ export class ClockComponent implements OnInit {
@HostListener('window:resize', ['$event'])
resizeCanvas(): void {
this.chainWidth = window.innerWidth;
this.chainHeight = Math.max(60, window.innerHeight / 8);
this.clockSize = Math.min(800, window.innerWidth, window.innerHeight - (1.4 * this.chainHeight));
const windowWidth = this.limitWidth || window.innerWidth;
const windowHeight = this.limitHeight || window.innerHeight;
this.chainWidth = windowWidth;
this.chainHeight = Math.max(60, windowHeight / 8);
this.clockSize = Math.min(800, windowWidth, windowHeight - (1.4 * this.chainHeight));
const size = Math.ceil(this.clockSize / 75) * 75;
const margin = (this.clockSize - size) / 2;
this.blockSizerStyle = {
@ -90,7 +96,9 @@ export class ClockComponent implements OnInit {
};
this.wrapperStyle = {
'--clock-width': `${this.clockSize}px`,
'--chain-height': `${this.chainHeight}px`
'--chain-height': `${this.chainHeight}px`,
'width': this.limitWidth ? `${this.limitWidth}px` : undefined,
'height': this.limitHeight ? `${this.limitHeight}px` : undefined,
};
this.cd.markForCheck();
}

5
frontend/src/app/components/clockchain/clockchain.component.html
View File

@ -1,4 +1,7 @@
<div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
<div
class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" #container
[class.ltr-transition]="ltrTransitionEnabled" [style.width]="width + 'px'" [style.height]="height + 'px'"
>
<div class="position-container" [ngClass]="network ? network : ''" [style.top]="(height / 3) + 'px'">
<span>
<div class="blocks-wrapper">

3
frontend/src/app/components/clockchain/clockchain.component.scss
View File

@ -21,9 +21,8 @@
.position-container {
position: absolute;
left: 0;
left: 50%;
top: 0;
transform: translateX(50vw);
}
.black-background {