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

styled footer, about, store page

Browse Source
This commit is contained in:
Andre Mourinho 2018-07-17 19:24:20 -04:00
parent dc54530028
commit 20e1f22c31
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="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 />

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

@ -1,5 +1,6 @@
<!-- Nav -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<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>
@ -31,20 +32,23 @@
</div>
</div>
</div>
</nav>
</nav>
<!-- Content -->
<div>
<!-- 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>

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="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>

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

@ -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>

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 {
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/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>