fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Mobile friendly (fixes #14)

Browse Source
This commit is contained in:
Zakary Timson
2018-07-24 23:15:38 -04:00
parent e554cabd70
commit a8b3f4a707
2 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/formulaManager/formulaManager.component.html
View File

@ -33,13 +33,13 @@
</div>
</div>
</div>
<div class="row mt-3 mb-5">
<div class="col-12 col-lg-3">
<div class="row mt-3">
<div class="col-12 col-lg-3 mb-5">
<mat-form-field class="w-100">
<input #search matInput placeholder="Search">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-list style="height: 500px; overflow-y: scroll">
<mat-list style="max-height: 500px; overflow-y: scroll">
<ng-container *ngFor="let f of formulas | async; let i = index">
<mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
<mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)" [ngClass]="{'active': f.id == formula?.id}">
@ -60,7 +60,7 @@
</div>
</div>
</div>
<div *ngIf="formula" class="col-12 col-lg-9">
<div *ngIf="formula" class="col-12 col-lg-9 mb-5">
<div>
<div class="float-left">
<h3 class="mb-0">{{formula.name}}</h3>
@ -88,11 +88,10 @@
<td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
</tbody>
</table>
<div class="col-12 d-none d-lg-block" style="height: 4px; background:black; width: 100%;"></div>
<table class="w-100 my-4">
<tr>
<td style="width: 70%"></td>
<td style="width: 20%">
<div class="col-12 d-lg-block mb-3" style="height: 4px; background:black; width: 100%;"></div>
<div class="d-flex">
<div class="d-inline ml-auto">
<div class="d-inline-block mr-3">
<mat-form-field style="width: 75px">
<input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal">
</mat-form-field>
@ -104,14 +103,14 @@
<mat-option value="lb">lb</mat-option>
</mat-select>
</mat-form-field>
</td>
<td style="width: 10%">
<mat-form-field id="totalCost">
<input matInput placeholder="Total Cost" [value]="cost() | currency" [readonly]="true" style="font-size: x-large; text-align: right;">
</div>
<div class="d-inline-block">
<mat-form-field id="totalCost" style="width: 100px">
<input matInput placeholder="Total Cost" [value]="cost() | currency" [readonly]="true" style="text-align: right;">
</mat-form-field>
</td>
</tr>
</table>
</div>
</div>
</div>
<div *ngIf="store.user" class="w-100 mt-4">
<div class="float-right">
<button *ngIf="!formula.approved" mat-raised-button class="mr-3" (click)="approve(formula)">