User interface reviewed
This commit is contained in:
parent
2d1123c613
commit
c2130a1c97
8 changed files with 75 additions and 57 deletions
|
|
@ -13,6 +13,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
|
||||
|
||||
### 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
|
||||
Settings form redesigned - read/write data from database is not working properly.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<div align="center" mat-dialog-title>
|
||||
<h4 class="text">Scan to make payment</h4>
|
||||
<h4 class="text">Scan to make payment</h4>
|
||||
</div>
|
||||
|
||||
<mat-dialog-content>
|
||||
<div align="center" id="checkout-qr"></div>
|
||||
<div align="center"
|
||||
id="checkout-qr">
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions>
|
||||
<table cellspacing="0" width="100%">
|
||||
<table cellspacing="0"
|
||||
width="100%">
|
||||
<tr>
|
||||
<td>
|
||||
<button mat-raised-button color="primary" (click)="confirm()">
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ p.price{
|
|||
}
|
||||
|
||||
.buttons-class-cart{
|
||||
background-color: #ff4722;
|
||||
background-color: #ff5722;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
|
|
|
|||
|
|
@ -1,38 +1,42 @@
|
|||
<div *ngIf="items.length > 0">
|
||||
<div class="availableItems" >
|
||||
Available Items:
|
||||
Available Items:
|
||||
</div>
|
||||
<div class="card" *ngFor="let item of itemsUpdate | async">
|
||||
<mat-card>
|
||||
<table cellspacing="0" width="100%" >
|
||||
<tr>
|
||||
<td style="font-family: Roboto Mono;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
height: 20px;">
|
||||
{{item.name}}
|
||||
</td>
|
||||
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family: Roboto Mono;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
height: 20px;">
|
||||
{{item.description}}
|
||||
</td>
|
||||
<td>
|
||||
<div class="rv_price" *ngIf="!owner.zats">
|
||||
<img class="icon"
|
||||
src="/assets/zec_rv.png"
|
||||
height="16px">{{(item.cost/zecPrice) | number: '1.06'}}
|
||||
[{{item.cost | number: '1.02' | currency: getCurrency() }}]
|
||||
</div>
|
||||
<p class="price" *ngIf="owner.zats"> ⓩ(item.cost/zecPrice)*100000000 | number: '1.0-0'}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cellspacing="0" width="100%" >
|
||||
<tr>
|
||||
<td style="font-family: Roboto Mono;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
height: 20px;">
|
||||
{{item.name}}
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family: Roboto Mono;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
height: 20px;">
|
||||
{{item.description}}
|
||||
</td>
|
||||
<td>
|
||||
<div class="rv_price"
|
||||
*ngIf="!owner.zats">
|
||||
<img class="icon"
|
||||
src="/assets/zec_rv.png"
|
||||
height="16px">
|
||||
{{(item.cost/zecPrice) | number: '1.06'}}
|
||||
[{{item.cost | number: '1.02' | currency: getCurrency() }}]
|
||||
</div>
|
||||
<p class="price"
|
||||
*ngIf="owner.zats">
|
||||
ⓩ(item.cost/zecPrice)*100000000 | number: '1.0-0'}}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<mat-card-actions>
|
||||
<table cellspacing="0" width="100%">
|
||||
<tr>
|
||||
|
|
@ -45,17 +49,20 @@
|
|||
</button>
|
||||
</td>
|
||||
<td align="right">
|
||||
<!--
|
||||
<button class="btn">
|
||||
<fa-icon [icon]="getIcon(order)" >
|
||||
|
||||
</fa-icon>
|
||||
</button>
|
||||
-->
|
||||
<button mat-raised-button color="primary"
|
||||
class="buttons-class-cart"
|
||||
(click)="addToOrder(item._id!)">
|
||||
<mat-icon [inline]="true">shopping_cart</mat-icon>
|
||||
<!--
|
||||
<button class="btn">
|
||||
<fa-icon [icon]="getIcon(order)" >
|
||||
|
||||
</fa-icon>
|
||||
</button>
|
||||
-->
|
||||
<button mat-raised-button
|
||||
color="primary"
|
||||
class="buttons-class-cart"
|
||||
(click)="addToOrder(item._id!)">
|
||||
<mat-icon [inline]="true">
|
||||
shopping_cart
|
||||
</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -67,8 +74,10 @@
|
|||
<p *ngIf = "items.length <= 0">No items yet!</p>
|
||||
<br>
|
||||
<button class="text"
|
||||
mat-raised-button
|
||||
(click)="openDialog()">
|
||||
<mat-icon class="icon">add</mat-icon>
|
||||
Add item
|
||||
mat-raised-button
|
||||
(click)="openDialog()">
|
||||
<mat-icon class="icon">
|
||||
add
|
||||
</mat-icon>
|
||||
Add item
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ img.icon{
|
|||
|
||||
.buttons-class {
|
||||
font-family: 'Spartan', sans-serif;
|
||||
background-color: #ff4722;
|
||||
background-color: #ff5722;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
height: 25px !important;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.settings-title {
|
||||
font-family: 'Spartan', sans-serif;
|
||||
background: #ff4722;
|
||||
background: #ff5722;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.small{
|
||||
|
|
|
|||
|
|
@ -27,16 +27,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div *ngIf="orientation">
|
||||
<app-order></app-order>
|
||||
<app-item-list [zecPrice]="price"></app-item-list>
|
||||
<app-order></app-order>
|
||||
<app-item-list [zecPrice]="price"></app-item-list>
|
||||
</div>
|
||||
<div *ngIf="!orientation" align="center">
|
||||
<table cellspacing="0" width="75%">
|
||||
<div *ngIf="!orientation"
|
||||
align="center">
|
||||
<table cellspacing="0"
|
||||
width="85%" >
|
||||
<tr>
|
||||
<td>
|
||||
<td width="50%">
|
||||
<app-item-list [zecPrice]="price"></app-item-list>
|
||||
</td>
|
||||
<td>
|
||||
<td style="vertical-align: top;" width="50%" >
|
||||
<app-order></app-order>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Reference in a new issue