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

[accelerator] fix preview UX on mobile when there is an error/warning

Browse Source
This commit is contained in:
nymkappa 2023-11-23 17:00:57 +09:00
parent 2d5964b81e
commit c11551de7b
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
4 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
View File

@ -1,14 +1,16 @@
<span id="successAlert" class="m-0 p-0 d-block" style="height: 1px;"></span>
<div class="row" *ngIf="showSuccess"> <div class="row" *ngIf="showSuccess">
<div class="col" id="successAlert"> <div class="col">
<div class="alert alert-success"> <div class="alert alert-success">
Transaction has now been <a class="alert-link" routerLink="/services/accelerator/history">submitted</a> to mining pools for acceleration. Transaction has now been <a class="alert-link" routerLink="/services/accelerator/history">submitted</a> to mining pools for acceleration.
</div> </div>
</div> </div>
</div> </div>
<span id="mempoolError" class="m-0 p-0 d-block" style="height: 1px;"></span>
<div class="row" *ngIf="error"> <div class="row" *ngIf="error">
<div class="col" id="mempoolError"> <div class="col">
<app-mempool-error [error]="error"></app-mempool-error> <app-mempool-error [error]="error" [alertClass]="error === 'waitlisted' ? 'alert-mempool' : 'alert-danger'"></app-mempool-error>
</div> </div>
</div> </div>

8
frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
View File

@ -1,5 +1,4 @@
import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener } from '@angular/core'; import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from '../../services/api.service'; import { ApiService } from '../../services/api.service';
import { Subscription, catchError, of, tap } from 'rxjs'; import { Subscription, catchError, of, tap } from 'rxjs';
import { StorageService } from '../../services/storage.service'; import { StorageService } from '../../services/storage.service';
@ -63,7 +62,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
constructor( constructor(
private apiService: ApiService, private apiService: ApiService,
private storageService: StorageService, private storageService: StorageService,
private router: Router, private cd: ChangeDetectorRef
) { } ) { }
ngOnDestroy(): void { ngOnDestroy(): void {
@ -163,13 +162,14 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
scrollToPreview(id: string, position: ScrollLogicalPosition) { scrollToPreview(id: string, position: ScrollLogicalPosition) {
const acceleratePreviewAnchor = document.getElementById(id); const acceleratePreviewAnchor = document.getElementById(id);
if (acceleratePreviewAnchor) { if (acceleratePreviewAnchor) {
this.cd.markForCheck();
acceleratePreviewAnchor.scrollIntoView({ acceleratePreviewAnchor.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
inline: position, inline: position,
block: position, block: position,
}); });
} }
} }
/** /**
* Send acceleration request * Send acceleration request

2
frontend/src/app/shared/components/mempool-error/mempool-error.component.html
View File

@ -1,2 +1,2 @@
<div class="alert alert-danger" [innerHTML]="errorContent"> <div class="alert" [class]="alertClass" [innerHTML]="errorContent">
</div> </div>

1
frontend/src/app/shared/components/mempool-error/mempool-error.component.ts
View File

@ -33,6 +33,7 @@ export function isMempoolError(error: string) {
}) })
export class MempoolErrorComponent implements OnInit { export class MempoolErrorComponent implements OnInit {
@Input() error: string; @Input() error: string;
@Input() alertClass = 'alert-danger';
errorContent: SafeHtml; errorContent: SafeHtml;
constructor(private sanitizer: DomSanitizer) { } constructor(private sanitizer: DomSanitizer) { }