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

Account menu overlays UI instead of pushing it

Browse Source
This commit is contained in:
natsoni 2024-03-18 16:49:33 +09:00
parent 34d93abbf6
commit 2c6f210e8e
No known key found for this signature in database
GPG Key ID: C65917583181743B
5 changed files with 5 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/master-page/master-page.component.html
View File

@ -90,7 +90,7 @@
<div class="flex-grow-1 d-flex flex-column"> <div class="flex-grow-1 d-flex flex-column">
<app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert> <app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
<main style="min-width: 375px" [style]="menuOpen ? 'max-width: calc(100vw - 225px)' : 'max-width: 100vw'"> <main style="min-width: 375px; max-width: 100vw">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>

9
frontend/src/app/components/menu/menu.component.scss
View File

@ -1,12 +1,12 @@
.sidenav { .sidenav {
z-index: 1; z-index: 10;
background-color: transparent; background-color: transparent;
width: 225px; width: 225px;
height: calc(100vh - 65px); height: calc(100vh - 65px);
position: sticky; position: fixed;
top: 65px; top: 65px;
transition: 0.25s; left: -250px;
margin-left: -250px; transition: left 0.25s;
box-shadow: 5px 0px 30px 0px #000; box-shadow: 5px 0px 30px 0px #000;
padding-bottom: 20px; padding-bottom: 20px;
@media (max-width: 613px) { @media (max-width: 613px) {
@ -26,7 +26,6 @@
} }
.sidenav.open { .sidenav.open {
margin-left: 0px;
left: 0px; left: 0px;
display: block; display: block;
background-color: #1d1f31; background-color: #1d1f31;

2
frontend/src/app/components/start/start.component.html
View File

@ -13,8 +13,6 @@
<div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr" #blockchainWrapper> <div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr" #blockchainWrapper>
<div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer <div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
[class.menu-open]="menuOpen"
[class.menu-closing]="menuSliding && !menuOpen"
[class.with-menu]="hasMenu" [class.with-menu]="hasMenu"
(mousedown)="onMouseDown($event)" (mousedown)="onMouseDown($event)"
(pointerdown)="onPointerDown($event)" (pointerdown)="onPointerDown($event)"

10
frontend/src/app/components/start/start.component.scss
View File

@ -11,16 +11,6 @@
transform: translateX(0px); transform: translateX(0px);
transition: transform 0; transition: transform 0;
&.menu-open {
transform: translateX(-112.5px);
transition: transform 0.25s;
}
&.menu-closing {
transform: translateX(0px);
transition: transform 0.25s;
}
&.with-menu { &.with-menu {
width: calc(100% + 120px); width: calc(100% + 120px);
} }

20
frontend/src/app/components/start/start.component.ts
View File

@ -32,7 +32,6 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
@ViewChild('blockchainWrapper', { static: true }) blockchainWrapper: ElementRef; @ViewChild('blockchainWrapper', { static: true }) blockchainWrapper: ElementRef;
@ViewChild('blockchainContainer') blockchainContainer: ElementRef; @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
resetScrollSubscription: Subscription; resetScrollSubscription: Subscription;
menuSubscription: Subscription;
isMobile: boolean = false; isMobile: boolean = false;
isiOS: boolean = false; isiOS: boolean = false;
@ -56,9 +55,6 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
scrollLeft: number = null; scrollLeft: number = null;
chainWidth: number = window.innerWidth; chainWidth: number = window.innerWidth;
menuOpen: boolean = false;
menuSliding: boolean = false;
menuTimeout: number;
hasMenu = false; hasMenu = false;
@ -165,12 +161,6 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
} }
}); });
this.menuSubscription = this.stateService.menuOpen$.subscribe((open) => {
if (this.menuOpen !== open) {
this.menuOpen = open;
this.applyMenuScroll(this.menuOpen);
}
});
} }
ngAfterViewChecked(): void { ngAfterViewChecked(): void {
@ -223,15 +213,6 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
} }
} }
applyMenuScroll(opening: boolean): void {
this.menuSliding = true;
window.clearTimeout(this.menuTimeout);
this.menuTimeout = window.setTimeout(() => {
this.menuSliding = false;
this.cd.markForCheck();
}, 300);
}
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(): void { onResize(): void {
this.chainWidth = window.innerWidth; this.chainWidth = window.innerWidth;
@ -518,6 +499,5 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
this.markBlockSubscription.unsubscribe(); this.markBlockSubscription.unsubscribe();
this.blockCounterSubscription.unsubscribe(); this.blockCounterSubscription.unsubscribe();
this.resetScrollSubscription.unsubscribe(); this.resetScrollSubscription.unsubscribe();
this.menuSubscription.unsubscribe();
} }
} }