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:19:58 -05:00
parent 6c027558e7
commit 5875f170a8
4 changed files with 92 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,18 +19,23 @@
</mat-list> </mat-list>
</mat-drawer> </mat-drawer>
<mat-drawer-content class="p-3 bg-white" style="min-height: 450px; background: url('assets/img/splatter.jpg') center; background-size: cover;"> <mat-drawer-content class="p-3 bg-white" style="min-height: 450px; background: url('assets/img/splatter.jpg') center; background-size: cover;">
<div> <div class="d-block" style="overflow: auto">
<button *ngIf="mobile" mat-raised-button (click)="drawer.open()"> <button *ngIf="mobile" class="mr-2" mat-raised-button (click)="drawer.open()">
<mat-icon>opacity</mat-icon> Formulas <mat-icon>opacity</mat-icon> Formulas
</button> </button>
<button *ngIf="store.user" mat-raised-button class="float-md-right mx-3" (click)="newFormula()"> <span *ngIf="store.user" class="float-md-right">
<mat-icon>add</mat-icon> Create <button mat-raised-button class="mr-2" (click)="newFormula()">
</button> <mat-icon>add</mat-icon> Create
</button>
<button mat-raised-button (click)="openComponents()">
<mat-icon>list_alt</mat-icon> Components
</button>
</span>
</div> </div>
<div *ngIf="(electron.isElectronApp || mobile) && !formula"> <div *ngIf="(electron.isElectronApp || mobile) && !formula">
<img src="assets/img/starthere.png" class="m-4"> <img src="assets/img/starthere.png" class="m-4">
</div> </div>
<mat-card *ngIf="!electron.isElectronApp && !mobile && !formula" class="mx-auto" style="max-width: 600px"> <mat-card *ngIf="!electron.isElectronApp && !mobile && !formula" class="mx-auto mt-4" style="max-width: 600px">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<h1 class="display-4" style="color: #53709f">Formula Manager</h1> <h1 class="display-4" style="color: #53709f">Formula Manager</h1>
@ -38,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-button class="button-fix"><i class="fab fa-windows mr-1 mb-1"></i> Windows</button> <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-apple mr-1 mb-1"></i> MacOS</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"><i class="fab fa-linux mr-1 mb-1"></i> Linux</button> <button mat-raised-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">
@ -96,15 +101,14 @@
</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-button class="m-1 mt-2" (click)="approve(formula)"> <button *ngIf="!formula.approved" mat-raised-button class="m-1 mt-3" (click)="approve(formula)">
<mat-icon>check</mat-icon>Approve <mat-icon>check</mat-icon> Approve
</button> </button>
<div class="float-right m-1 mt-2"> <div class="float-right m-1 mt-3">
<button mat-button class="mr-3" (click)="edit(formula)"> <button mat-raised-button (click)="edit(formula)">
<mat-icon>edit</mat-icon>Edit <mat-icon>edit</mat-icon> Edit</button>
</button> <button mat-raised-button class="ml-2" color="warn" (click)="delete(formula)">
<button mat-button (click)="delete(formula)"> <mat-icon>delete</mat-icon> Delete
<mat-icon>delete</mat-icon>Delete
</button> </button>
</div> </div>
</mat-card-actions> </mat-card-actions>

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

@ -1,36 +1,43 @@
<mat-dialog-content> <mat-dialog-content>
<h3 mat-dialog-title> <h3 mat-dialog-title>
<span *ngIf="data">Update</span> <span *ngIf="data">Update</span>
<span *ngIf="!data">Create</span> Formula</h3> <span *ngIf="!data">Create</span> Formula
<mat-form-field class="w-100"> </h3>
<input matInput placeholder="Name" name="name" [(ngModel)]="name"> <div class="mb-4">
</mat-form-field> <mat-form-field class="w-100">
<mat-checkbox class="float-right" [(ngModel)]="approved">Approved</mat-checkbox> <input matInput placeholder="Name" name="name" [(ngModel)]="name">
<mat-form-field> </mat-form-field>
<mat-select placeholder="Component" [(ngModel)]="component"> <div class="text-right">
<mat-option *ngFor="let c of componentsList" [value]="c.name"> <mat-checkbox [(ngModel)]="approved">Approved</mat-checkbox>
{{c.name}} </div>
</mat-option> </div>
</mat-select> <div>
</mat-form-field> <mat-form-field>
<mat-form-field style="width: 75px"> <mat-select placeholder="Component" [(ngModel)]="component">
<input matInput type="number" placeholder="Amount" [(ngModel)]="amount"> <mat-option *ngFor="let c of componentsList" [value]="c.name">
</mat-form-field> {{c.name}}
<mat-form-field style="width: 40px"> </mat-option>
<mat-select placeholder="Unit" [(ngModel)]="unit"> </mat-select>
<mat-option value="g">g</mat-option> </mat-form-field>
<mat-option value="oz">oz</mat-option> <mat-form-field style="width: 75px">
<mat-option value="kg">kg</mat-option> <input matInput type="number" placeholder="Amount" [(ngModel)]="amount">
<mat-option value="lb">lb</mat-option> </mat-form-field>
</mat-select> <mat-form-field style="width: 40px">
</mat-form-field> <mat-select placeholder="Unit" [(ngModel)]="unit">
<button mat-raised-button class="ml-3" (click)="add()">Add</button> <mat-option value="g">g</mat-option>
<mat-option value="oz">oz</mat-option>
<mat-option value="kg">kg</mat-option>
<mat-option value="lb">lb</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button class="ml-3" (click)="add()">Add</button>
</div>
<table class="w-100 table"> <table class="w-100 table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Quantity</th> <th>Quantity</th>
<th></th> <th style="width: 50px"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -45,12 +52,15 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="float-right"> <div class="text-right mb-3">
<strong>Yield: </strong>{{total() | convertFromG: unit}} {{unit}} <strong>Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
</div> </div>
</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()" [disabled]="components.length < 1 || !name"> <mat-dialog-actions class="justify-content-end">
<button mat-raised-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>

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

@ -1,5 +1,5 @@
<button mat-raised-button class="float-right mb-3" (click)="createComponent()"> <button mat-raised-button class="float-right mb-3" (click)="createComponent()">
<mat-icon>add</mat-icon> Component</button> <mat-icon>add</mat-icon> Create</button>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>

60
src/app/msds/msds.component.html
View File

@ -1,32 +1,36 @@
<mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar> <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<div class="bg-white pt-4" style="min-height: 450px"> <div class="bg-white pt-4" style="min-height: 450px">
<div class="container py-3"> <div class="container py-3">
<div style="overflow: auto"> <div style="overflow: auto">
<h4 class="ml-3 d-inline">MSDS</h4> <h4 class="ml-3 d-inline">MSDS</h4>
<button *ngIf="store.user" mat-button class="float-right" (click)="file.click()"> <button *ngIf="store.user" mat-button class="float-right mb-2" (click)="file.click()">
<mat-icon>add</mat-icon> Add <mat-icon>add</mat-icon> Add
</button> </button>
</div>
<mat-divider></mat-divider>
<table class="table">
<thead>
<tr>
<td>File Name</td>
<td>Size</td>
<td></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let l of links">
<td>{{l.name}}</td>
<td>{{l.size / 1024 | size}}</td>
<td class="text-right">
<button mat-raised-button (click)="open(l)">
<mat-icon>arrow_downward</mat-icon> Download
</button>
<button *ngIf="store.user" mat-raised-button class="ml-2" color="warn" (click)="delete(l)">
<mat-icon>delete</mat-icon> Delete
</button>
</td>
</tr>
</tbody>
</table>
<input #file type="file" accept="application/pdf" (change)="upload($event.target)" hidden>
</div> </div>
<mat-divider></mat-divider>
<table class="table">
<thead>
<tr>
<td>File Name</td>
<td>Size</td>
<td></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let l of links">
<td>{{l.name}}</td>
<td>{{l.size / 1024 | size}}</td>
<td class="text-right">
<button mat-raised-button (click)="open(l)">Download</button>
<button *ngIf="store.user" mat-raised-button class="ml-2" color="warn" (click)="delete(l)">Delete</button>
</td>
</tr>
</tbody>
</table>
<input #file type="file" accept="application/pdf" (change)="upload($event.target)" hidden>
</div>
</div> </div>