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

clocktower top blocks & layout adjustment

Browse Source
This commit is contained in:
Mononaut
2023-04-19 00:21:02 +09:00
parent 293c636665
commit b125ded0f2
18 changed files with 489 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/app/components/clock/clock-a.component.html
View File

@@ -1,19 +1,17 @@
<div class="clock-wrapper">
<app-clock-face>
<div class="block-wrapper">
<ng-container *ngIf="block && block.height >= 0">
<div class="block-cube">
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side right" [style]="blockStyle"></div>
<div class="side left" [style]="blockStyle"></div>
<div class="side front" [style]="blockStyle"></div>
<div class="side back" [style]="blockStyle"></div>
</div>
<div class="title-wrapper">
<h1 class="block-height">{{ block.height }}</h1>
</div>
</ng-container>
</div>
</app-clock-face>
</div>
<app-clock-face>
<div class="block-wrapper">
<ng-container *ngIf="block && block.height >= 0">
<div class="block-cube">
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side right" [style]="blockStyle"></div>
<div class="side left" [style]="blockStyle"></div>
<div class="side front" [style]="blockStyle"></div>
<div class="side back" [style]="blockStyle"></div>
</div>
<div class="title-wrapper">
<h1 class="block-height">{{ block.height }}</h1>
</div>
</ng-container>
</div>
</app-clock-face>

28
frontend/src/app/components/clock/clock-b.component.html
View File

@@ -1,15 +1,13 @@
<div class="clock-wrapper">
<app-clock-face>
<div class="block-wrapper">
<ng-container *ngIf="block && block.height >= 0">
<div class="block-sizer" [style]="blockSizerStyle">
<app-mempool-block-overview [index]="0"></app-mempool-block-overview>
</div>
<div class="fader"></div>
<div class="title-wrapper">
<h1 class="block-height">{{ block.height }}</h1>
</div>
</ng-container>
</div>
</app-clock-face>
</div>
<app-clock-face>
<div class="block-wrapper">
<ng-container *ngIf="block && block.height >= 0">
<div class="block-sizer" [style]="blockSizerStyle">
<app-mempool-block-overview [index]="0"></app-mempool-block-overview>
</div>
<div class="fader"></div>
<div class="title-wrapper">
<h1 class="block-height">{{ block.height }}</h1>
</div>
</ng-container>
</div>
</app-clock-face>

7
frontend/src/app/components/clock/clock-b.component.ts
View File

@@ -44,10 +44,9 @@ export class ClockBComponent implements OnInit {
@HostListener('window:resize', ['$event'])
resizeCanvas(): void {
const screenSize = Math.min(window.innerWidth, window.innerHeight);
const baseSize = 0.92 * screenSize;
const size = Math.ceil(baseSize / 75) * 75;
const margin = screenSize - size;
const clockSize = Math.min(window.innerWidth, 0.78125 * window.innerHeight);
const size = Math.ceil(clockSize / 75) * 75;
const margin = (clockSize - size) / 2;
this.blockSizerStyle = {
transform: `translate(${margin}px, ${margin}px)`,
width: `${size}px`,

12
frontend/src/app/components/clock/clock.component.scss
View File

@@ -1,13 +1,3 @@
.clock-wrapper {
--clock-width: min(100vw, 100vh);
position: relative;
width: 100vw;
max-width: var(--clock-width);
height: 100vh;
max-height: var(--clock-width);
margin: auto;
}
.title-wrapper {
position: absolute;
left: 0;
@@ -53,7 +43,7 @@
right: 0;
top: 0;
bottom: 0;
background: radial-gradient(transparent 0%, transparent 55%, #11131f 65%, #11131f 100%);
background: radial-gradient(transparent 0%, transparent 48%, #11131f 62%, #11131f 100%);
}
.block-cube {