Vergara_Tech/zgo
Vergara_Tech/zgo
2
1
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity

User interface reviewed

Browse source
This commit is contained in:
Rene V. Vergara A. 2022-07-20 20:00:06 -05:00
parent 2d1123c613
commit c2130a1c97
8 changed files with 75 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -13,6 +13,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Changed ### Changed
- (2022-07-20) Buttons in Main form have been enclosed to display
inside a fixed area.
On wide screens, new Order will display below main buttons.
- (2022-07-19) Main form buttons redesigned - (2022-07-19) Main form buttons redesigned
Settings form redesigned - read/write data from database is not working properly. Settings form redesigned - read/write data from database is not working properly.

9
src/app/checkout/checkout.component.html
View file

@ -1,12 +1,15 @@
<div align="center" mat-dialog-title> <div align="center" mat-dialog-title>
<h4 class="text">Scan to make payment</h4> <h4 class="text">Scan to make payment</h4>
</div> </div>
<mat-dialog-content> <mat-dialog-content>
<div align="center" id="checkout-qr"></div> <div align="center"
id="checkout-qr">
</div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>
<table cellspacing="0" width="100%"> <table cellspacing="0"
width="100%">
<tr> <tr>
<td> <td>
<button mat-raised-button color="primary" (click)="confirm()"> <button mat-raised-button color="primary" (click)="confirm()">

2
src/app/items/item-list/item-list.component.css
View file

@ -36,7 +36,7 @@ p.price{
} }
.buttons-class-cart{ .buttons-class-cart{
background-color: #ff4722; background-color: #ff5722;
color: white; color: white;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;

97
src/app/items/item-list/item-list.component.html
View file

@ -1,38 +1,42 @@
<div *ngIf="items.length > 0"> <div *ngIf="items.length > 0">
<div class="availableItems" > <div class="availableItems" >
Available Items: Available Items:
</div> </div>
<div class="card" *ngFor="let item of itemsUpdate | async"> <div class="card" *ngFor="let item of itemsUpdate | async">
<mat-card> <mat-card>
<table cellspacing="0" width="100%" > <table cellspacing="0" width="100%" >
<tr> <tr>
<td style="font-family: Roboto Mono; <td style="font-family: Roboto Mono;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
height: 20px;"> height: 20px;">
{{item.name}} {{item.name}}
</td> </td>
<td></td>
<td></td> </tr>
</tr> <tr>
<tr> <td style="font-family: Roboto Mono;
<td style="font-family: Roboto Mono; font-size: 16px;
font-size: 16px; font-weight: 400;
font-weight: 400; height: 20px;">
height: 20px;"> {{item.description}}
{{item.description}} </td>
</td> <td>
<td> <div class="rv_price"
<div class="rv_price" *ngIf="!owner.zats"> *ngIf="!owner.zats">
<img class="icon" <img class="icon"
src="/assets/zec_rv.png" src="/assets/zec_rv.png"
height="16px">{{(item.cost/zecPrice) | number: '1.06'}} height="16px">
[{{item.cost | number: '1.02' | currency: getCurrency() }}] {{(item.cost/zecPrice) | number: '1.06'}}
</div> [{{item.cost | number: '1.02' | currency: getCurrency() }}]
<p class="price" *ngIf="owner.zats"> &#x24e9;(item.cost/zecPrice)*100000000 | number: '1.0-0'}}</p> </div>
</td> <p class="price"
</tr> *ngIf="owner.zats">
</table> &#x24e9;(item.cost/zecPrice)*100000000 | number: '1.0-0'}}
</p>
</td>
</tr>
</table>
<mat-card-actions> <mat-card-actions>
<table cellspacing="0" width="100%"> <table cellspacing="0" width="100%">
<tr> <tr>
@ -45,17 +49,20 @@
</button> </button>
</td> </td>
<td align="right"> <td align="right">
<!-- <!--
<button class="btn"> <button class="btn">
<fa-icon [icon]="getIcon(order)" > <fa-icon [icon]="getIcon(order)" >
</fa-icon> </fa-icon>
</button> </button>
--> -->
<button mat-raised-button color="primary" <button mat-raised-button
class="buttons-class-cart" color="primary"
(click)="addToOrder(item._id!)"> class="buttons-class-cart"
<mat-icon [inline]="true">shopping_cart</mat-icon> (click)="addToOrder(item._id!)">
<mat-icon [inline]="true">
shopping_cart
</mat-icon>
</button> </button>
</td> </td>
</tr> </tr>
@ -67,8 +74,10 @@
<p *ngIf = "items.length <= 0">No items yet!</p> <p *ngIf = "items.length <= 0">No items yet!</p>
<br> <br>
<button class="text" <button class="text"
mat-raised-button mat-raised-button
(click)="openDialog()"> (click)="openDialog()">
<mat-icon class="icon">add</mat-icon> <mat-icon class="icon">
Add item add
</mat-icon>
Add item
</button> </button>

2
src/app/order/order.component.css
View file

@ -52,7 +52,7 @@ img.icon{
.buttons-class { .buttons-class {
font-family: 'Spartan', sans-serif; font-family: 'Spartan', sans-serif;
background-color: #ff4722; background-color: #ff5722;
color: white; color: white;
font-weight: 500; font-weight: 500;
height: 25px !important; height: 25px !important;

2
src/app/settings/settings.component.css
View file

@ -4,7 +4,7 @@
.settings-title { .settings-title {
font-family: 'Spartan', sans-serif; font-family: 'Spartan', sans-serif;
background: #ff4722; background: #ff5722;
color: white; color: white;
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;

1
src/app/viewer/viewer.component.css
View file

@ -19,6 +19,7 @@
margin-bottom: 12px; margin-bottom: 12px;
font-weight: 500; font-weight: 500;
color: white; color: white;
max-width: 85%;
} }
.small{ .small{

14
src/app/viewer/viewer.component.html
View file

@ -27,16 +27,18 @@
</div> </div>
</div> </div>
<div *ngIf="orientation"> <div *ngIf="orientation">
<app-order></app-order> <app-order></app-order>
<app-item-list [zecPrice]="price"></app-item-list> <app-item-list [zecPrice]="price"></app-item-list>
</div> </div>
<div *ngIf="!orientation" align="center"> <div *ngIf="!orientation"
<table cellspacing="0" width="75%"> align="center">
<table cellspacing="0"
width="85%" >
<tr> <tr>
<td> <td width="50%">
<app-item-list [zecPrice]="price"></app-item-list> <app-item-list [zecPrice]="price"></app-item-list>
</td> </td>
<td> <td style="vertical-align: top;" width="50%" >
<app-order></app-order> <app-order></app-order>
</td> </td>
</tr> </tr>