User interface reviewed

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

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.

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()">

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;

View file

@ -12,7 +12,6 @@
height: 20px;"> height: 20px;">
{{item.name}} {{item.name}}
</td> </td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -23,13 +22,18 @@
{{item.description}} {{item.description}}
</td> </td>
<td> <td>
<div class="rv_price" *ngIf="!owner.zats"> <div class="rv_price"
*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/zecPrice) | number: '1.06'}}
[{{item.cost | number: '1.02' | currency: getCurrency() }}] [{{item.cost | number: '1.02' | currency: getCurrency() }}]
</div> </div>
<p class="price" *ngIf="owner.zats"> &#x24e9;(item.cost/zecPrice)*100000000 | number: '1.0-0'}}</p> <p class="price"
*ngIf="owner.zats">
&#x24e9;(item.cost/zecPrice)*100000000 | number: '1.0-0'}}
</p>
</td> </td>
</tr> </tr>
</table> </table>
@ -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
color="primary"
class="buttons-class-cart" class="buttons-class-cart"
(click)="addToOrder(item._id!)"> (click)="addToOrder(item._id!)">
<mat-icon [inline]="true">shopping_cart</mat-icon> <mat-icon [inline]="true">
shopping_cart
</mat-icon>
</button> </button>
</td> </td>
</tr> </tr>
@ -69,6 +76,8 @@
<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
</mat-icon>
Add item Add item
</button> </button>

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;

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;

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{

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>