Fixed double scroll in catalog
This commit is contained in:
parent
45a1ff9245
commit
58e853e7b7
@ -1,95 +1,96 @@
|
|||||||
|
<div [ngClass]="{lock: lock, unlock: !lock}">
|
||||||
|
<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>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
|
<div class="collapse navbar-collapse" id="navbar">
|
||||||
<div class="container">
|
<ul class="navbar-nav mr-auto">
|
||||||
<a class="navbar-brand roboto" [routerLink]="['/']">
|
<li class="nav-item">
|
||||||
<span class="fh-fade">fh</span>
|
<a class="nav-link text-dark" [routerLink]="['/about']">About</a>
|
||||||
<span class="rainbow"> & </span>
|
</li>
|
||||||
<span class="sons-fade">sons</span>
|
<li class="nav-item">
|
||||||
</a>
|
<a class="nav-link text-dark" [routerLink]="['/catalog']">Catalog</a>
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
|
</li>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<li class="nav-item">
|
||||||
</button>
|
<a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>
|
||||||
|
</li>
|
||||||
<div class="collapse navbar-collapse" id="navbar">
|
<li class="nav-item">
|
||||||
<ul class="navbar-nav mr-auto">
|
<a class="nav-link text-dark" [routerLink]="['/msds']">MSDS</a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link text-dark" [routerLink]="['/about']">About</a>
|
</ul>
|
||||||
</li>
|
<div class="ml-auto">
|
||||||
<li class="nav-item">
|
<button *ngIf="!store.user" mat-stroked-button color="primary" (click)="login()">Login</button>
|
||||||
<a class="nav-link text-dark" [routerLink]="['/catalog']">Catalog</a>
|
<div *ngIf="store.user" class="d-inline">
|
||||||
</li>
|
<span class="text-muted mr-3">{{store.user.email}}</span>
|
||||||
<li class="nav-item">
|
<button mat-stroked-button color="accent" (click)="afAuth.auth.signOut()">Logout</button>
|
||||||
<a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>
|
</div>
|
||||||
</li>
|
<button *ngIf="cart.length" mat-icon-button class="ml-3" [routerLink]="['/cart']">
|
||||||
<li class="nav-item">
|
<mat-icon style="transform: translateY(6px)" [matBadge]="cartCount()" matBadgeColor="warn">
|
||||||
<a class="nav-link text-dark" [routerLink]="['/msds']">MSDS</a>
|
shopping_cart
|
||||||
</li>
|
</mat-icon>
|
||||||
</ul>
|
</button>
|
||||||
<div class="ml-auto">
|
|
||||||
<button *ngIf="!store.user" mat-stroked-button color="primary" (click)="login()">Login</button>
|
|
||||||
<div *ngIf="store.user" class="d-inline">
|
|
||||||
<span class="text-muted mr-3">{{store.user.email}}</span>
|
|
||||||
<button mat-stroked-button color="accent" (click)="afAuth.auth.signOut()">Logout</button>
|
|
||||||
</div>
|
</div>
|
||||||
<button *ngIf="cart.length" mat-icon-button class="ml-3" [routerLink]="['/cart']">
|
|
||||||
<mat-icon style="transform: translateY(6px)" [matBadge]="cartCount()" matBadgeColor="warn">
|
|
||||||
shopping_cart
|
|
||||||
</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Push content down from under nav-->
|
||||||
|
<div style="height: 56px"></div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div>
|
||||||
|
<router-outlet></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Push content down from under nav-->
|
<!-- Footer -->
|
||||||
<div style="height: 56px"></div>
|
<footer class="d-print-none">
|
||||||
|
<div class="d-flex py-4 justify-content-center">
|
||||||
<!-- Content -->
|
<div class="d-none d-md-inline ml-5 text-left">
|
||||||
<div>
|
<h5>MAIN MENU</h5>
|
||||||
<router-outlet></router-outlet>
|
<ul style="list-style-type: none; padding-left: 0;">
|
||||||
|
<li>
|
||||||
|
<a [routerLink]="['/about']">About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a [routerLink]="['/store']">Store</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a [routerLink]="['/formulaManager']">Formula Manager</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="d-none d-md-inline mx-5 text-left">
|
||||||
|
<h5 class="text-center">PRODUCTS</h5>
|
||||||
|
<ul style="list-style-type: none; padding-left: 0; columns: 3;">
|
||||||
|
<li *ngFor="let c of store.categories | async">
|
||||||
|
<a [routerLink]="['/store', c.name]">{{c.name}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<h5>CONTACT</h5>
|
||||||
|
<p>
|
||||||
|
<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 class="container-fluid footer-sub">
|
||||||
|
<div class="container text-center">
|
||||||
|
<p class="mb-0 p-2">© 2018 FH & SONS
|
||||||
|
<br />Designed and developed by:
|
||||||
|
<a href="http://zakscode.com">Zak Timson</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer 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>
|
|
||||||
<ul style="list-style-type: none; padding-left: 0;">
|
|
||||||
<li>
|
|
||||||
<a [routerLink]="['/about']">About</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a [routerLink]="['/store']">Store</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a [routerLink]="['/formulaManager']">Formula Manager</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="d-none d-md-inline mx-5 text-left">
|
|
||||||
<h5 class="text-center">PRODUCTS</h5>
|
|
||||||
<ul style="list-style-type: none; padding-left: 0; columns: 3;">
|
|
||||||
<li *ngFor="let c of store.categories | async">
|
|
||||||
<a [routerLink]="['/store', c.name]">{{c.name}}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="text-left">
|
|
||||||
<h5>CONTACT</h5>
|
|
||||||
<p>
|
|
||||||
<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 class="container-fluid footer-sub">
|
|
||||||
<div class="container text-center">
|
|
||||||
<p class="mb-0 p-2">© 2018 FH & SONS
|
|
||||||
<br />Designed and developed by:
|
|
||||||
<a href="http://zakscode.com">Zak Timson</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|||||||
@ -18,6 +18,10 @@ export class AppComponent implements OnInit {
|
|||||||
@LocalStorage({ defaultValue: [], encryptionKey: 'HmRoBFUEVWqW5uvy' })
|
@LocalStorage({ defaultValue: [], encryptionKey: 'HmRoBFUEVWqW5uvy' })
|
||||||
cart: { id: string; item: string; option: POption, quantity: number}[];
|
cart: { id: string; item: string; option: POption, quantity: number}[];
|
||||||
|
|
||||||
|
set lock(lock: boolean) {
|
||||||
|
document.getElementsByTagName('body')[0].classList[lock ? 'add' : 'remove']('lock');
|
||||||
|
}
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private dialog: MatDialog,
|
private dialog: MatDialog,
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
<iframe class="w-100 border-0" [src]="trust('https://screenprintingsuppliescanada.com')" style="height: 100vh"></iframe>
|
<iframe class="w-100 border-0" [src]="trust('https://screenprintingsuppliescanada.com')" style="height: calc(100vh - 56px)"></iframe>
|
||||||
|
|||||||
@ -1,16 +1,22 @@
|
|||||||
import {Component, OnInit} from "@angular/core";
|
import {Component, OnDestroy, OnInit} from "@angular/core";
|
||||||
import {HttpClient} from "@angular/common/http";
|
|
||||||
import {DomSanitizer} from "@angular/platform-browser";
|
import {DomSanitizer} from "@angular/platform-browser";
|
||||||
|
import {AppComponent} from "../app.component";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'catalog',
|
selector: 'catalog',
|
||||||
templateUrl: 'catalog.component.html'
|
templateUrl: 'catalog.component.html'
|
||||||
})
|
})
|
||||||
export class CatalogComponent implements OnInit{
|
export class CatalogComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
constructor(private http: HttpClient, private sanatize: DomSanitizer) {}
|
constructor(private app: AppComponent, private sanitize: DomSanitizer) {}
|
||||||
|
|
||||||
ngOnInit() {}
|
ngOnInit() {
|
||||||
|
this.app.lock = true;
|
||||||
|
}
|
||||||
|
|
||||||
trust(url) { return this.sanatize.bypassSecurityTrustResourceUrl(url); }
|
ngOnDestroy() {
|
||||||
|
this.app.lock = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
trust(url) { return this.sanitize.bypassSecurityTrustResourceUrl(url); }
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,6 +24,10 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: #292929;
|
background-color: #292929;
|
||||||
|
|
||||||
|
&.lock {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-fix {
|
.button-fix {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user