fhsons/website
fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Merge branch 'master' of github.com:ztimson/fhsons

Browse Source
This commit is contained in:
Zakary Timson 2018-07-17 20:43:30 -04:00
commit 8badbd4e5f
6 changed files with 99 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/about/about.component.html
View File

@ -15,7 +15,7 @@
<div class="container"> <div class="container">
<div class="row pt-4"> <div class="row pt-4">
<div class="col-12"> <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>
<div class="col-md-6 col-lg-4 mb-4"> <div class="col-md-6 col-lg-4 mb-4">
<mat-card class="text-black-50 shadow"> <mat-card class="text-black-50 shadow">
@ -41,7 +41,7 @@
Great staff, very friendly, great service Great staff, very friendly, great service
</mat-card> </mat-card>
</div> </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"> <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> <a target="_blank" href="https://www.google.com/maps/contrib/111462598285081078982/reviews?hl=en-CA&sa=X&ved=2ahUKEwiklPiAwJjcAhVrxoMKHU8lAtgQvvQBegQIARAi">Jon Weizman</a>
<br /> <br />

92
src/app/app.component.html
View File

@ -1,50 +1,54 @@
<!-- Nav --> <!-- Nav -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light"> <div class="wrapper">
<div class="container"> <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand roboto" [routerLink]="['/']"> <div class="container">
<span class="fh-fade">fh</span> <a class="navbar-brand roboto" [routerLink]="['/']">
<span class="rainbow"> & </span> <span class="fh-fade">fh</span>
<span class="sons-fade">sons</span> <span class="rainbow"> & </span>
</a> <span class="sons-fade">sons</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> </a>
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
</button> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar"> <div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" [routerLink]="['/about']">About</a> <a class="nav-link text-dark" [routerLink]="['/about']">About</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" [routerLink]="['/store']">Store</a> <a class="nav-link text-dark" [routerLink]="['/store']">Store</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a> <a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>
</li> </li>
</ul> </ul>
<div class="ml-auto"> <div class="ml-auto">
<button *ngIf="!user" mat-stroked-button color="primary" (click)="login()">Login</button> <button *ngIf="!user" mat-stroked-button color="primary" (click)="login()">Login</button>
<div *ngIf="user"> <div *ngIf="user">
<span class="text-muted mr-3">{{user.email}}</span> <span class="text-muted mr-3">{{user.email}}</span>
<button mat-stroked-button color="accent" (click)="afAuth.auth.signOut()">Logout</button> <button mat-stroked-button color="accent" (click)="afAuth.auth.signOut()">Logout</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </nav>
</nav>
<!-- Content --> <!-- Content -->
<div> <div>
<div style="height: 56px"></div> <div style="height: 56px"></div>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div>
<div class="push"></div>
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer> <footer>
<div class="container-fluid bg-light"> <div class="container-fluid">
<div class="container"> <div class="container">
<div class="d-inline-block py-3"> <div class="py-3 text-center">
<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>MAIN MENU</h5> <h5>MAIN MENU</h5>
<ul style="list-style-type: none; padding-left: 0;"> <ul style="list-style-type: none; padding-left: 0;">
<li> <li>
@ -58,7 +62,7 @@
</li> </li>
</ul> </ul>
</div> </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> <h5>PRODUCTS</h5>
<ul style="list-style-type: none; padding-left: 0; columns: 3;"> <ul style="list-style-type: none; padding-left: 0; columns: 3;">
<li *ngFor="let c of categories | async"> <li *ngFor="let c of categories | async">
@ -66,21 +70,21 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="align-top d-inline-block"> <div class="align-top d-inline-block text-left">
<h5>CONTACT</h5> <h5>CONTACT</h5>
<p> <p>
Toll Free: 1-888-422-7737 <i class="fas fa-phone mr-2"></i> 416-744-2723
<br> Local: 416-744-2723 <br /><i class="fas fa-fax mr-2"></i> 416-744-4078
<br> Fax: 416-744-4078 <br />Toll Free: 1-888-422-7737
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container-fluid" style="background-color: #d3d3d3;"> <div class="container-fluid footer-sub">
<div class="container text-center"> <div class="container text-center">
<p class="mb-0 p-2">© 2018 fh & sons. Created By <p class="mb-0 p-2">© 2018 FH &amp; SONS
<a href="http://zakscode.com">Zak Timson</a> <br />Designed and developed by: <a href="http://zakscode.com">Zak Timson</a>
</p> </p>
</div> </div>
</div> </div>

27
src/app/store/categories/categories.component.html
View File

@ -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="container">
<div class="row py-5"> <div class="row py-5">
<div *ngIf="app.user" class="ml-auto mr-3 mb-3"> <div *ngIf="app.user" class="ml-auto mr-3 mb-3">
@ -18,11 +19,11 @@
</nav> </nav>
<ng-container *ngFor="let c of categories | async"> <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]"> <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-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> <h5>{{c.name}}</h5>
</mat-card-content> </mat-card-content>
</div> </div>
@ -37,12 +38,24 @@
</mat-card> </mat-card>
</ng-container> </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"> <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]"> <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-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> <h5>{{p.name}}</h5>
</mat-card-content> </mat-card-content>
</div> </div>

2
src/app/store/products/products.component.html
View File

@ -2,7 +2,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 py-4"> <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> <h2 class="roboto">{{product.name}}</h2>
<h5 *ngIf="product.price" class="text-muted">{{product.price | currency}}</h5> <h5 *ngIf="product.price" class="text-muted">{{product.price | currency}}</h5>
<h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5> <h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>

27
src/assets/css/base.scss
View File

@ -75,3 +75,30 @@ mat-list-item:hover {
mat-form-field#totalCost .mat-form-field-label-wrapper { mat-form-field#totalCost .mat-form-field-label-wrapper {
text-align: right; 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;
}

1
src/index.html
View File

@ -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/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/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> <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 --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script> <script>