gofnnp/h-usersite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #14305 Изменение дизайна WPA Кофе-лайка: change loading

Browse Source
This commit is contained in:
nikolay 2023-05-16 11:04:25 +04:00
parent b81ee7f713
commit ca0fa2bfa6
11 changed files with 40 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
angular/src/app/app.component.html
View File

@ -1,2 +1 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
<app-footer></app-footer>

1
angular/src/app/presentation-options/default-option/components/footer/footer.component.scss
View File

@ -4,6 +4,7 @@
align-items: center; align-items: center;
gap: 20px; gap: 20px;
padding-bottom: 100px; padding-bottom: 100px;
padding-top: 52px;
h3 { h3 {
margin: 0; margin: 0;
font-family: Montserrat; font-family: Montserrat;

13
angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html
View File

@ -1,6 +1,6 @@
<app-navbar title="Карта гостя" (backEvent)="logout()"></app-navbar> <app-navbar title="Карта гостя" (backEvent)="logout()"></app-navbar>
<ng-container *ngIf="!this.loyaltyProgram.purchaseData.$loading"> <ng-container *ngIf="!this.loyaltyProgram.purchaseData.$loading && customerInfo">
<div class="guest-card"> <div class="guest-card">
<div class="top-info"> <div class="top-info">
<div class="top-info__level"> <div class="top-info__level">
@ -93,13 +93,16 @@
Программы лояльности</a Программы лояльности</a
> >
</div> </div>
<app-footer></app-footer>
</ng-container> </ng-container>
<ng-container *ngIf="this.loyaltyProgram.purchaseData.$loading"> <ng-container *ngIf="this.loyaltyProgram.purchaseData.$loading || !customerInfo">
<ng-container <ng-container
*ngTemplateOutlet="spinner; context: { $implicit: 85 }" *ngTemplateOutlet="spinner; context: { $implicit: 85 }"
></ng-container> ></ng-container>
</ng-container> </ng-container>
<ng-template #spinner let-diameter> <ng-template #spinner let-diameter>
<mat-spinner [strokeWidth]="3" [diameter]="diameter"></mat-spinner> <div class="center wrapper">
<mat-spinner [strokeWidth]="3" [diameter]="diameter"></mat-spinner>
</div>
</ng-template> </ng-template>

8
angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss
View File

@ -1,4 +1,4 @@
:host { :host {
.guest-card { .guest-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -199,9 +199,13 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-decoration: none; text-decoration: none;
margin: 17px 0 22px; margin: 17px 0 0;
} }
} }
.wrapper {
padding-top: 20px;
}
} }
app-accordion { app-accordion {

1
angular/src/app/presentation-options/default-option/pages/login/login.component.html
View File

@ -105,3 +105,4 @@
</ng-container> </ng-container>
</p> </p>
</ng-template> </ng-template>
<app-footer></app-footer>

2
angular/src/app/presentation-options/default-option/pages/loyality-program/loyality-program.component.html
View File

@ -97,3 +97,5 @@
</ng-container> </ng-container>
</app-accordion> </app-accordion>
</div> </div>
<app-footer></app-footer>

2
angular/src/app/presentation-options/default-option/pages/loyality-program/loyality-program.component.scss
View File

@ -1,3 +1,3 @@
.loyality-program { .loyality-program {
margin-bottom: 20px;
} }

12
angular/src/app/presentation-options/first-option/pages/guest-card/guest-card.component.html
View File

@ -1,5 +1,6 @@
<app-navbar title="Карта гостя" (backEvent)="logout()"></app-navbar> <app-navbar title="Карта гостя" (backEvent)="logout()"></app-navbar>
<ng-container *ngIf="!purchaseData.$loading">
<div class="guest-card"> <div class="guest-card">
<div class="guest-card__qr" (click)="qrCodeClick()"> <div class="guest-card__qr" (click)="qrCodeClick()">
<ng-container *ngIf="customerInfo"> <ng-container *ngIf="customerInfo">
@ -192,7 +193,16 @@
Программы лояльности</a Программы лояльности</a
> >
</div> </div>
<app-footer></app-footer>
</ng-container>
<ng-container *ngIf="purchaseData.$loading">
<ng-container
*ngTemplateOutlet="spinner; context: { $implicit: 85 }"
></ng-container>
</ng-container>
<ng-template #spinner let-diameter> <ng-template #spinner let-diameter>
<mat-spinner [strokeWidth]="3" [diameter]="diameter"></mat-spinner> <div class="center wrapper">
<mat-spinner [strokeWidth]="3" [diameter]="diameter"></mat-spinner>
</div>
</ng-template> </ng-template>

4
angular/src/app/presentation-options/first-option/pages/guest-card/guest-card.component.scss
View File

@ -188,6 +188,10 @@
margin: 17px 0 22px; margin: 17px 0 22px;
} }
} }
.wrapper {
padding-top: 20px;
}
} }
app-accordion { app-accordion {

1
angular/src/app/presentation-options/first-option/pages/login/login.component.html
View File

@ -105,3 +105,4 @@
</ng-container> </ng-container>
</p> </p>
</ng-template> </ng-template>
<app-footer></app-footer>

5
angular/src/styles.scss
View File

@ -17,6 +17,11 @@ table{border-collapse:collapse;border-spacing:0}
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
} }
.center {
display: flex;
justify-content: center;
}
body { body {
background-color: #231F20; background-color: #231F20;