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

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

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

View File

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

View File

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

View File

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