New formula manager

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhsons",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "main": "main.js",
   "scripts": {
     "ng": "ng",

src/app/about/about.component.html

@@ -1,3 +1,4 @@
+<div class="container-fluid bg-white">
   <div class="container">
     <div class="row">
       <div class="col-12 py-4">
@@ -11,7 +12,8 @@
       </div>
     </div>
   </div>
-<div style="background-color: #53709f;">
+</div>
+<div style="background: #53709f;">
   <div class="container">
     <div class="row pt-4">
       <div class="col-12">

src/app/app.component.html

@@ -1,5 +1,4 @@
-<!-- Nav -->
-<div class="wrapper">
+
 <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
     <div class="container">
         <a class="navbar-brand roboto" [routerLink]="['/']">
@@ -42,15 +41,14 @@
     </div>
 </nav>
 
+<!-- Push content down from under nav-->
+<div style="height: 56px"></div>
+
 <!-- Content -->
 <div>
-        <div style="height: 56px"></div>
     <router-outlet></router-outlet>
 </div>
 
-    <div class="push"></div>
-</div>
-
 <!-- Footer -->
 <footer>
     <div class="container-fluid">

src/app/app.module.ts

@@ -26,10 +26,10 @@ import { ProductsComponent } from './store/products/products.component';
 import { CartComponent } from './store/cart/cart.component';
 import { ViewComponents } from './formulaManager/viewComponents/viewComponents.component';
 import { NewComponentComponent } from './formulaManager/newComponent/newComponent.component';
-import { HttpModule } from '@angular/http';
 import { NewFormulaComponent } from './formulaManager/newFormula/newFormula.component';
 import { AppStore } from './app.store';
 import { SlideshowModule } from 'ng-simple-slideshow';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -60,7 +60,7 @@ import { SlideshowModule } from 'ng-simple-slideshow';
     BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     NgxElectronModule,
     ReactiveFormsModule,
     RouterModule.forRoot([

src/app/formulaManager/formulaManager.component.html

@@ -1,45 +1,12 @@
-<div class="container">
-    <div *ngIf="!electron.isElectronApp" class="row mt-3 d-none d-lg-block">
-        <div class="col-12">
-            <div class="jumbotron text-white" style="
-                        background-color: #000;
-                        background-image: url('../../assets/img/formula.jpg');
-                        background-size: cover;
-                        ">
-                <h1 class="display-4">Standalone</h1>
-                <p class="lead text-white-50">Download Formula Manager 2.0</p>
-                <hr class="my-4">
-                <p>Tired of using your browser? Try downloading Formula Manager 2.0!</p>
-                <a class="btn btn-primary btn-lg mb-3 mr-3" href="#" download>
-                    <i class="fab fa-windows"></i> Windows</a>
-                <a class="btn btn-primary btn-lg mb-3 mr-3" href="#" download>
-                    <i class="fab fa-apple"></i> MacOS</a>
-                <a class="btn btn-primary btn-lg mb-3 mr-3" href="#" download>
-                    <i class="fab fa-linux"></i> Linux</a>
-                <button *ngIf="installPrompt" class="btn btn-primary btn-lg mb-3" (click)="prompt()">
-                    <i class="fas fa-mobile-alt"></i> Mobile</button>
-            </div>
-        </div>
-    </div>
-    <div *ngIf="store.user" class="row mt-3">
-        <div class="col-12">
-            <div class="float-right">
-                <button mat-raised-button class="mr-3" (click)="openComponents()">
-                    <mat-icon>list</mat-icon> Components
-                </button>
-                <button mat-raised-button (click)="newFormula()">
-                    <mat-icon>add</mat-icon> Formula
-                </button>
-            </div>
-        </div>
-    </div>
-    <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-drawer-container class="flex-grow-1">
+    <mat-drawer #drawer [mode]="mobile ? 'over' : 'side'" [opened]="!mobile" [disableClose]="!mobile" [autoFocus]="false">
+        <mat-form-field appearance="outline" class="mx-3 mt-3 pb-0">
+            <mat-label>Search</mat-label>
+            <input #search matInput>
             <mat-icon matSuffix>search</mat-icon>
         </mat-form-field>
-            <mat-list style="max-height: 500px; overflow-y: scroll">
+        <mat-divider></mat-divider>
+        <mat-list>
             <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}">
@@ -48,44 +15,61 @@
                 </mat-list-item>
             </ng-container>
         </mat-list>
+        <div *ngIf="store.user" class="fixed-bottom w-100">
+            <mat-divider></mat-divider>
+            <button mat-button class="m-1 float-right" (click)="newFormula()">
+                <mat-icon>add</mat-icon> New
+            </button>
         </div>
-        <div *ngIf="!formula" class="d-none d-lg-block col-lg-9">
-            <div class="w-100">
-                <div class="col-12 p-5">
-                    <mat-card class="mx-auto text-center">
+    </mat-drawer>
+    <mat-drawer-content class="p-3 bg-white" style="min-height: 450px; background: url('assets/img/splatter.jpg') center; background-size: cover;">
+        <div>
+            <button *ngIf="mobile" mat-raised-button (click)="drawer.open()">
+                <mat-icon>opacity</mat-icon> Formulas
+            </button>
+        </div>
+        <div *ngIf="(electron.isElectronApp || mobile) && !formula">
+            <img src="assets/img/starthere.png" class="m-4">
+        </div>
+        <mat-card *ngIf="!electron.isElectronApp && !mobile && !formula" class="mx-auto" style="max-width: 600px">
+            <mat-card-header>
+                <div class="d-flex align-items-center" style="color: #53709f">
+                    <mat-icon style="transform: scale(2.5)">opacity</mat-icon>
+                    <h1 class="ml-3 display-4">Formula Manager</h1>
+                </div>
+            </mat-card-header>
             <mat-card-content>
-                            Pick a formula from the left hand side to see its components!
+                <p class="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-button class="button-fix"><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>
             </mat-card-content>
         </mat-card>
-                </div>
-            </div>
-        </div>
-        <div *ngIf="formula" class="col-12 col-lg-9 mb-5">
-            <div>
-                <div class="float-left">
-                    <h3 class="mb-0">{{formula.name}}</h3>
-                    <span class="text-muted">Created: {{formula.created | date}}</span>
-                </div>
-                <div *ngIf="store.user" class="float-right">
-                    <h5>Approved:
+        <mat-card *ngIf="formula" class="my-4 mx-auto" style="max-width: 600px">
+            <mat-card-header>
+                <mat-card-title class="mb-0"><h4>{{formula.name}}</h4></mat-card-title>
+                <mat-card-subtitle>{{formula.created | date}}</mat-card-subtitle>
+                <div *ngIf="store.user" class="ml-auto">
+                    <h4>Approved:
                         <mat-icon *ngIf="formula.approved" class="text-success" style="transform: translateY(20%)">check_circle</mat-icon>
                         <mat-icon *ngIf="!formula.approved" class="text-danger" style="transform: translateY(20%)">remove_circle</mat-icon>
-                    </h5>
-                </div>
+                    </h4>
                 </div>
+            </mat-card-header>
+            <mat-card-content>
                 <table class="w-100 mt-4 table">
                     <thead>
                     <tr>
                         <th style="width: 80%">Name</th>
-                        <th style="width: 10%">Quantity</th>
-                        <th style="width: 10%">Cost</th>
+                        <th class="text-right" style="width: 10%">Quantity</th>
+                        <th class="text-right" style="width: 10%">Cost</th>
                     </tr>
                     </thead>
                     <tbody>
                     <tr *ngFor="let c of formula.components">
                         <td style="width: 80%">{{c.component?.name}}</td>
-                        <td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
-                        <td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
+                        <td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
+                        <td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
                     </tbody>
                 </table>
                 <div class="col-12 d-lg-block mb-3" style="height: 4px; background:black; width: 100%;"></div>
@@ -111,19 +95,21 @@
                         </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)">
+            </mat-card-content>
+            <mat-card-actions *ngIf="store.user" style="overflow: hidden">
+                <mat-divider></mat-divider>
+                <button *ngIf="!formula.approved" mat-button class="m-1 mt-2" (click)="approve(formula)">
                     <mat-icon>check</mat-icon>Approve
                 </button>
-                    <button mat-raised-button class="mr-3" (click)="edit(formula)">
+                <div class="float-right m-1 mt-2">
+                    <button mat-button class="mr-3" (click)="edit(formula)">
                         <mat-icon>edit</mat-icon>Edit
                     </button>
-                    <button mat-raised-button (click)="delete(formula)">
+                    <button mat-button (click)="delete(formula)">
                         <mat-icon>delete</mat-icon>Delete
                     </button>
                 </div>
-            </div>
-        </div>
-    </div>
-</div>
+            </mat-card-actions>
+        </mat-card>
+    </mat-drawer-content>
+</mat-drawer-container>

src/app/formulaManager/formulaManager.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, ViewChildren, HostListener} from '@angular/core';
+import {Component} from '@angular/core';
 import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe';
 import {ElectronService} from 'ngx-electron';
 import {LocalStorage} from 'webstorage-decorators';
@@ -8,6 +8,7 @@ import {NewFormulaComponent} from './newFormula/newFormula.component';
 import {AppStore} from '../app.store';
 import {map} from 'rxjs/operators';
 import {DeleteComponent} from '../delete/delete.component';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 
 @Component({
     selector: 'formula-manager',
@@ -25,17 +26,22 @@ export class FormulaManagerComponent {
     formulas;
     @LocalStorage({defaultValue: 'g'})
     unit;
+    mobile = false;
 
     _newTotal: number = 0;
     get newTotal() {
         return new ConvertFromGPipe().transform(this._newTotal, this.unit);
     }
+
     set newTotal(total) {
         this._newTotal = new ConvertToGPipe().transform(total, this.unit);
     }
 
-  constructor(public electron: ElectronService, private dialog: MatDialog, public store: AppStore) {
+    constructor(public electron: ElectronService, private dialog: MatDialog, private $breakpoint: BreakpointObserver, public store: AppStore) {
         this.formulas = this.store.formulas.pipe(map(rows => rows.filter(row => this.store.user || row.approved)));
+
+        // Handle switching between mobile and desktop
+        this.$breakpoint.observe(Breakpoints.Handset).subscribe(e => this.mobile = e.matches);
     }
 
     approve(formula) {

src/app/home/home.component.html

@@ -36,7 +36,7 @@
         </div>
     </div>
 </div>
-<div class="container-fluid pb-5">
+<div class="container-fluid bg-white pb-5">
     <div class="row">
         <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%)">

src/assets/css/base.scss

@@ -1,8 +1,21 @@
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 @import url('https://use.fontawesome.com/releases/v5.1.0/css/all.css');
-@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
-@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url('https://fonts.googleapis.com/css?family=Material+Icons|Roboto+Condensed');
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #555;
+}
 
 html,
 body {
@@ -10,6 +23,11 @@ body {
   width: 100%;
   margin: 0;
   padding: 0;
+  background-color: #292929;
+}
+
+.button-fix {
+  font-size: 1.2rem;
 }
 
 a,

src/index.html

@@ -16,7 +16,7 @@
 
   <link rel="icon" type="image/png" href="assets/img/logo.png">
   <link rel="manifest" href="manifest.json">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
+  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 
   <script src="https://www.paypalobjects.com/api/checkout.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>