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

SSR: dirty hack to fix initial blockchain scroll

Browse Source
This commit is contained in:
Mononaut
2023-10-29 01:27:19 +00:00
parent abd7f62b20
commit 9cd33825bf
4 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,4 +35,10 @@
</div>
</div>
<ng-container *serverOnly>
<!-- disgusting hack to apply an initial scroll to server-side rendered blockchain bar -->
<img *ngIf="!stateService.isLiquid()" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="pixel" style="visibility: hidden; position: absolute;" onload="(() => { const b = document.getElementById('blockchain-container'); const d = document.getElementById('divider'); if (b && d) { b.scrollLeft = d.getBoundingClientRect().x - (window.innerWidth * (window.innerWidth >= 768 ? 0.5 : 0.95)); }})()">
<img *ngIf="stateService.isLiquid()" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="pixel" style="visibility: hidden; position: absolute;" onload="(() => { const b = document.getElementById('blockchain-container'); const d = document.getElementById('divider'); if (b && d) { b.scrollLeft = d.getBoundingClientRect().x - (window.innerWidth >= 768 ? 420 : (window.innerWidth * 0.5)); }})()">
</ng-container>
<router-outlet></router-outlet>

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

@@ -59,7 +59,7 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
hasMenu = false;
constructor(
private stateService: StateService,
public stateService: StateService,
private cd: ChangeDetectorRef,
) {
this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform);