Added electron styling

src/app/app.component.html

@@ -1,16 +1,16 @@
-<div [ngClass]="{lock: lock, unlock: !lock}">
+<div>
     <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
-        <div class="container">
+        <div [ngClass]="{container: !electron.isElectronApp, 'container-fluid': electron.isElectronApp}">
             <a class="navbar-brand roboto" [routerLink]="['/']">
                 <span class="fh-fade">fh</span>
                 <span class="rainbow"> & </span>
                 <span class="sons-fade">sons</span>
             </a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
+            <button *ngIf="!electron.isElectronApp" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                 <span class="navbar-toggler-icon"></span>
             </button>
 
-            <div class="collapse navbar-collapse" id="navbar">
+            <div *ngIf="!electron.isElectronApp" class="collapse navbar-collapse" id="navbar">
                 <ul class="navbar-nav mr-auto">
                     <li class="nav-item">
                         <a class="nav-link text-dark" [routerLink]="['/about']">About</a>
@@ -50,7 +50,7 @@
     </div>
 
     <!-- Footer -->
-    <footer class="d-print-none">
+    <footer *ngIf="!electron.isElectronApp" class="d-print-none">
         <div class="d-flex py-4 justify-content-center">
             <div class="d-none d-md-inline ml-5 text-left">
                 <h5>MAIN MENU</h5>
@@ -59,7 +59,7 @@
                         <a [routerLink]="['/about']">About</a>
                     </li>
                     <li>
-                        <a [routerLink]="['/store']">Store</a>
+                        <a [routerLink]="['/catalog']">Catalog</a>
                     </li>
                     <li>
                         <a [routerLink]="['/formulaManager']">Formula Manager</a>

src/app/formulaManager/formulaManager.component.html

@@ -11,14 +11,14 @@
         <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}">
+                <mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f); mobile ? drawer.close() : null" [ngClass]="{'active': f.id == formula?.id}">
                     <mat-icon *ngIf="!f.approved" class="mr-3 text-danger">remove_circle</mat-icon>
                     {{f.name}}
                 </mat-list-item>
             </ng-container>
         </mat-list>
     </mat-drawer>
-    <mat-drawer-content class="p-3 bg-white ml-print-0" style="min-height: 450px; background: url('assets/img/splatter.jpg') center; background-size: cover;">
+    <mat-drawer-content class="p-3 bg-white ml-print-0" style="min-height: calc(100vh - 56px); background: url('assets/img/splatter.jpg') center; background-size: cover;">
         <div class="d-block d-print-none" style="overflow: auto">
             <button *ngIf="mobile" class="mr-2" mat-raised-button (click)="drawer.open()">
                 <mat-icon>opacity</mat-icon> Formulas
@@ -32,7 +32,7 @@
                 </button>
             </span>
         </div>
-        <div *ngIf="(electron.isElectronApp || mobile) && !formula">
+        <div *ngIf="mobile && !formula">
             <img src="assets/img/starthere.png" class="m-4">
         </div>
         <mat-card *ngIf="!electron.isElectronApp && !mobile && !formula" class="mx-auto mt-4" style="max-width: 600px">

src/app/home/home.component.html

@@ -14,10 +14,10 @@
                 </a>
             </div>
             <div class="col-12 col-md-4 text-center">
-                <a class="no-underline" style="max-width: 20rem" [routerLink]="['/store']">
+                <a class="no-underline" style="max-width: 20rem" [routerLink]="['/catalog']">
                     <mat-card class="dark-hover mb-3" style="min-height: 320px;">
                         <mat-icon class="my-5" style="transform: scale(4); color: #53709f;">local_grocery_store</mat-icon>
-                        <h3 class="text-dark mb-4">Store</h3>
+                        <h3 class="text-dark mb-4">Catalog</h3>
                         <mat-divider class="custom-line"></mat-divider>
                         <p class="text-black-50">Buy equipment, ink and anything else you might need!</p>
                     </mat-card>