From 20e1f22c31fad54721dddc7dba174a110e653770 Mon Sep 17 00:00:00 2001
From: Andre Mourinho <andremourinho@live.com>
Date: Tue, 17 Jul 2018 19:24:20 -0400
Subject: [PATCH] styled footer, about, store page

---
 src/app/about/about.component.html            |  4 +-
 src/app/app.component.html                    | 92 ++++++++++---------
 .../categories/categories.component.html      | 27 ++++--
 .../store/products/products.component.html    |  2 +-
 src/assets/css/base.scss                      | 27 ++++++
 src/index.html                                |  1 +
 6 files changed, 99 insertions(+), 54 deletions(-)

diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
index 77d38d3..5461b6e 100644
--- a/src/app/about/about.component.html
+++ b/src/app/about/about.component.html
@@ -15,7 +15,7 @@
   <div class="container">
     <div class="row pt-4">
       <div class="col-12">
-        <h2 class="my-4 roboto">Client Reviews</h2>
+        <h1 class="my-4 roboto text-center" style="color:#bbcde8;">Client Reviews</h1>
       </div>
       <div class="col-md-6 col-lg-4 mb-4">
         <mat-card class="text-black-50 shadow">
@@ -41,7 +41,7 @@
           Great staff, very friendly, great service
         </mat-card>
       </div>
-      <div class="col-md-6 col-lg-4 mb-4 mx-auto">
+      <div class="col-md-6 col-lg-4 mb-4">
         <mat-card class="text-black-50">
           <a target="_blank" href="https://www.google.com/maps/contrib/111462598285081078982/reviews?hl=en-CA&sa=X&ved=2ahUKEwiklPiAwJjcAhVrxoMKHU8lAtgQvvQBegQIARAi">Jon Weizman</a>
           <br />
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6f1d4f4..6275282 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,50 +1,54 @@
 <!-- Nav -->
-<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
-    <div class="container">
-        <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">
-            <span class="navbar-toggler-icon"></span>
-        </button>
+<div class="wrapper">
+    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
+        <div class="container">
+            <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">
+                <span class="navbar-toggler-icon"></span>
+            </button>
 
-        <div 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>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link text-dark" [routerLink]="['/store']">Store</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>
-                </li>
-            </ul>
-            <div class="ml-auto">
-                <button *ngIf="!user" mat-stroked-button color="primary" (click)="login()">Login</button>
-                <div *ngIf="user">
-                    <span class="text-muted mr-3">{{user.email}}</span>
-                    <button mat-stroked-button color="accent" (click)="afAuth.auth.signOut()">Logout</button>
+            <div 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>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-dark" [routerLink]="['/store']">Store</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>
+                    </li>
+                </ul>
+                <div class="ml-auto">
+                    <button *ngIf="!user" mat-stroked-button color="primary" (click)="login()">Login</button>
+                    <div *ngIf="user">
+                        <span class="text-muted mr-3">{{user.email}}</span>
+                        <button mat-stroked-button color="accent" (click)="afAuth.auth.signOut()">Logout</button>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</nav>
+    </nav>
 
-<!-- Content -->
-<div>
-    <div style="height: 56px"></div>
-    <router-outlet></router-outlet>
+    <!-- Content -->
+    <div>
+        <div style="height: 56px"></div>
+        <router-outlet></router-outlet>
+    </div>
+
+    <div class="push"></div>
 </div>
 
 <!-- Footer -->
 <footer>
-    <div class="container-fluid bg-light">
+    <div class="container-fluid">
         <div class="container">
-            <div class="d-inline-block py-3">
-                <div class="d-none d-md-inline-block align-top mr-5">
+            <div class="py-3 text-center">
+                <div class="d-none d-md-inline-block align-top mr-5 text-left">
                     <h5>MAIN MENU</h5>
                     <ul style="list-style-type: none; padding-left: 0;">
                         <li>
@@ -58,7 +62,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="d-none d-md-inline-block align-top mr-5">
+                <div class="d-none d-md-inline-block align-top mr-5 text-left">
                     <h5>PRODUCTS</h5>
                     <ul style="list-style-type: none; padding-left: 0; columns: 3;">
                         <li *ngFor="let c of categories | async">
@@ -66,21 +70,21 @@
                         </li>
                     </ul>
                 </div>
-                <div class="align-top d-inline-block">
+                <div class="align-top d-inline-block text-left">
                     <h5>CONTACT</h5>
                     <p>
-                        Toll Free: 1-888-422-7737
-                        <br> Local: 416-744-2723
-                        <br> Fax: 416-744-4078
+                        <i class="fas fa-phone mr-2"></i> 416-744-2723
+                        <br /><i class="fas fa-fax mr-2"></i> 416-744-4078
+                        <br />Toll Free: 1-888-422-7737
                     </p>
                 </div>
             </div>
         </div>
     </div>
-    <div class="container-fluid" style="background-color: #d3d3d3;">
+    <div class="container-fluid footer-sub">
         <div class="container text-center">
-            <p class="mb-0 p-2">© 2018 fh & sons. Created By
-                <a href="http://zakscode.com">Zak Timson</a>
+            <p class="mb-0 p-2">© 2018 FH &amp; SONS
+                <br />Designed and developed by: <a href="http://zakscode.com">Zak Timson</a>
             </p>
         </div>
     </div>
diff --git a/src/app/store/categories/categories.component.html b/src/app/store/categories/categories.component.html
index 87676d5..5b1a421 100644
--- a/src/app/store/categories/categories.component.html
+++ b/src/app/store/categories/categories.component.html
@@ -1,4 +1,5 @@
-<div class="container-fluid" style="background-color: #53709f;">
+<!-- <div class="container-fluid" style="background-color: #53709f;"> -->
+<div class="container-fluid">
     <div class="container">
         <div class="row py-5">
             <div *ngIf="app.user" class="ml-auto mr-3 mb-3">
@@ -18,11 +19,11 @@
             </nav>
 
             <ng-container *ngFor="let c of categories | async">
-                <mat-card class="m-3 curs-pointer">
+                <mat-card class="m-2 mx-auto curs-pointer">
                     <div [routerLink]="['/store', c.name]">
-                        <img *ngIf="c.image" mat-card-image [src]="c.image" [alt]="c.name" style="width: 200px; height: 200px;">
+                        <img *ngIf="c.image" mat-card-image [src]="c.image" [alt]="c.name" style="width: 200px; height: 200px;" class="mx-auto">
                         <mat-divider *ngIf="c.image" class="custom-line"></mat-divider>
-                        <mat-card-content class="text-center">
+                        <mat-card-content class="text-center" style="max-width:200px">
                             <h5>{{c.name}}</h5>
                         </mat-card-content>
                     </div>
@@ -37,12 +38,24 @@
                 </mat-card>
             </ng-container>
 
+            <ng-container *ngIf="(categories | async)?.length == 0 && (products | async)?.length <= 0">
+                <div class="row w-100">
+                    <div class="col-12 p-5">
+                        <mat-card class="mx-auto">
+                                <mat-card-content>
+                                    There are currently no products in the {{category}} category. Please check back again later as we are currently updating our website.
+                                </mat-card-content>
+                        </mat-card>
+                    </div>
+                </div>
+            </ng-container>
+
             <ng-container *ngFor="let p of products | async">
-                <mat-card class="m-3 curs-pointer">
+                <mat-card class="m-2 curs-pointer mx-auto">
                     <div [routerLink]="['/products', p.name]">
-                        <img *ngIf="p.image" mat-card-image [src]="p.image" [alt]="p.name" style="width: 200px; height: 200px;">
+                        <img *ngIf="p.image" mat-card-image [src]="p.image" [alt]="p.name" style="width: 200px; height: 200px;" class="mx-auto">
                         <mat-divider *ngIf="p.image" class="custom-line"></mat-divider>
-                        <mat-card-content class="text-center">
+                        <mat-card-content class="text-center" style="max-width:200px">
                             <h5>{{p.name}}</h5>
                         </mat-card-content>
                     </div>
diff --git a/src/app/store/products/products.component.html b/src/app/store/products/products.component.html
index fb1d094..71fefea 100644
--- a/src/app/store/products/products.component.html
+++ b/src/app/store/products/products.component.html
@@ -2,7 +2,7 @@
     <div class="container">
         <div class="row">
             <div class="col-12 py-4">
-                <img [src]="product.image" class="float-left img-fluid mb-4">
+                <img [src]="product.image" class="float-left img-fluid mb-4 mr-4">
                 <h2 class="roboto">{{product.name}}</h2>
                 <h5 *ngIf="product.price" class="text-muted">{{product.price | currency}}</h5>
                 <h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>
diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss
index 97c12b5..2aa5e44 100644
--- a/src/assets/css/base.scss
+++ b/src/assets/css/base.scss
@@ -75,3 +75,30 @@ mat-list-item:hover {
 mat-form-field#totalCost .mat-form-field-label-wrapper {
   text-align: right;
 }
+
+//sticky footer
+.wrapper {
+  min-height: 100%;
+  margin-bottom: -312px;
+}
+.footer, .push {
+  height: 312px;
+}
+footer {
+  background-color: #3c3c3c;
+  color: #c7c7c7;
+}
+footer a, footer a:active, footer a:focus {
+  color: #808080;
+  text-decoration: none;
+}
+footer a:hover {
+  color: white;
+}
+footer h1, footer h2, footer h3, footer h4, footer h5 {
+  color: #507b9c;
+}
+.footer-sub {
+  background-color: #292929;
+  color: #808080;
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 4d24e1c..b8add93 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,6 +21,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
 
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script>