diff --git a/src/app/productbooking/productbooking.page.html b/src/app/productbooking/productbooking.page.html
index cb23685..833bb4b 100644
--- a/src/app/productbooking/productbooking.page.html
+++ b/src/app/productbooking/productbooking.page.html
@@ -1,9 +1,14 @@
<ion-header>
- <ion-toolbar>
- <ion-title>productbooking</ion-title>
- </ion-toolbar>
-</ion-header>
+ <div class="app_header">
+ <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+ </button>
+ <div class="nav_title floatLeft"><h4>Product booking</h4></div>
+ <button class="nav_btn nav_btn_text floatRight">
+ </button>
+ <div class="clear"></div>
+ </div>
+</ion-header>
<ion-content>
</ion-content>
diff --git a/src/app/productbooking/productbooking.page.ts b/src/app/productbooking/productbooking.page.ts
index 259dbc6..0357129 100644
--- a/src/app/productbooking/productbooking.page.ts
+++ b/src/app/productbooking/productbooking.page.ts
@@ -1,4 +1,7 @@
import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-productbooking',
@@ -7,9 +10,22 @@ import { Component, OnInit } from '@angular/core';
})
export class ProductbookingPage implements OnInit {
- constructor() { }
+ constructor(
+ private router: Router,
+ private route: ActivatedRoute,
+ private location: Location
+ ) { }
ngOnInit() {
}
+ goToPage(path,data=null){
+ this.router.navigateByUrl(path,{queryParams:data});
+ document.body.scrollTop = document.documentElement.scrollTop = 0;
+ }
+
+ goBack() {
+ this.location.back();
+ }
+
}
diff --git a/src/app/purchaseparts/purchaseparts.page.html b/src/app/purchaseparts/purchaseparts.page.html
index e563e0f..28d8701 100644
--- a/src/app/purchaseparts/purchaseparts.page.html
+++ b/src/app/purchaseparts/purchaseparts.page.html
@@ -21,44 +21,130 @@
<div class="clear"></div>
</div>
<div class="product_section">
- <ion-row>
- <ion-col col-4>
- <div class="product_div">
- <div class="rating">3.1</div>
- <div class="product_img">
- <img src="../../assets/img/asset_dummy_item1.png">
+ <ion-slides pager="false" [options]="slideOpts">
+ <ion-slide>
+ <div class="product_outter">
+ <div class="product_div">
+ <div class="rating">3.1</div>
+ <div class="product_img">
+ <img src="../../assets/img/asset_dummy_item1.png">
+ </div>
+ </div>
+ <h4>PM 237</h4>
+ <hr>
</div>
- </div>
- <h4>PM 237</h4>
- <hr>
- </ion-col>
- <ion-col col-4>
- <div class="product_div">
- <div class="rating">3.1</div>
- <div class="product_img">
- <img src="../../assets/img/asset_dummy_item2.png">
+ </ion-slide>
+ <ion-slide>
+ <div class="product_outter">
+ <div class="product_div">
+ <div class="rating">3.1</div>
+ <div class="product_img">
+ <img src="../../assets/img/asset_dummy_item2.png">
+ </div>
+ </div>
+ <h4>Mega 3inch Band</h4>
+ <hr>
+ </div>
+ </ion-slide>
+ <ion-slide>
+ <div class="product_outter">
+ <div class="product_div">
+ <div class="rating">3.1</div>
+ <div class="product_img">
+ <img src="../../assets/img/asset_dummy_item3.png">
+ </div>
+ </div>
+ <h4>PM 237</h4>
+ <hr>
+ </div>
+ </ion-slide>
+ <ion-slide>
+ <div class="product_outter">
+ <div class="product_div">
+ <div class="rating">3.1</div>
+ <div class="product_img">
+ <img src="../../assets/img/asset_dummy_item1.png">
+ </div>
+ </div>
+ <h4>PM 237</h4>
+ <hr>
+ </div>
+ </ion-slide>
+ <ion-slide>
+ <div class="product_outter">
+ <div class="product_div">
+ <div class="rating">3.1</div>
+ <div class="product_img">
+ <img src="../../assets/img/asset_dummy_item2.png">
+ </div>
</div>
- </div>
- <h4>Mega 3inch Band</h4>
- <hr>
- </ion-col>
- <ion-col col-4>
- <div class="product_div">
- <div class="rating">3.1</div>
- <div class="product_img">
- <img src="../../assets/img/asset_dummy_item3.png">
+ <h4>Mega 3inch Band</h4>
+ <hr>
</div>
- </div>
- <h4>PM 237</h4>
- <hr>
- </ion-col>
- </ion-row>
+ </ion-slide>
+ <ion-slide>
+ <div class="product_outter">
+ <div class="product_div">
+ <div class="rating">3.1</div>
+ <div class="product_img">
+ <img src="../../assets/img/asset_dummy_item3.png">
+ </div>
+ </div>
+ <h4>PM 237</h4>
+ <hr>
+ </div>
+ </ion-slide>
+ </ion-slides>
</div>
<div class="header_submenu">
<h4>People most purchased</h4>
<button class="more_btn">More</button>
<div class="clear"></div>
</div>
+ <div class="product_list_bay">
+ <ul>
+ <li (click)="goToPage('productbooking')">
+ <div class="badge premium_badge">Premium</div>
+ <img src="../../assets/img/asset_dummy_item1.png">
+ <h4>PM 237</h4>
+ <p>Lorem ipsum</p>
+ <div class="rating">3.1</div>
+ <hr>
+ </li>
+ <li (click)="goToPage('productbooking')">
+ <div class="badge bestseller_badge">Best Seller</div>
+ <img src="../../assets/img/asset_dummy_item2.png">
+ <h4>PM 237</h4>
+ <p>Lorem ipsum</p>
+ <div class="rating">3.0</div>
+ <hr>
+ </li>
+ <li (click)="goToPage('productbooking')">
+ <div class="badge on_offer">On Offer</div>
+ <img src="../../assets/img/asset_dummy_item3.png">
+ <h4>PM 237</h4>
+ <p>Lorem ipsum</p>
+ <div class="rating">3.7</div>
+ <hr>
+ </li>
+ <li (click)="goToPage('productbooking')">
+ <img src="../../assets/img/asset_dummy_item1.png">
+ <h4>PM 237</h4>
+ <p>Lorem ipsum</p>
+ <div class="rating">2.8</div>
+ <hr>
+ </li>
+ <li (click)="goToPage('productbooking')">
+ <img src="../../assets/img/asset_dummy_item2.png">
+ <h4>PM 237</h4>
+ <p>Lorem ipsum</p>
+ <div class="rating">3.5</div>
+ <hr>
+ </li>
+ </ul>
+ </div>
</div>
+
+
</ion-content>
\ No newline at end of file
diff --git a/src/app/purchaseparts/purchaseparts.page.scss b/src/app/purchaseparts/purchaseparts.page.scss
index bb5b52f..35bbe5b 100644
--- a/src/app/purchaseparts/purchaseparts.page.scss
+++ b/src/app/purchaseparts/purchaseparts.page.scss
@@ -55,6 +55,12 @@
}
.product_section{
padding: 10px;
+ ion-slides{
+ .product_outter{
+ min-width: 100%;
+ padding: 5px;
+ }
+ }
.product_div{
background: #f6f5fa;
text-align: center;
@@ -85,6 +91,7 @@
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
+ text-align: left;
}
hr{
border:2px solid #fbd339;
@@ -121,4 +128,90 @@
}
}
}
+ .product_list_bay{
+ ul{
+ margin:0px;
+ padding:10px;
+ li{
+ list-style: none;
+ width:47.5%;
+ position: relative;
+ padding-top:20px;
+ padding-left: 8px;
+ padding-right: 8px;
+ text-align: center;
+ margin:4px;
+ max-height: 220px;
+ background: #ffffff;
+ display: inline-block;
+ border-radius: 10px;
+ -webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.3);
+ -moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.3);
+ box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.3);
+ img{
+ height: 130px;
+ width: auto;
+ }
+ h4{
+ color: #282438;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 16px;
+ text-align: left;
+ margin-top: 0px;
+ margin-bottom: 1px;
+ }
+ p{
+ margin: 0px;
+ color: #9e97ba;
+ text-align: left;
+ font-size:10px;
+ }
+ hr{
+ border:2px solid #fbd339;
+ width:30px;
+ border-radius: 20px;
+ height:0px;
+ margin-left:0px;
+ }
+
+ .rating{
+ background-color: rgba(255, 255, 255, 0.9);
+ background-image: url("../../assets/img/asset_star.png");
+ position: absolute;
+ bottom: 25px;
+ right: 10px;
+ padding-left: 25px;
+ background-size: 12px;
+ background-repeat: no-repeat;
+ background-position: center left 6px;
+ padding-right: 10px;
+ border-radius: 15px;
+ }
+
+ .badge{
+ position: absolute;
+ top:0px;
+ right:0px;
+ height: 23px;
+ border-radius: 0px;
+ font-size: 14px;
+ padding: 3px;
+ padding-left: 10px;
+ padding-right: 10px;
+ border-top-right-radius: 10px;
+ }
+ .premium_badge{
+ }
+ .bestseller_badge{
+ background-color: #fbd339;
+ }
+ .on_offer{
+ background-color: #7baf38;
+ color: #fff;
+ }
+ }
+ }
+ }
}
diff --git a/src/app/purchaseparts/purchaseparts.page.ts b/src/app/purchaseparts/purchaseparts.page.ts
index 1c1a4b7..aa47734 100644
--- a/src/app/purchaseparts/purchaseparts.page.ts
+++ b/src/app/purchaseparts/purchaseparts.page.ts
@@ -10,6 +10,12 @@ import { Router,ActivatedRoute } from '@angular/router';
})
export class PurchasepartsPage implements OnInit {
+ slideOpts = {
+ initialSlide: 1,
+ speed: 400,
+ slidesPerView:3
+ };
+
constructor(
private router: Router,
private route: ActivatedRoute,