Look and feel improvements for wide screens

This commit is contained in:
Rene Vergara 2022-01-25 16:41:23 -06:00
parent aaed144151
commit 8a165eefb6
4 changed files with 29 additions and 23 deletions

View File

@ -1,6 +1,7 @@
<main>
<router-outlet></router-outlet>
</main>
<mat-divider></mat-divider>
<div class="footer" align="center">
<p>&copy; 2022 Vergara Technologies LLC</p>
<p class="tiny">Price data provided by CoinGecko API</p>

View File

@ -27,3 +27,6 @@ img.icon{
img.total{
margin-bottom:-2px;
}
.central{
max-width: 450px;
}

View File

@ -7,39 +7,41 @@
</div>
<mat-divider></mat-divider>
<div align="center">
<div class="central">
<table class="text" width="75%">
<tr>
<td width="50%" align="center">
<h3>Today's Total:</h3>
<p class="total"><img class="total" src="/assets/zec-roboto.png" height="18px" />{{todayTotal | number: '1.0-6'}}</p>
<p class="total"><img class="total" src="/assets/spartan-zec.png" height="18px" />{{todayTotal | number: '1.0-6'}}</p>
</td>
<td width="50%" align="center">
<h3>Overall Total:</h3>
<p class="total"><img class="total" src="/assets/zec-roboto.png" height="18px" />{{total | number: '1.0-6'}}</p>
<p class="total"><img class="total" src="/assets/spartan-zec.png" height="18px" />{{total | number: '1.0-6'}}</p>
</td>
</tr>
</table>
</div>
<mat-divider></mat-divider>
<mat-accordion *ngIf = "orders.length > 0">
<mat-expansion-panel class="text" *ngFor = "let order of orders">
<mat-expansion-panel-header class="text" >
<mat-panel-title>
<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'}}
</mat-panel-description>
</mat-expansion-panel-header>
<p class="text">Order: {{order._id}}</p>
<p class="text">Zcash price: {{order.price | currency: order.currency.toUpperCase()}}</p>
<mat-list>
<mat-list-item class="text small" *ngFor="let item of order.lines">{{item.qty}} x {{item.name}}</mat-list-item>
</mat-list>
</mat-expansion-panel>
</mat-accordion>
<p class="text" *ngIf = "orders.length <= 0">No orders</p>
</div>
<mat-divider></mat-divider>
<div align="center">
<p class="text"> <mat-icon class="icon" inline>copyright</mat-icon> 2021 ZGo </p>
<div class="central">
<mat-accordion *ngIf = "orders.length > 0">
<mat-expansion-panel class="text" *ngFor = "let order of orders">
<mat-expansion-panel-header class="text" >
<mat-panel-title>
<span class="price number"><img src="/assets/spartan-zec.png" height="50%" />{{order.totalZec}}</span>
</mat-panel-title>
<mat-panel-description>
{{order.timestamp | date: 'short'}}
</mat-panel-description>
</mat-expansion-panel-header>
<p class="text">Order: {{order._id}}</p>
<p class="text">Zcash price: {{order.price | currency: order.currency.toUpperCase()}}</p>
<mat-list>
<mat-list-item class="text small" *ngFor="let item of order.lines">{{item.qty}} x {{item.name}}</mat-list-item>
</mat-list>
</mat-expansion-panel>
</mat-accordion>
<p class="text" *ngIf = "orders.length <= 0">No orders</p>
</div>
</div>

View File

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