Skip to content

D
dcarfixers_angular
Commit 37a936a4 by amalk
Options

30-04-2019|11:48

parent 3d2305a9
Showing with 1448 additions and 24 deletions
package-lock.json
......@@ -4911,12 +4911,14 @@
},
"handlebars": {
"version": "4.1.1",
"resolved": "",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.1.tgz",
"integrity": "sha512-3Zhi6C0euYZL5sM0Zcy7lInLXKQ+YLcF/olbN010mzGQ4XVm50JeyBnMqofHh696GrciGruC7kCcApPDJvVgwA==",
"dev": true,
"requires": {
"neo-async": "^2.6.0",
"optimist": "^0.6.1",
"source-map": "^0.6.1"
"source-map": "^0.6.1",
"uglify-js": "^3.1.4"
},
"dependencies": {
"source-map": {
......@@ -7007,6 +7009,14 @@
"resolved": "https://registry.npmjs.org/ng2-file-upload/-/ng2-file-upload-1.3.0.tgz",
"integrity": "sha512-Pudxik6LWYsT8hNiEW7RfjgGWAnvfQywxwJYMdt1snTUe+KnlRc/QqPv3QEQW6plXTanuLkYz/TbqilSfSHOsw=="
},
"ng2-tooltip-directive": {
"version": "2.1.9",
"resolved": "https://registry.npmjs.org/ng2-tooltip-directive/-/ng2-tooltip-directive-2.1.9.tgz",
"integrity": "sha512-ZnlSRmxCMop65L0D+s1V7Me01FmhNdjxpuPd9n9e8U6wnmEQxqRy9Dd1Op6DnpkPYz0P48yn8GG0jYTP6yoXTQ==",
"requires": {
"tslib": "^1.9.0"
}
},
"ng5-slider": {
"version": "1.1.14",
"resolved": "https://registry.npmjs.org/ng5-slider/-/ng5-slider-1.1.14.tgz",
......@@ -10227,6 +10237,33 @@
"integrity": "sha1-tlQ6g8/Iwr77P0yPumiW9bDJvmg=",
"dev": true
},
"uglify-js": {
"version": "3.5.9",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.9.tgz",
"integrity": "sha512-WpT0RqsDtAWPNJK955DEnb6xjymR8Fn0OlK4TT4pS0ASYsVPqr5ELhgwOwLCP5J5vHeJ4xmMmz3DEgdqC10JeQ==",
"dev": true,
"optional": true,
"requires": {
"commander": "~2.20.0",
"source-map": "~0.6.1"
},
"dependencies": {
"commander": {
"version": "2.20.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
"integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
"dev": true,
"optional": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"optional": true
}
}
},
"ultron": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
......
package.json
......@@ -35,6 +35,7 @@
"mt-latlon": "^0.1.1",
"ng2-archwizard": "^2.1.0",
"ng2-file-upload": "^1.3.0",
"ng2-tooltip-directive": "^2.1.9",
"ng5-slider": "^1.1.14",
"ngx-bootstrap": "^3.2.0",
"ngx-carousel": "^1.3.5",
......
src/app/home/home.module.ts
......@@ -15,6 +15,7 @@ import { ForgotComponent } from './forgot/forgot.component';
import { TncComponent } from './tnc/tnc.component';
import { PrivacyComponent } from './privacy/privacy.component';
import { TnsComponent } from './tns/tns.component';
import { TooltipModule } from 'ng2-tooltip-directive';
@NgModule({
......@@ -34,6 +35,7 @@ import { TnsComponent } from './tns/tns.component';
ArchwizardModule,
NgxCarouselModule,
ReactiveFormsModule,
TooltipModule,
BsDatepickerModule.forRoot(),
MalihuScrollbarModule.forRoot(),
AgmCoreModule.forRoot({
......
src/app/purchase/address/address.component.html 0 → 100644
<div class="purchase_wrapper">
<div class="container-fluid">
<app-searchbar>
</app-searchbar>
<div class="address_wrapper">
<h3>Delivery Address</h3>
<div class="address_inner_wrapper">
<ul>
<li>
<h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
<p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
<div class="edit">
Edit
</div>
</li>
<li>
<h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
<p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
<div class="edit">
Edit
</div>
</li>
<li>
<h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
<p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
<div class="edit">
Edit
</div>
</li>
<div class="add_new">
Add new Address
</div>
</ul>
<div class="row">
<div class="col-md-6">
<h2>$ 3,200</h2>
<h5>Delivery expected by Thur 1 May 2019</h5>
</div>
<div class="col-md-6 textRight">
<h4>
<div class="delivery_btn floatRight" (click)="goToPage('summary')">Deliver here</div>
<div class="clear"></div>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/purchase/address/address.component.scss 0 → 100644
.purchase_wrapper{
.address_wrapper{
h3{
font-size: 20px;
padding-bottom: 20px;
}
.address_inner_wrapper{
padding-bottom: 40px;
ul{
padding:0px;
padding-bottom: 40px;
li{
margin-bottom: 10px;
border-radius: 10px;
background: #fff;
padding:25px;
padding-left: 30px;
list-style: none;
position: relative;
border:2px solid #fff;
// transition-delay: 1s;
cursor: pointer;
&:hover{
border:2px solid #2655bf;
// transition-delay: 1s;
// transition-timing-function: ease-in-out;
}
&:focus{
border:2px solid #2655bf;
// transition-delay: 1s;
// transition-timing-function: ease-in-out;
}
.edit{
background: #fef160;
color: #000;
position: absolute;
top: 20px;
right:20px;
padding-left: 20px;
padding-right: 20px;
}
h4{
font-size: 18px;
margin:0px;
font-weight: 700;
.address{
color: #92a1b1;
margin-left: 10px;
margin-right: 10px;
font-weight: 600;
}
.number{
margin-left:30px;
font-weight:400;
}
}
p{
padding-top: 20px;
margin: 0px;
}
}
.add_new{
background: #fef160;
color: #000;
width: 100%;
text-align: center;
cursor: pointer;
}
}
h2{
color: #000000;
font-weight: 700;
padding-top:10px;
padding-bottom: 0px;
margin: 0px;
}
h5{
margin: 0px;
padding: 0px;
color: #000000;
font-size: 14px;
padding-top: 10px;
font-weight: 400;
padding-bottom: 15px;
}
.delivery_btn{
background: #2655bf;
color: #fff;
height: 45px;
padding: 8px;
padding-left: 8%;
padding-right: 8%;
border:none;
text-align: center;
cursor: pointer;
}
}
}
}
\ No newline at end of file
src/app/purchase/address/address.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AddressComponent } from './address.component';
describe('AddressComponent', () => {
let component: AddressComponent;
let fixture: ComponentFixture<AddressComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddressComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddressComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/purchase/address/address.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.scss']
})
export class AddressComponent implements OnInit {
constructor(
private router : Router,
private route : ActivatedRoute
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
src/app/purchase/cart/cart.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CartComponent } from './cart.component';
describe('CartComponent', () => {
let component: CartComponent;
let fixture: ComponentFixture<CartComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CartComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CartComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/purchase/cart/cart.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NgxCarousel } from 'ngx-carousel';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
count:any;
public carouselTile: NgxCarousel;
constructor(
private router : Router,
private route : ActivatedRoute
) {
this.count = 0;
}
add(){
this.count = this.count + 1;
}
minus(){
this.count = this.count - 1;
if(this.count < 0){
this.count = 0;
}
}
ngOnInit() {
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
carouselTileLoad(){ return ''; }
}
src/app/purchase/orders/orders.component.scss 0 → 100644
.purchase_wrapper{
.myorder_wrapper{
width:100%;
ul{
padding:0px;
li{
list-style: none;
background: #fff;
list-style: none;
padding:20px;
margin-bottom:20px;
.auto_part_container{
width:200px;
height:200px;
border:1px solid #eee;
text-align: center;
padding: 15px;
float: left;
img{
width:100%;
height:100%;
object-position: center;
object-fit:100%;
}
}
.auto_part_detail{
width:calc(100% - 200px);
float: right;
padding: 10px;
padding-left: 20px;
h2{
font-size: 20px;
}
h3{
font-size: 14px;
margin-bottom: 0px;
padding:0px;
}
.others{
padding-top: 15px;
padding-bottom: 15px;
}
h4{
font-size: 14px;
padding-bottom: 0px;
margin-bottom:7px;
strong{
background: #2655bf;
color: #fff;
margin-left: 10px;
padding: 3px;
padding-left: 7px;
padding-right: 7px;
}
div{
color: #92a1b1;
font-weight: 400;
width: 50px;
display: inline-block;
margin-right: 10px;
}
span{
display: inline-block;
}
}
}
.price_details{
h5{
font-weight: 600;
padding-bottom: 30px;
font-size: 25px;
}
h4{
font-size: 14px;
padding-bottom: 0px;
margin-bottom:20px;
strong{
background: #2655bf;
color: #fff;
margin-left: 10px;
padding: 0px;
padding-left: 7px;
padding-right: 7px;
}
div{
color: #92a1b1;
font-weight: 400;
display: inline-block;
margin-top: 5px;
}
span{
display: inline-block;
}
}
.cancel{
background: #fef160;
color: #000;
float: left;
padding-left: 5px;
padding-right:5px;
font-size: 14px;
}
.review{
background: #2655bf;
color: #fff;
float: left;
padding-left: 5px;
padding-right:5px;
font-size: 14px;
}
.cancelled{
background: #c51b1b;
color: #fff;
float: left;
padding-left: 5px;
padding-right:5px;
font-size: 14px;
}
}
}
}
}
.bottom_product_list{
background: #fff;
position: relative;
h4{
color: #262626;
margin: 0px;
padding:15px;
font-size: 16px;
padding-bottom: 0px;
span{
color: #92a1b1;
}
}
.leftRs{
position: absolute;
left:10px;
top: 35%;
width:50px;
height:50px;
border-radius: 50px;
background: url("/assets/images/asset_left.png");
border:none;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
&:focus{
outline: none;
}
}
.rightRs{
position: absolute;
right:10px;
top: 35%;
width:50px;
height:50px;
border-radius: 50px;
background: url("/assets/images/asset_right.png");
border:none;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
&:focus{
outline: none;
}
}
li{
list-style: none;
padding:10px;
width:100%;
display: inline-block;
.inner_div_product{
border:1px solid #eeeeee;
min-height: 300px;
padding: 15px;
margin:0 auto;
width:100%;
.product_wrapper{
text-align: center;
padding: 10px;
img{
height: 180px;
width: auto;
}
}
h5{
padding:0px;
margin:0px;
color: #424242;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 5px;
}
p{
padding:0px;
margin:0px;
color: #a3afbd;
font-size: 14px;
}
.star_ratting{
padding-top: 2px;
span{
float: right;
color: #000000;
}
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
margin: 2px;
font-size: 16px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
margin:0px;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
}
}
}
}
\ No newline at end of file
src/app/purchase/orders/orders.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { OrdersComponent } from './orders.component';
describe('OrdersComponent', () => {
let component: OrdersComponent;
let fixture: ComponentFixture<OrdersComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ OrdersComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OrdersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/purchase/orders/orders.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NgxCarousel } from 'ngx-carousel';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.scss']
})
export class OrdersComponent implements OnInit {
public carouselTile: NgxCarousel;
constructor(
private router : Router,
private route : ActivatedRoute
) {
}
ngOnInit() {
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
carouselTileLoad(){ return ''; }
}
src/app/purchase/productdetails/productdetails.component.html
......@@ -49,7 +49,7 @@
</div>
<div class="btn_bay">
<button class="btn_cart btn">Add to Cart</button>
<button class="btn_buy btn">Buy Now</button>
<button class="btn_buy btn" (click)="goToPage('address')">Buy Now</button>
</div>
</div>
<div class="product_details">
......@@ -153,7 +153,7 @@
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<div class="btn_bay floatRight p10">
<button class="btn_cart btn" style="width: 150px;">Rate Product</button>
<button class="btn_cart btn" style="width: 150px;" (click)="goToPage('rating')">Rate Product</button>
</div>
<div class="clear"></div>
</div>
......@@ -164,11 +164,11 @@
<ul>
<li>
<div class="row">
<div class="col-md-10">
<div class="col-md-9">
<h4 class="pt0">Good Product</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-md-2">
<div class="col-md-3">
<div class="feed_rating">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
......@@ -190,11 +190,11 @@
</li>
<li>
<div class="row">
<div class="col-md-10">
<div class="col-md-9">
<h4 class="pt0">Good Product</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-md-2">
<div class="col-md-3">
<div class="feed_rating">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
......@@ -216,11 +216,11 @@
</li>
<li>
<div class="row">
<div class="col-md-10">
<div class="col-md-9">
<h4 class="pt0">Good Product</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-md-2">
<div class="col-md-3">
<div class="feed_rating">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
......
src/app/purchase/productlist/productlist.component.scss
......@@ -202,7 +202,6 @@
width:calc(100% - 310px);
margin-left: 10px;
background: #fff;
height: 100vh;
padding:20px;
.search_list_header{
p{
......
src/app/purchase/purchase.module.ts
......@@ -7,16 +7,24 @@ import { SearchbarComponent } from './searchbar/searchbar.component';
import { Ng5SliderModule } from 'ng5-slider';
import { NgxGalleryModule } from 'ngx-gallery';
import { NgxCarouselModule } from 'ngx-carousel';
import { CartComponent } from './cart/cart.component';
import { OrdersComponent } from './orders/orders.component';
import { RatingComponent } from './rating/rating.component';
import { TrackComponent } from './track/track.component';
import { AddressComponent } from './address/address.component';
import { SummaryComponent } from './summary/summary.component';
import { TooltipModule } from 'ng2-tooltip-directive';
@NgModule({
declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent],
declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent, CartComponent, OrdersComponent, RatingComponent, TrackComponent, AddressComponent, SummaryComponent],
imports: [
CommonModule,
moduleRouting,
Ng5SliderModule,
NgxGalleryModule,
NgxCarouselModule
NgxCarouselModule,
TooltipModule
]
})
export class PurchaseModule { }
src/app/purchase/purchase.routing.ts
......@@ -2,10 +2,23 @@ import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductlistComponent } from './productlist/productlist.component';
import { ProductdetailsComponent } from './productdetails/productdetails.component';
import { CartComponent } from './cart/cart.component';
import { OrdersComponent } from './orders/orders.component';
import { RatingComponent } from './rating/rating.component';
import { TrackComponent } from './track/track.component';
import { AddressComponent } from './address/address.component';
import { SummaryComponent } from './summary/summary.component';
const ModuleRoutes: Routes = [
{ path: 'productlist', component: ProductlistComponent},
{ path: 'productdetails', component: ProductdetailsComponent}
{ path: 'productdetails', component: ProductdetailsComponent},
{ path: 'cart', component: CartComponent },
{ path: 'orders', component: OrdersComponent },
{ path: 'rating', component: RatingComponent },
{ path: 'track', component: TrackComponent },
{ path: 'address', component: AddressComponent },
{ path: 'summary', component: SummaryComponent }
];
export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
......
src/app/purchase/rating/rating.component.scss 0 → 100644
.purchase_wrapper{
.ratting_div{
width:100%;
background: #fff;
margin-bottom: 30px;
padding:30px;
.auto_part_container{
width:200px;
height:200px;
border:1px solid #eee;
text-align: center;
padding: 15px;
float: left;
img{
width:100%;
height:100%;
object-position: center;
object-fit:100%;
}
}
h3{
margin:0px;
padding:0px;
font-size: 16px;
padding-top: 10px;
}
p{
margin:0px;
padding:0px;
color: #92a1b1;
padding-top: 4px;
}
.ratting_inner{
p{
color: #000000;
margin: 0px;
padding:0px;
font-size: 20px;
border-left:6px solid #fef160;
padding-left: 20px;
width: 100%;
margin-bottom: 20px;
}
hr{
margin: 0px;
margin-bottom: 20px;
margin-top: 20px;
}
.submit_btn{
background: #2655bf;
color: #fff;
border:none;
height:50px;
padding-left: 8%;
padding-right: 8%;
font-size: 18px;
}
.title_input{
border:none;
width: 100%;
height:50px;
font-size: 20px;
padding-left: 20px;
font-weight: 300;
&:focus{
outline: none;
}
&::placeholder{
color: #cad2db;
font-weight: 300;
}
}
.ratting_star{
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
margin: 6px;
font-size: 30px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
margin:0px;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
}
}
.bottom_product_list{
background: #fff;
position: relative;
padding-bottom:50px;
h4{
color: #262626;
margin: 0px;
padding:15px;
font-size: 16px;
padding-bottom: 0px;
span{
color: #92a1b1;
}
}
.leftRs{
position: absolute;
left:10px;
top: 35%;
width:50px;
height:50px;
border-radius: 50px;
background: url("/assets/images/asset_left.png");
border:none;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
&:focus{
outline: none;
}
}
.rightRs{
position: absolute;
right:10px;
top: 35%;
width:50px;
height:50px;
border-radius: 50px;
background: url("/assets/images/asset_right.png");
border:none;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
&:focus{
outline: none;
}
}
li{
list-style: none;
padding:10px;
width:100%;
display: inline-block;
.inner_div_product{
border:1px solid #eeeeee;
min-height: 300px;
padding: 15px;
margin:0 auto;
width:100%;
.product_wrapper{
text-align: center;
padding: 10px;
img{
height: 180px;
width: auto;
}
}
h5{
padding:0px;
margin:0px;
color: #424242;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 5px;
}
p{
padding:0px;
margin:0px;
color: #a3afbd;
font-size: 14px;
}
.star_ratting{
padding-top: 2px;
span{
float: right;
color: #000000;
}
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
margin: 2px;
font-size: 16px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
margin:0px;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
}
}
}
}
\ No newline at end of file
src/app/purchase/rating/rating.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RatingComponent } from './rating.component';
describe('RatingComponent', () => {
let component: RatingComponent;
let fixture: ComponentFixture<RatingComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RatingComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RatingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/purchase/rating/rating.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { NgxCarousel } from 'ngx-carousel';
@Component({
selector: 'app-rating',
templateUrl: './rating.component.html',
styleUrls: ['./rating.component.scss']
})
export class RatingComponent implements OnInit {
public carouselTile: NgxCarousel;
constructor(
private router : Router,
private route : ActivatedRoute
) { }
ngOnInit() {
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
carouselTileLoad(){ return ''; }
}
src/app/purchase/searchbar/searchbar.component.html
......@@ -8,15 +8,11 @@
</div>
<div class="purchase_other">
<ul>
<li>
<img src="assets/images/asset_location.png">
Orlando, USA
</li>
<li>
<li (click)="goToPage('orders')">
<img src="assets/images/asset_cart.png">
My Order
</li>
<li>
<li (click)="goToPage('cart')">
<img src="assets/images/asset_order.png">
My Cart
</li>
......
src/app/purchase/searchbar/searchbar.component.scss
......@@ -3,7 +3,7 @@
padding-top: 30px;
padding-bottom: 30px;
.purchase_searchbar{
width:calc(100% - 35%);
width:calc(100% - 60%);
float: left;
.purchase_inner_search_bar{
......@@ -43,7 +43,7 @@
}
}
.purchase_other{
width: 35%;
width:40%;
float: right;
padding: 10px;
ul
......@@ -52,9 +52,10 @@
padding:0px;
text-align: right;
li{
padding-left: 10%;
padding-left:5%;
display: inline-block;
text-align: right;
cursor: pointer;
img{
margin-right: 10px;
}
......
src/app/purchase/searchbar/searchbar.component.ts
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-searchbar',
......@@ -7,9 +8,17 @@ import { Component, OnInit } from '@angular/core';
})
export class SearchbarComponent implements OnInit {
constructor() { }
constructor(
private router : Router,
private route : ActivatedRoute
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
src/app/purchase/summary/summary.component.html 0 → 100644
<div class="purchase_wrapper">
<div class="container-fluid">
<app-searchbar>
</app-searchbar>
<div class="summary_wrapper">
<h3>Order Summary</h3>
<div class="summary_wrapper_inner">
<h4>Product Details</h4>
<div class="row">
<div class="col-md-6">
<div class="image_div"></div>
<div class="image_detail">
<h5>Appolo Amazer Tubeless 4 Wheeler</h5>
<p>Audi Q7</p>
</div>
<div class="clear"></div>
</div>
<div class="col-md-6">
<h6>
<span class="head">Color</span>
<span>Black</span>
</h6>
</div>
</div>
<hr>
<h4>Delivery Address</h4>
<div class="row">
<div class="col-md-6">
<h2>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h2>
<p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala <strong>Pin 682030</strong> </p>
</div>
<div class="col-md-6">
<p>Delivery Expected by Thursday 29 April, 2019</p>
</div>
</div>
<hr>
<h4>Payment Details</h4>
<div class="row">
<div class="col-md-6">
<p>Quantity </p>
</div>
<div class="col-md-6">
<p><strong>1</strong></p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Total Amount</p>
</div>
<div class="col-md-6">
<p><strong style="font-size: 18px;">$ 399</strong></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<p>Order Confirmation mail will be sent to your mail ID <a>[email protected]</a> </p>
</div>
<div class="col-md-6">
<button class="continue_btn">Continue</button>
<span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span>
<div class="clear"></div>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/purchase/summary/summary.component.scss 0 → 100644
.purchase_wrapper{
.summary_wrapper{
h3{
font-size: 20px;
padding-bottom: 20px;
}
.summary_wrapper_inner{
background: #fff;
padding:25px;
hr{
margin-top: 25px;
margin-bottom: 25px;
}
h4{
color: #92a1b1;
padding-bottom: 10px;
font-size: 18px;
font-weight: 500;
}
h6{
span{
}
.head{
color: #92a1b1;
padding-right: 20px;
}
}
.image_div{
width:100px;
height:100px;
float: left;
border:1px solid #eee;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}
}
.image_detail{
float: left;
padding: 15px;
}
h2{
font-size: 18px;
margin:0px;
font-weight: 700;
padding-bottom: 10px;
.address{
color: #92a1b1;
margin-left: 10px;
margin-right: 10px;
font-weight: 600;
}
.number{
margin-left:30px;
font-weight:400;
}
}
p{
padding-top: 10px;
margin: 0px;
a{
color: #92a1b1;
text-decoration: none;
}
}
.continue_btn{
background: #2655bf;
color: #fff;
height: 45px;
padding: 8px;
padding-left: 8%;
padding-right: 8%;
border:none;
text-align: center;
cursor: pointer;
}
}
}
}
\ No newline at end of file
src/app/purchase/summary/summary.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SummaryComponent } from './summary.component';
describe('SummaryComponent', () => {
let component: SummaryComponent;
let fixture: ComponentFixture<SummaryComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SummaryComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SummaryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/purchase/summary/summary.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-summary',
templateUrl: './summary.component.html',
styleUrls: ['./summary.component.scss']
})
export class SummaryComponent implements OnInit {
constructor(
private router : Router,
private route : ActivatedRoute
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
src/app/purchase/track/track.component.html 0 → 100644
<div class="purchase_wrapper">
<div class="container-fluid">
<app-searchbar>
</app-searchbar>
<div class="purchase_content_wrapper">
<div class="row">
<div class="col-md-4">
<div class="product_gallery">
<div class="product_gallery_inner">
<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
</div>
</div>
</div>
<div class="col-md-8">
<div class="product_details">
<h1>Apollo Amazer 4G Tubeless 4 Wheeler Tyre (155/80R13, Tube Less)</h1>
<div class="review" (click)="goToPage('rating')">Write review</div>
<div class="clear"></div>
<h2>265/65R17, Tube Less</h2>
<div class="others">
<h4><div>Color</div><span>Black</span></h4>
<h4><div>Quantity</div><span>1</span></h4>
</div>
<div class="row">
<div class="col-md-5">
<div class="order_range">
<ng5-slider [(value)]="verticalSlider2.minValue" [(highValue)]="verticalSlider2.maxValue" [options]="verticalSlider2.options"></ng5-slider>
</div>
<div class="order_range_details">
<span>
<h5>Order Confirmed</h5>
<p>Thurs, April 25th 2019</p>
</span>
<span>
<h5>Packed</h5>
<p>Thurs, April 25th 2019</p>
</span>
<span>
<h5>Delivered</h5>
<p>Thurs, April 25th 2019</p>
</span>
</div>
<div class="clear"></div>
</div>
<div class="col-md-7">
<div class="order_delivery_details">
<div class="order_id">
ORDID145879653
</div>
<div class="order_delivery">
<h4>
Delivered on Thur, April 25
</h4>
<p>
Item has been delivered
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4>Total Amount</h4>
<h3>$ 3,200</h3>
</div>
<div class="col-md-6">
<h4>
<div class="need_invoice">Need invoice</div>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/purchase/track/track.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TrackComponent } from './track.component';
describe('TrackComponent', () => {
let component: TrackComponent;
let fixture: ComponentFixture<TrackComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TrackComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TrackComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/purchase/track/track.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
import * as $ from 'jquery';
import { NgxCarousel } from 'ngx-carousel';
import { Options } from 'ng5-slider';
interface RangeSliderModel {
minValue: number;
maxValue: number;
options: Options;
}
@Component({
selector: 'app-track',
templateUrl: './track.component.html',
styleUrls: ['./track.component.scss']
})
export class TrackComponent implements OnInit {
count:any;
public carouselTile: NgxCarousel;
constructor(
private router : Router,
private route : ActivatedRoute
) {
this.count = 0;
}
add(){
this.count = this.count + 1;
}
minus(){
this.count = this.count - 1;
if(this.count < 0){
this.count = 0;
}
}
verticalSlider2: RangeSliderModel = {
minValue: 50,
maxValue: 100,
options: {
floor: 0,
ceil: 100,
vertical: true
}
};
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
ngOnInit(): void {
this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
this.galleryOptions = [
{
width: '100%',
height: '570px',
thumbnailsColumns: 4,
imageAnimation: NgxGalleryAnimation.Slide
},
// max-width 800
{
breakpoint: 1440,
width: '100%',
height: '400px',
imagePercent: 80,
thumbnailsPercent: 20,
thumbnailsMargin: 20,
thumbnailMargin: 20
},
// max-width 400
{
breakpoint: 400,
preview: false
}
];
this.galleryImages = [
{
small: 'assets/images/tyre_shot1.png',
medium: 'assets/images/tyre_shot1.png',
big: 'assets/images/tyre_shot1.png'
},
{
small: 'assets/images/tyre_shot2.png',
medium: 'assets/images/tyre_shot2.png',
big: 'assets/images/tyre_shot2.png'
},
{
small: 'assets/images/tyre_shot3.png',
medium: 'assets/images/tyre_shot3.png',
big: 'assets/images/tyre_shot3.png'
},
{
small: 'assets/images/tyre_shot4.png',
medium: 'assets/images/tyre_shot4.png',
big: 'assets/images/tyre_shot4.png'
}
];
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
carouselTileLoad(){ return ''; }
}
src/styles.scss
......@@ -41,6 +41,13 @@
// display: none;
// }
button{
cursor: pointer;
&:focus{
outline: none;
}
}
.no-scroll .scroll-content {
overflow: hidden;
}
......@@ -703,6 +710,46 @@ bs-datepicker-container{
}
}
.order_range{
.ng5-slider-selection{
background-color: #2ecc71 !important;
}
.ng5-slider-bubble{
display: none !important;
}
.ng5-slider-bar-wrapper {
top: auto;
left: -5px !important;
}
.ng5-slider-pointer{
background-color: #2ecc71 !important;
height:20px !important;
width:20px !important;
left:-10px!important;
&:focus{
outline: none;
}
&:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 7px !important;
left: 7px !important;
border-radius: 4px;
background-color: #2ecc71 !important;
}
}
.ng5-slider{
}
.ng5-slider-bar {
bottom: 0;
left: auto;
width: 2px !important;
height: 100%;
}
}
.purchase_filter_section{
.ng5-slider{
.ng5-slider-bar{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment