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

More styling

Browse Source
This commit is contained in:
Zakary Timson 2018-11-06 19:40:42 -05:00
parent 5875f170a8
commit ecc26e96cb
4 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,9 +43,9 @@
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<p class="ml-3 lead text-white-50">Tired of using your browser? Download the standalone version of the Formula Manager.</p> <p class="ml-3 lead text-white-50">Tired of using your browser? Download the standalone version of the Formula Manager.</p>
<button mat-raised-button class="button-fix ml-3"><i class="fab fa-windows mr-1 mb-1"></i> Windows</button> <button mat-button class="button-fix"><i class="fab fa-windows mr-1 mb-1"></i> Windows</button>
<button mat-raised-button class="button-fix ml-2"><i class="fab fa-apple mr-1 mb-1"></i> MacOS</button> <button mat-button class="button-fix ml-2"><i class="fab fa-apple mr-1 mb-1"></i> MacOS</button>
<button mat-raised-button class="button-fix ml-2"><i class="fab fa-linux mr-1 mb-1"></i> Linux</button> <button mat-button class="button-fix ml-2"><i class="fab fa-linux mr-1 mb-1"></i> Linux</button>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card *ngIf="formula" class="my-4 mx-auto" style="max-width: 600px"> <mat-card *ngIf="formula" class="my-4 mx-auto" style="max-width: 600px">
@ -101,15 +101,10 @@
</mat-card-content> </mat-card-content>
<mat-card-actions *ngIf="store.user" style="overflow: hidden"> <mat-card-actions *ngIf="store.user" style="overflow: hidden">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<button *ngIf="!formula.approved" mat-raised-button class="m-1 mt-3" (click)="approve(formula)"> <button *ngIf="!formula.approved" mat-button class="m-1 mt-3" (click)="approve(formula)">Approve</button>
<mat-icon>check</mat-icon> Approve
</button>
<div class="float-right m-1 mt-3"> <div class="float-right m-1 mt-3">
<button mat-raised-button (click)="edit(formula)"> <button mat-button (click)="edit(formula)">Edit</button>
<mat-icon>edit</mat-icon> Edit</button> <button mat-button class="ml-2" color="warn" (click)="delete(formula)">Delete</button>
<button mat-raised-button class="ml-2" color="warn" (click)="delete(formula)">
<mat-icon>delete</mat-icon> Delete
</button>
</div> </div>
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>

5
src/app/formulaManager/newComponent/newComponent.component.html
View File

@ -15,8 +15,9 @@
</mat-form-field> </mat-form-field>
</form> </form>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-divider></mat-divider>
<button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()"> <mat-dialog-actions class="justify-content-end">
<button mat-button type="submit" form="createForm" (click)="submit()" [disabled]="!name || !cost">
<span *ngIf="data">Update</span> <span *ngIf="data">Update</span>
<span *ngIf="!data">Create</span> <span *ngIf="!data">Create</span>
</button> </button>

6
src/app/formulaManager/newFormula/newFormula.component.html
View File

@ -20,7 +20,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 75px"> <mat-form-field style="width: 75px">
<input matInput type="number" placeholder="Amount" [(ngModel)]="amount"> <input matInput type="number" placeholder="Amount" min="1" [(ngModel)]="amount">
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 40px"> <mat-form-field style="width: 40px">
<mat-select placeholder="Unit" [(ngModel)]="unit"> <mat-select placeholder="Unit" [(ngModel)]="unit">
@ -58,9 +58,7 @@
</mat-dialog-content> </mat-dialog-content>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-dialog-actions class="justify-content-end"> <mat-dialog-actions class="justify-content-end">
<button mat-raised-button type="submit" form="createForm" (click)="submit()" [disabled]="components.length < 1 || !name"> <button mat-button type="submit" form="createForm" (click)="submit()" [disabled]="components.length < 1 || !name">
<mat-icon *ngIf="data" class="mr-1">edit</mat-icon>
<mat-icon *ngIf="!data" class="mr-1">add</mat-icon>
<span *ngIf="data">Update</span> <span *ngIf="data">Update</span>
<span *ngIf="!data">Create</span> <span *ngIf="!data">Create</span>
</button> </button>

61
src/app/formulaManager/viewComponents/viewComponents.component.html
View File

@ -1,32 +1,37 @@
<button mat-raised-button class="float-right mb-3" (click)="createComponent()"> <div class="bg-white text-right p-2" style="overflow: auto">
<mat-icon>add</mat-icon> Create</button> <button mat-raised-button class="float-right mb-3" (click)="createComponent()">
<table class="table"> <mat-icon>add</mat-icon> Create
</button>
</div>
<div class="px-2">
<table class="table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Description</th> <th>Description</th>
<th>Created</th> <th>Created</th>
<th>Cost Per Kg</th> <th>Cost Per Kg</th>
<th></th> <th></th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let c of store.components | async"> <tr *ngFor="let c of store.components | async">
<td>{{c.name}}</td> <td>{{c.name}}</td>
<td>{{c.description}}</td> <td>{{c.description}}</td>
<td>{{c.created | date}}</td> <td>{{c.created | date}}</td>
<td class="text-center">{{c.cost | currency}}</td> <td class="text-center">{{c.cost | currency}}</td>
<td> <td>
<button mat-icon-button (click)="createComponent(c)"> <button mat-icon-button (click)="createComponent(c)">
<mat-icon class="curs-pointer">edit</mat-icon> <mat-icon class="curs-pointer">edit</mat-icon>
</button> </button>
</td> </td>
<td> <td>
<button mat-icon-button (click)="delete(c)"> <button mat-icon-button (click)="delete(c)">
<mat-icon class="curs-pointer">delete</mat-icon> <mat-icon class="curs-pointer">delete</mat-icon>
</button> </button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>