diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html index af3bf52b1..d56a115e5 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.html +++ b/frontend/src/app/components/blockchain/blockchain.component.html @@ -1,4 +1,4 @@ -
+
@@ -10,7 +10,7 @@
- +
diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index 32225598a..c428874ba 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.scss +++ b/frontend/src/app/components/blockchain/blockchain.component.scss @@ -19,6 +19,13 @@ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ + + + transition: transform 2s; + + &.flipped { + transform: rotate(180deg); + } } .position-container { diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index 2e3224a9c..913fd29a9 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -29,6 +29,8 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges { connected: boolean = true; blockDisplayMode: 'size' | 'fees'; + flipped: boolean = false; + dividerOffset: number | null = null; mempoolOffset: number | null = null; positionStyle = { @@ -90,10 +92,14 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges { } toggleBlockDisplayMode(): void { - if (this.blockDisplayMode === 'size') this.blockDisplayMode = 'fees'; - else this.blockDisplayMode = 'size'; - this.StorageService.setValue('block-display-mode-preference', this.blockDisplayMode); - this.stateService.blockDisplayMode$.next(this.blockDisplayMode); + if (this.isA1()) { + this.flipped = !this.flipped; + } else { + if (this.blockDisplayMode === 'size') this.blockDisplayMode = 'fees'; + else this.blockDisplayMode = 'size'; + this.StorageService.setValue('block-display-mode-preference', this.blockDisplayMode); + this.stateService.blockDisplayMode$.next(this.blockDisplayMode); + } } onMempoolWidthChange(width): void { @@ -126,6 +132,11 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges { } } + isA1(): boolean { + const now = new Date(); + return now.getMonth() === 3 && now.getDate() === 1; + } + onResize(): void { const width = this.containerWidth || window.innerWidth; if (width >= 768) {