fhsons/website
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
Show Stats 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>
</div> </div>
<div class="row mt-3 mb-5"> <div class="row mt-3">
<div class="col-12 col-lg-3"> <div class="col-12 col-lg-3 mb-5">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<input #search matInput placeholder="Search"> <input #search matInput placeholder="Search">
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
</mat-form-field> </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"> <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-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}"> <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>
</div> </div>
<div *ngIf="formula" class="col-12 col-lg-9"> <div *ngIf="formula" class="col-12 col-lg-9 mb-5">
<div> <div>
<div class="float-left"> <div class="float-left">
<h3 class="mb-0">{{formula.name}}</h3> <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> <td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
</tbody> </tbody>
</table> </table>
<div class="col-12 d-none d-lg-block" style="height: 4px; background:black; width: 100%;"></div> <div class="col-12 d-lg-block mb-3" style="height: 4px; background:black; width: 100%;"></div>
<table class="w-100 my-4"> <div class="d-flex">
<tr> <div class="d-inline ml-auto">
<td style="width: 70%"></td> <div class="d-inline-block mr-3">
<td style="width: 20%">
<mat-form-field style="width: 75px"> <mat-form-field style="width: 75px">
<input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal"> <input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal">
</mat-form-field> </mat-form-field>
@ -104,14 +103,14 @@
<mat-option value="lb">lb</mat-option> <mat-option value="lb">lb</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</td> </div>
<td style="width: 10%"> <div class="d-inline-block">
<mat-form-field id="totalCost"> <mat-form-field id="totalCost" style="width: 100px">
<input matInput placeholder="Total Cost" [value]="cost() | currency" [readonly]="true" style="font-size: x-large; text-align: right;"> <input matInput placeholder="Total Cost" [value]="cost() | currency" [readonly]="true" style="text-align: right;">
</mat-form-field> </mat-form-field>
</td> </div>
</tr> </div>
</table> </div>
<div *ngIf="store.user" class="w-100 mt-4"> <div *ngIf="store.user" class="w-100 mt-4">
<div class="float-right"> <div class="float-right">
<button *ngIf="!formula.approved" mat-raised-button class="mr-3" (click)="approve(formula)"> <button *ngIf="!formula.approved" mat-raised-button class="mr-3" (click)="approve(formula)">

6
src/app/home/home.component.html
View File

@ -38,7 +38,7 @@
</div> </div>
<div class="container-fluid pb-5"> <div class="container-fluid pb-5">
<div class="row"> <div class="row">
<div class="col p-0" style="position: relative"> <div class="col d-none d-md-inline p-0" style="position: relative">
<div class="d-inline-block" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"> <div class="d-inline-block" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">
<h2 class="d-none d-lg-inline">Free Shipping</h2> <h2 class="d-none d-lg-inline">Free Shipping</h2>
<div class=""> <div class="">
@ -48,7 +48,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col p-0"> <div class="col mb-3 mb-md-0 p-0">
<img src="/assets/img/shipping.png" alt="Free Shipping" style="width: 100%; height: auto"> <img src="/assets/img/shipping.png" alt="Free Shipping" style="width: 100%; height: auto">
</div> </div>
</div> </div>
@ -88,7 +88,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col p-0" style="position: relative"> <div class="d-none d-md-inline col p-0" style="position: relative">
<div class="d-inline-block" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"> <div class="d-inline-block" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">
<h2 class="d-none d-lg-inline">Proud Distributor</h2> <h2 class="d-none d-lg-inline">Proud Distributor</h2>
<div class=""> <div class="">