Enhance UI look and feel

This commit is contained in:
Rene Vergara 2021-11-18 09:57:22 -06:00
parent 2265ab6512
commit e5ff05d814
17 changed files with 66 additions and 18 deletions

1
.gitignore vendored
View File

@ -45,3 +45,4 @@ testem.log
Thumbs.db
txs.json
.angular

View File

@ -1,3 +1,3 @@
.text {
font-family: "Roboto Mono", monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}

View File

@ -1,3 +1,3 @@
.text {
font-family: "Roboto Mono", monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}

View File

@ -1,5 +1,5 @@
.text {
font-family: 'Roboto Mono', monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}
a{
@ -18,9 +18,12 @@ ul{
}
.mini {
font-size: 9px;
font-size: 10px;
line-height: 0.8;
}
.icon {
font-family: "Material Icons";
}
.logo {
margin-top: 5px;
}

View File

@ -1,6 +1,6 @@
<mat-toolbar color="primary">
<span align="center">
<img src="/assets/logo.png" height="45px" />
<img class="logo" src="/assets/logo-new-white.png" height="40px" />
</span>
<span class="spacer"></span>
<span align="center">

View File

@ -1,5 +1,5 @@
.text {
font-family: "Roboto Mono", monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}
input[type=number]{

View File

@ -1,5 +1,5 @@
.text {
font-family: 'Roboto Mono', monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}
input[type=number]{

View File

@ -1,3 +1,3 @@
.text {
font-family: 'Roboto Mono', monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}

View File

@ -1,9 +1,9 @@
.card {
font-family: 'Roboto Mono', monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}
.text {
font-family: 'Roboto Mono', monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}
.small {
font-size: 75%;

View File

@ -1,4 +1,7 @@
.text{
font-family: 'Saira Semi Condensed', sans-serif;
}
.number{
font-family: 'Roboto Mono', monospace;
}
img.icon{
@ -19,6 +22,7 @@ img.icon{
}
.total{
font-size: large;
font-family: 'Roboto Mono', monospace;
}
img.total{
margin-bottom:-2px;

View File

@ -25,7 +25,7 @@
<mat-expansion-panel class="text" *ngFor = "let order of orders">
<mat-expansion-panel-header class="text" >
<mat-panel-title>
<span class="price"><img src="/assets/zec-roboto.png" height="50%" />{{order.totalZec}}</span>
<span class="price number"><img src="/assets/zec-roboto.png" height="50%" />{{order.totalZec}}</span>
</mat-panel-title>
<mat-panel-description>
{{order.timestamp | date: 'short'}}
@ -39,3 +39,7 @@
</mat-expansion-panel>
</mat-accordion>
<p class="text" *ngIf = "orders.length <= 0">No orders</p>
<mat-divider></mat-divider>
<div align="center">
<p class="text"> <mat-icon class="icon" inline>copyright</mat-icon> 2021 ZGo </p>
</div>

View File

@ -8,6 +8,7 @@ import { ScanComponent} from '../scan/scan.component';
import { Tx } from '../tx.model';
import {User} from '../user.model';
import { Subscription, Observable } from 'rxjs';
import { take } from 'rxjs/operators';
import { v4 as uuidv4 } from 'uuid';
var QRCode = require('easyqrcodejs');
var URLSafeBase64 = require('urlsafe-base64');
@ -146,7 +147,7 @@ export class LoginComponent implements OnInit {
dialogRef.afterClosed().subscribe((val) => {
console.log('Awaiting confirmation');
this.confirmedMemo = val;
this.heightUpdate.subscribe((block) => {
this.heightUpdate.pipe(take(1)).subscribe(block => {
this.targetBlock = block + 10;
});
});

View File

@ -1,7 +1,10 @@
.text {
font-family: "Roboto Mono", monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}
.number{
font-family: 'Roboto Mono', monospace;
}
img.icon{
margin-bottom: -3px;
}

View File

@ -8,8 +8,8 @@
<tr>
<td>Order Total:</td>
<td align="right">
<p class="text">{{total | currency: 'USD'}}</p>
<p class="text"><img class="icon" src="/assets/zec-roboto.png" width="14px" />{{(total/price) | number: '1.0-6'}}</p>
<p class="number">{{total | currency: 'USD'}}</p>
<p class="number"><img class="icon" src="/assets/zec-roboto.png" width="14px" />{{(total/price) | number: '1.0-6'}}</p>
</td>
</tr>
</table>

View File

@ -1,9 +1,13 @@
* {
font-family: 'Roboto Mono', monospace;
font-family: 'Saira Semi Condensed', sans-serif;
}
.icon{
font-family: 'Material Icons';
}
.small{
font-size: x-small;
margin-top: 0px;
}
h3{
margin-bottom: 0px;
}

View File

@ -3,11 +3,32 @@
<h3>{{(ownerUpdate | async)!.name}}</h3>
<p class="small">{{ shortenZaddr((ownerUpdate | async)!.address) }}</p>
<span align="center">
<button mat-raised-button [routerLink]="['/orders']">View Orders</button>
<button mat-raised-button class="text" (click)="openSettings()">
<mat-icon class="icon">manage_accounts</mat-icon>
</button>
<a href="https://zgo.cash/" mat-raised-button target="_blank" rel="noopener noreferrer">
<mat-icon class="icon">help</mat-icon>
</a>
</span>
<button mat-raised-button [routerLink]="['/orders']">View Orders</button>
</div>
<div *ngIf="orientation">
<app-order></app-order>
<app-item-list></app-item-list>
</div>
<div *ngIf="!orientation" align="center">
<table cellspacing="0" width="75%">
<tr>
<td>
<app-item-list></app-item-list>
</td>
<td>
<app-order></app-order>
</td>
</tr>
</table>
</div>
<mat-divider></mat-divider>
<div align="center">
<p> <mat-icon class="icon" inline>copyright</mat-icon> 2021 ZGo </p>
</div>

View File

@ -32,6 +32,7 @@ export class ViewerComponent implements OnInit {
public addrUpdate: Observable<string>;
public ownerUpdate: Observable<Owner>;
public userUpdate: Observable<User>;
orientation: boolean = false;
constructor(
public fullnodeService: FullnodeService,
@ -51,6 +52,7 @@ export class ViewerComponent implements OnInit {
}
ngOnInit(){
this.orientation = (window.innerWidth <= 500);
this.ownerUpdate.subscribe((owner) => {
this.message = owner.name;
});
@ -63,12 +65,17 @@ export class ViewerComponent implements OnInit {
ngOnDestroy(){
}
onResize(event: any){
this.orientation = (event.target.innerWidth <= 500);
}
shortenZaddr(address:string) {
var addr = address;
var end = addr.length;
var last = end - 5;
return addr.substring(0,5).concat('...').concat(addr.substring(last, end));
}
openSettings() {
const dialogConfig = new MatDialogConfig();
@ -88,7 +95,7 @@ export class ViewerComponent implements OnInit {
loginCheck(){
var today = new Date().getTime() / 1000;
console.log('User check', this.user.validated);
//console.log('User check', this.user.validated);
if (this.user.expiration < today || !this.user.validated) {
console.log('Log in expired!');
this.router.navigate(['/login']);