From d8684bf21a18f80f41a51c4bcdf73599f7f3d48d Mon Sep 17 00:00:00 2001 From: directcuteo <37619567+directcuteo@users.noreply.github.com> Date: Tue, 5 Nov 2024 19:21:09 +0200 Subject: [PATCH] Frontend - Improve web node loading --- .idea/vcs.xml | 1 + frontend/package.json | 1 + .../web-node-demo-dashboard.component.html | 8 ++++---- .../web-node-demo-dashboard.component.scss | 13 ++++++------ .../web-node-demo-dashboard.component.ts | 20 +++++++++++-------- 5 files changed, 25 insertions(+), 18 deletions(-) diff --git a/.idea/vcs.xml b/.idea/vcs.xml index 35eb1ddfbb..c4f6642370 100644 --- a/.idea/vcs.xml +++ b/.idea/vcs.xml @@ -2,5 +2,6 @@ + \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json index 7ade4400c2..11a9fc103a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,6 +5,7 @@ "install:deps": "npm install", "start": "npm install && ng serve --configuration local --open", "start:dev": "ng serve --configuration development", + "start:dev:mobile": "ng serve --configuration development --host 0.0.0.0", "build": "ng build", "build:prod": "ng build --configuration production", "tests": "npx cypress open --config baseUrl=http://localhost:4200", diff --git a/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.html b/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.html index fffd2a9436..0dd03375e7 100644 --- a/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.html +++ b/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.html @@ -1,11 +1,11 @@
-
-
+
+
Produce blocks, -  right in your browser + right in your browser
@@ -21,7 +21,7 @@
-
+
@for (item of loading; track $index) { diff --git a/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.scss b/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.scss index 0fb76960f3..574f231162 100644 --- a/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.scss +++ b/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.scss @@ -17,10 +17,9 @@ $white: #000000; .data-wrapper { height: calc(100% - 56px - 72px); max-width: 568px; + padding: 10vw 0; .header { - margin-bottom: 56px; - .loading-webnode { font-size: 24px; line-height: 32px; @@ -40,8 +39,10 @@ $white: #000000; } .progress { - height: 380px; - margin: 64px 0; + min-height: 380px; + @media (max-width: 768px) { + min-height: 36vh; + } } } @@ -80,9 +81,9 @@ $white: #000000; } } -@media (max-width: 768px) { +@media (max-width: 568px) { .font-16 { - font-size: 15px; + font-size: 14px; } .loading-webnode span { display: block; diff --git a/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.ts b/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.ts index 4d74dc10ac..30f82835d8 100644 --- a/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.ts +++ b/frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { untilDestroyed } from '@ngneat/until-destroy'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { WebNodeService } from '@core/services/web-node.service'; @@ -6,7 +6,7 @@ import { GlobalErrorHandlerService } from '@openmina/shared'; import { NgClass, NgForOf, NgIf, NgOptimizedImage } from '@angular/common'; import { Router } from '@angular/router'; import { getFirstFeature } from '@shared/constants/config'; -import { trigger, state, style, transition, animate } from '@angular/animations'; +import { animate, state, style, transition, trigger } from '@angular/animations'; import { filter, switchMap, timer } from 'rxjs'; import { LoadingSpinnerComponent } from '@shared/loading-spinner/loading-spinner.component'; import { FileProgressHelper } from '@core/helpers/file-progress.helper'; @@ -53,7 +53,7 @@ export interface WebNodeLoadingStep { ]), ], }) -export class WebNodeDemoDashboardComponent extends StoreDispatcher implements OnInit { +export class WebNodeDemoDashboardComponent extends StoreDispatcher implements OnInit, AfterViewInit { protected readonly WebNodeStepStatus = WebNodeStepStatus; readonly loading: WebNodeLoadingStep[] = [ @@ -87,6 +87,9 @@ export class WebNodeDemoDashboardComponent extends StoreDispatcher implements On this.listenToErrorIssuing(); this.checkWebNodeProgress(); this.fetchPeersInformation(); + } + + ngAfterViewInit(): void { this.buildProgressBar(); } @@ -196,10 +199,10 @@ export class WebNodeDemoDashboardComponent extends StoreDispatcher implements On downloaded: (progress.downloaded / 1e6).toFixed(1), total: (progress.totalSize / 1e6).toFixed(1), }; - // this step is only 1 out of 3. But it counts as 80% of the 100% progress. - // So we need to calculate the total progress based on the current step. - const totalProgress = (progress.progress * this.stepsPercentages[0]) / 100; - this.updateProgressBar(totalProgress); + if (this.svg) { + const totalProgress = (progress.progress * this.stepsPercentages[0]) / 100; + this.updateProgressBar(totalProgress); + } this.detect(); }); } @@ -259,7 +262,8 @@ export class WebNodeDemoDashboardComponent extends StoreDispatcher implements On this.progressBar.append('text') .attr('text-anchor', 'middle') - .attr('dominant-baseline', 'middle') + .attr('alignment-baseline', 'central') + .attr('dominant-baseline', 'central') .attr('font-size', '40px') .attr('fill', 'var(--base-primary)') .attr('opacity', 0.8)