Add header component
This commit is contained in:
Quique Fernandez
parent
61b9c5919f
commit
04d28fd52b
@ -1,9 +1,5 @@
|
||||
<div class="esh-basket">
|
||||
<div class="esh-basket-header">
|
||||
<div class="container">
|
||||
<a class="esh-basket-back" routerLink="/catalog">Back to catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
<esh-header url="/catalog">Back to catalog</esh-header>
|
||||
|
||||
<div class="container">
|
||||
<article class="esh-basket-titles row">
|
||||
|
||||
@ -4,8 +4,8 @@ import { BrowserModule } from '@angular/platform-browser';
|
||||
import { SharedModule } from '../shared/shared.module';
|
||||
import { BasketComponent } from './basket.component';
|
||||
import { BasketStatusComponent } from './basket-status/basket-status.component';
|
||||
//import { routing } from './basket.routes';
|
||||
import { BasketService } from './basket.service';
|
||||
import { Header } from '../shared/components/header/header';
|
||||
|
||||
@NgModule({
|
||||
imports: [SharedModule],
|
||||
|
||||
@ -57,7 +57,6 @@ export class CatalogComponent implements OnInit {
|
||||
getCatalog(pageSize:number, pageIndex: number, brand?: number, type?: number) {
|
||||
this.service.getCatalog(pageIndex, pageSize, brand, type).subscribe(catalog => {
|
||||
this.catalog = catalog;
|
||||
//console.log('catalog items retrieved: ' + catalog.count);
|
||||
|
||||
this.paginationInfo = {
|
||||
actualPage : catalog.pageIndex,
|
||||
@ -67,7 +66,6 @@ export class CatalogComponent implements OnInit {
|
||||
items: catalog.pageSize
|
||||
};
|
||||
|
||||
//console.log(this.paginationInfo);
|
||||
});
|
||||
}
|
||||
|
||||
@ -76,7 +74,6 @@ export class CatalogComponent implements OnInit {
|
||||
this.types = types;
|
||||
let alltypes = { id: null, type: 'All' };
|
||||
this.types.unshift(alltypes);
|
||||
//console.log('types retrieved: ' + types.length);
|
||||
});
|
||||
}
|
||||
|
||||
@ -85,7 +82,6 @@ export class CatalogComponent implements OnInit {
|
||||
this.brands = brands;
|
||||
let allBrands = { id: null, brand: 'All' };
|
||||
this.brands.unshift(allBrands);
|
||||
//console.log('brands retrieved: ' + brands.length);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { SharedModule } from '../shared/shared.module';
|
||||
import { CatalogComponent } from './catalog.component';
|
||||
//import { routing } from './catalog.routes';
|
||||
import { CatalogService } from './catalog.service';
|
||||
import { Pager } from '../shared/components/pager/pager';
|
||||
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
<div class="esh-orders_detail">
|
||||
<div class="esh-orders_detail-header">
|
||||
<div class="container">
|
||||
<a class="esh-orders_detail-back" routerLink="/orders">Back to list</a>
|
||||
</div>
|
||||
</div>
|
||||
<esh-header url="/orders">Back to list</esh-header>
|
||||
|
||||
<div class="container">
|
||||
<section class="esh-orders_detail-section">
|
||||
|
||||
@ -3,25 +3,6 @@
|
||||
.esh-orders_detail {
|
||||
min-height: 80vh;
|
||||
|
||||
$header-height: 4rem;
|
||||
&-header {
|
||||
background-color: #00A69C;
|
||||
height: $header-height;
|
||||
}
|
||||
|
||||
&-back {
|
||||
color: rgba($color-foreground-brighter, .4);
|
||||
line-height: $header-height;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: color $animation-speed-default;
|
||||
|
||||
&:hover {
|
||||
color: $color-foreground-brighter;
|
||||
transition: color $animation-speed-default;
|
||||
}
|
||||
}
|
||||
|
||||
&-section {
|
||||
padding: 1rem 0;
|
||||
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
<div class="esh-orders">
|
||||
<div class="esh-orders-header">
|
||||
<div class="container">
|
||||
<a class="esh-orders-back" routerLink="/catalog">Back to catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
<esh-header url="/catalog">Back to catalog</esh-header>
|
||||
|
||||
<div class="container">
|
||||
<article class="esh-orders-titles row">
|
||||
|
||||
@ -6,7 +6,7 @@ import { OrdersComponent } from './orders.component';
|
||||
import { OrdersDetailComponent } from './orders-detail/orders-detail.component';
|
||||
import { OrdersNewComponent } from './orders-new/orders-new.component';
|
||||
import { OrdersService } from './orders.service';
|
||||
import { Pager } from '../shared/components/pager/pager';
|
||||
import { Header } from '../shared/components/header/header';
|
||||
|
||||
@NgModule({
|
||||
imports: [BrowserModule, SharedModule],
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
<div class="esh-header">
|
||||
<div class="container">
|
||||
<a class="esh-header-back" routerLink="{{url}}">
|
||||
<ng-content></ng-content>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
@import "../../../variables";
|
||||
|
||||
.esh-header {
|
||||
$header-height: 4rem;
|
||||
|
||||
background-color: $color-brand;
|
||||
height: $header-height;
|
||||
|
||||
&-back {
|
||||
color: rgba($color-foreground-brighter, .4);
|
||||
line-height: $header-height;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: color $animation-speed-default;
|
||||
|
||||
&:hover {
|
||||
color: $color-foreground-brighter;
|
||||
transition: color $animation-speed-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'esh-header',
|
||||
templateUrl: './header.html',
|
||||
styleUrls: ['./header.scss']
|
||||
})
|
||||
export class Header {
|
||||
@Input()
|
||||
url: string;
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
}
|
||||
|
||||
&:hover &-drop {
|
||||
height: 6rem;
|
||||
height: 7rem;
|
||||
transition: height $animation-speed-default;
|
||||
}
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@ import { SecurityService } from './services/security.service';
|
||||
|
||||
//Components:
|
||||
import { Pager } from './components/pager/pager';
|
||||
import { Header } from './components/header/header';
|
||||
import { Identity } from './components/identity/identity';
|
||||
|
||||
@NgModule({
|
||||
@ -42,6 +43,7 @@ import {Identity } from './components/identity/identity';
|
||||
PageHeadingComponent,
|
||||
UppercasePipe,
|
||||
Pager,
|
||||
Header,
|
||||
Identity
|
||||
],
|
||||
exports: [
|
||||
@ -61,6 +63,7 @@ import {Identity } from './components/identity/identity';
|
||||
PageHeadingComponent,
|
||||
UppercasePipe,
|
||||
Pager,
|
||||
Header,
|
||||
Identity
|
||||
]
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user