Skip to content

G
getme
Commit 9c9be920 by amalk
Options

20-08-2019 sprint one

parent f05bbb2e
Showing with 2141 additions and 124 deletions
config.xml
......@@ -100,4 +100,8 @@
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<engine name="android" spec="7.1.4" />
<plugin name="cordova-plugin-geolocation" spec="4.0.2">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate you" />
</plugin>
<plugin name="cordova-plugin-nativegeocoder" spec="3.2.2" />
</widget>
package-lock.json
......@@ -4,6 +4,11 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@agm/core": {
"version": "1.0.0-beta.7",
"resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.7.tgz",
"integrity": "sha512-NXJqB2wCahWGSqvQazLHbVrg3Dhg5zTdhG9yP7EVVGfIft5lbY83KLVpbYFeVI/l+ggeJWAC9nVUr7CeDS96uQ=="
},
"@angular-devkit/architect": {
"version": "0.801.3",
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.801.3.tgz",
......@@ -599,14 +604,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -625,7 +628,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -805,8 +807,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -912,8 +913,7 @@
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -1248,6 +1248,22 @@
"@types/cordova": "^0.0.34"
}
},
"@ionic-native/geolocation": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@ionic-native/geolocation/-/geolocation-5.0.0.tgz",
"integrity": "sha512-gU3GNCEJgh+2KpK0Tg9l85HDMRkUWO9FAszF4UDnqAUihTQGCM0Nl+hpmEQowkM9+Him8FJ83rT82pPmnGERCA==",
"requires": {
"@types/cordova": "^0.0.34"
}
},
"@ionic-native/native-geocoder": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@ionic-native/native-geocoder/-/native-geocoder-5.0.0.tgz",
"integrity": "sha512-bL9foHNMhRHGP0oiH9jVwVhSpuGXwUdGI6in3ZDOL7QMXOHOhogua4PCpPlHMkk6w7U8ZTITp6eu/4xcZ9pUQA==",
"requires": {
"@types/cordova": "^0.0.34"
}
},
"@ionic-native/splash-screen": {
"version": "5.11.0",
"resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.11.0.tgz",
......@@ -3283,6 +3299,11 @@
"resolved": "https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-2.0.2.tgz",
"integrity": "sha1-/Ajzci5n7ve2xnv8mag99q3Quro="
},
"cordova-plugin-geolocation": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/cordova-plugin-geolocation/-/cordova-plugin-geolocation-4.0.2.tgz",
"integrity": "sha512-QGThnPKzPxESHkruZlpE0+5aFBVOet8al0vIJ7laSUOQHIC1dd/JY6peVIbtLboKi5Dap1wCKRubOqPqH8xcQA=="
},
"cordova-plugin-ionic-keyboard": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/cordova-plugin-ionic-keyboard/-/cordova-plugin-ionic-keyboard-2.1.3.tgz",
......@@ -3293,6 +3314,11 @@
"resolved": "https://registry.npmjs.org/cordova-plugin-ionic-webview/-/cordova-plugin-ionic-webview-4.1.1.tgz",
"integrity": "sha512-y8drBhMdkHKUr0zu+UGkFGsDrkCsxjbCd3RzzlyDxcEzdHWvasRM5gyDiKBHkziT2iHYzEAjXwkT1ZXKU3OY9Q=="
},
"cordova-plugin-nativegeocoder": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/cordova-plugin-nativegeocoder/-/cordova-plugin-nativegeocoder-3.2.2.tgz",
"integrity": "sha512-3ZmfA01H6EYPsfUqv3DHPvWgn2yBVtqCbTe8CAMalT3qlFZBOUBdJemydSmgKNRhTgQvHSFc20jUJXiH67vt4w=="
},
"cordova-plugin-splashscreen": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-5.0.2.tgz",
......@@ -6003,8 +6029,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
......@@ -6047,8 +6072,7 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
......@@ -6059,8 +6083,7 @@
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -6177,8 +6200,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -6190,7 +6212,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -6220,7 +6241,6 @@
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -6239,7 +6259,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -6320,8 +6339,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -6333,7 +6351,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -6419,8 +6436,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -6456,7 +6472,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -6476,7 +6491,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -6520,14 +6534,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -11509,8 +11521,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
......@@ -11538,7 +11549,6 @@
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -11553,8 +11563,7 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
......@@ -11565,8 +11574,7 @@
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -11683,8 +11691,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -11696,7 +11703,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -11711,7 +11717,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -11719,14 +11724,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -11745,7 +11748,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -11826,8 +11828,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -11839,7 +11840,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -11925,8 +11925,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -11962,7 +11961,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -11982,7 +11980,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -12026,14 +12023,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
......
package.json
......@@ -13,6 +13,7 @@
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.7",
"@angular/animations": "^8.2.2",
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
......@@ -22,13 +23,17 @@
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/geolocation": "^5.0.0",
"@ionic-native/native-geocoder": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"cordova-android": "7.1.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-geolocation": "4.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.1",
"cordova-plugin-nativegeocoder": "3.2.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
......@@ -73,10 +78,14 @@
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
},
"cordova-plugin-nativegeocoder": {}
},
"platforms": [
"android"
]
}
}
\ No newline at end of file
}
src/app/app-routing.module.ts
......@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '', loadChildren: './landing/landing.module#LandingPageModule'
},
{
path: '', loadChildren: './landing/landing.module#LandingPageModule'
},
{ path: 'tabs',loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
......@@ -24,7 +24,8 @@ const routes: Routes = [
{ path: 'productlist', loadChildren: './productlist/productlist.module#ProductlistPageModule' },
{ path: 'productdetail', loadChildren: './productdetail/productdetail.module#ProductdetailPageModule' },
{ path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' },
{ path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' }
{ path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' },
{ path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' }
];
@NgModule({
......
src/app/app.module.ts
......@@ -10,10 +10,19 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule],
imports: [BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
BrowserAnimationsModule,
],
providers: [
StatusBar,
SplashScreen,
......
src/app/cart/cart.page.html
<ion-header>
<ion-toolbar>
<ion-title>cart</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
<div class="cart_wrapper">
<div class="cart_head">
<div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
<h4>CART</h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
<div class="cart_menu_header">
<ul>
<li class="textCenter active" [class.active]="currentIndex == 0">CART</li>
<li class="textCenter">
<hr>
</li>
<li class="textCenter" [class.active]="currentIndex == 1">CHECKOUT</li>
<li class="textCenter">
<hr>
</li>
<li class="textCenter" [class.active]="currentIndex == 2">FINISH</li>
</ul>
</div>
<div class="cart_content">
<ion-slides pager="false" [options]="cart_wizard" (ionSlideDidChange)="slideChanged()">
<ion-slide>
<div class="cart_list">
<ul>
<li>
<div class="close"></div>
<div class="cart_image"></div>
<div class="cart_detail">
<h4>European Style V neck</h4>
<h4>Green, Red</h4>
<h5>AU$99.00</h5>
</div>
<div class="cart_count">
<div class="add" (click)="addCount()">+</div>
<div class="count">{{count}}</div>
<div class="remove" (click)="removeCount()">-</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="close"></div>
<div class="cart_image"></div>
<div class="cart_detail">
<h4>European Style V neck</h4>
<h4>Green, Red</h4>
<h5>AU$99.00</h5>
</div>
<div class="cart_count">
<div class="add" (click)="addCount()">+</div>
<div class="count">{{count}}</div>
<div class="remove" (click)="removeCount()">-</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="close"></div>
<div class="cart_image"></div>
<div class="cart_detail">
<h4>European Style V neck</h4>
<h4>Green, Red</h4>
<h5>AU$99.00</h5>
</div>
<div class="cart_count">
<div class="add" (click)="addCount()">+</div>
<div class="count">{{count}}</div>
<div class="remove" (click)="removeCount()">-</div>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="total_div">
<ion-row>
<ion-col>
<p class="textLeft">Total Price:</p>
</ion-col>
<ion-col>
<p class="textRight">AU$ 239.00</p>
</ion-col>
</ion-row>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="checkout_list">
<h5>
<span class="floatLeft">ITEMS</span>
<span class="floatRight">AU$239.00</span>
<div class="clear"></div>
</h5>
<ion-grid class="p0">
<ion-row>
<ion-col size="6" class="p0">
<h6 class="textLeft">European Style V Neck</h6>
</ion-col>
<ion-col size="2" class="p0">
<h6 class="textRight"><strong>1 X</strong></h6>
</ion-col>
<ion-col size="4" class="p0">
<h6 class="textRight"><strong>AU$99.00</strong></h6>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6" class="p0">
<h6 class="textLeft">Simple Night Wear black doted</h6>
</ion-col>
<ion-col size="2" class="p0">
<h6 class="textRight"><strong>3 X</strong></h6>
</ion-col>
<ion-col size="4" class="p0">
<h6 class="textRight"><strong>AU$60.00</strong></h6>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6" class="p0">
<h6 class="textLeft">European Style V Neck</h6>
</ion-col>
<ion-col size="2" class="p0">
<h6 class="textRight"><strong>3 X</strong></h6>
</ion-col>
<ion-col size="4" class="p0">
<h6 class="textRight"><strong>AU$90.00</strong></h6>
</ion-col>
</ion-row>
</ion-grid>
<hr>
<h5>
<span class="floatLeft">DELIVERY</span>
<span class="floatRight">EDIT</span>
<div class="clear"></div>
</h5>
<ion-grid class="p0">
<ion-row>
<ion-col class="p0">
<h6>
Shamjith KS<br> +00 0000 888 888<br> Carnival Infopark Infopark Kochi<br> 682030, Kerala, India
</h6>
</ion-col>
</ion-row>
</ion-grid>
<hr>
<h5>
<span class="floatLeft">PAYMENT</span>
<span class="floatRight">CHANGE</span>
<div class="clear"></div>
</h5>
<div class="card_div">
<input class="card_no" placeholder="**** **** **** 1458">
<input class="cv_number" placeholder="CVV">
</div>
<div class="after_pay">
<input class="" placeholder="After Pay">
</div>
<div class="delivery_time">
<ul>
<li>
Delivery 10 Mnt<br>
<strong>AU$10</strong>
</li>
<li>
Delivery 1 Hr<br>
<strong>FREE</strong>
</li>
</ul>
</div>
<hr>
<div class="coupon_code">
<input class="" placeholder="COUPON CODE"><button class="add_btn">ADD</button>
</div>
<div class="total_div">
<ion-row>
<ion-col>
<p class="textLeft">Total Price:</p>
</ion-col>
<ion-col>
<p class="textRight">AU$ 239.00</p>
</ion-col>
</ion-row>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="order_placed_div">
<img src="../../assets/[email protected]">
<h4>Order Placed</h4>
<p>June 26th 2019, 03:00 PM</p>
<h3>The product will be delivered in</h3>
<h1>10:00 Mins</h1>
<button class="view_order" (click)="goToPage('myorder')">VIEW ORDERS</button><br>
<button class="home_btn" (click)="goToPage('home')">HOME</button>
</div>
</ion-slide>
</ion-slides>
</div>
</div>
<div class="footer_btn" [hidden]="currentIndex != 0" (click)="next()">
CHECKOUT
</div>
<div class="footer_btn" [hidden]="currentIndex != 1" (click)="next()">
PAY
</div>
<div class="footer_btn" [hidden]="currentIndex != 2" (click)="goToPage('orderplaced')">
FINISH
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/cart/cart.page.scss
.cart_wrapper {
width: 100%;
.cart_head {
width: 100%;
height: 220px;
background-image: url("../../assets/[email protected]");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
.nav_header {
.nav_title {
h4 {
color: #FFF;
}
}
}
.cart_menu_header {
padding: 20px;
ul {
margin: 0px;
padding: 10px;
background-color: rgba(273, 273, 273, 0.1);
border-radius: 10px;
li {
list-style: none;
color: rgba(176, 174, 199, 1);
width: 20%;
display: inline-block;
font-weight: 700;
hr {
height: 0px;
border-top: none;
width: 90%;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
margin: 0 auto;
border-bottom: 2px dashed rgba(176, 174, 199, 1);
bottom: 4px;
}
}
.active {
color: #FFF;
}
}
}
.cart_content {
width: calc(100% - 40px);
margin: 0 auto;
height: 500px;
border-radius: 10px;
background-color: #fff;
.checkout_list {
width: 100%;
padding: 15px;
height: calc(100vh - 180px);
overflow: scroll;
h5 {
color: rgba(59, 57, 77, 1);
margin: 0px;
padding: 0px;
font-weight: bolder;
font-size: 18px;
padding-bottom: 15px;
padding-top: 10px;
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
strong {
color: rgba(59, 57, 77, 1);
font-weight: 400;
}
}
ion-row {
padding-bottom: 10px;
}
hr {
border-top: none;
height: 0px;
border-bottom: 1px solid rgba(176, 174, 199, 1);
}
.card_div {
border: 1px solid rgba(176, 174, 199, 1);
height: 50px;
border-radius: 5px;
input {
border: none;
height: 100%;
background-color: transparent;
}
.card_no {
width: calc(100% - 80px);
height: 100%;
padding-left: 20px;
border-right: 1px solid rgba(176, 174, 199, 1);
}
.cv_number {
width: 80px;
height: 100%;
text-align: center;
}
}
.after_pay {
height: 50px;
border-bottom: 1px solid rgba(176, 174, 199, 1);
input {
width: 100%;
height: 100%;
padding-left: 20px;
border: none;
}
}
.delivery_time {
width: 100%;
padding-top: 50px;
padding-bottom: 20px;
ul {
margin: 0px;
padding: 0px;
text-align: left;
li {
padding: 0px;
list-style: none;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-align: center;
border: 1px solid rgba(176, 174, 199, 1);
border-radius: 4px;
padding: 5px;
strong {
color: rgba(59, 57, 77, 1);
}
}
}
}
.coupon_code {
padding-top: 20px;
padding-bottom: 50px;
border-bottom: 1px solid rgba(176, 174, 199, 1);
input {
width: calc(100% - 50px);
border: 1px solid rgba(176, 174, 199, 1);
border-radius: 20px;
height: 35px;
padding-left: 20px;
font-weight: 900;
color: rgba(215, 213, 228, 1);
&::placeholder {
color: rgba(215, 213, 228, 1);
outline: none;
}
}
.add_btn {
color: #29285b;
width: 50px;
height: 35px;
background: transparent;
font-size: 17px;
font-weight: bolder;
}
}
.total_div {
p {
margin: 0px;
padding: 0px;
color: rgba(41, 40, 91, 1);
font-weight: bolder;
}
}
}
.cart_list {
width: 100%;
ul {
margin: 0px;
padding: 10px;
width: 100%;
li {
list-style: none;
width: 100%;
padding-right: 10px;
position: relative;
padding-left: 25px;
border-bottom: 1px solid rgba(215, 213, 228, 1);
padding-bottom: 20px;
padding-top: 20px;
.close {
background-image: url("../../assets/close.png");
width: 15px;
height: 15px;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 55px;
left: 0px;
background-size: cover;
}
.cart_image {
width: 90px;
height: 90px;
background-color: #a8a8a8;
border-radius: 8px;
float: left;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.cart_detail {
float: left;
width: calc(100% - 120px);
padding-left: 15px;
padding-top: 5px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
text-align: left;
font-size: 16px;
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
text-align: left;
font-weight: bolder;
font-size: 20px;
padding-top: 10px;
}
}
.cart_count {
width: 30px;
float: left;
height: 90px;
padding-top: 35px;
padding-bottom: 35px;
border: 1px solid rgba(215, 213, 228, 1);
border-radius: 20px;
color: rgba(215, 213, 228, 1);
font-size: 20px;
position: relative;
.add {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
}
.remove {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
.count {
color: rgba(41, 40, 91, 1);
font-size: 16px;
font-weight: 900;
}
}
}
}
.total_div {
p {
margin: 0px;
padding: 0px;
color: rgba(41, 40, 91, 1);
font-weight: bolder;
}
}
}
.order_placed_div {
width: 100%;
padding: 10px;
padding-top: 30px;
img {
width: 80px;
}
h4 {
color: #29285b;
font-weight: bolder;
margin-bottom: 5px;
}
p {
color: #29285b;
margin: 0px;
padding: 0px;
font-size: 14px;
}
h3 {
color: rgba(176, 174, 199, 1);
font-size: 18px;
padding-top: 20px;
}
h1 {
color: rgba(59, 57, 77, 1);
font-weight: bolder;
font-size: 35px;
margin: 0px;
}
.view_order {
height: 45px;
border-radius: 10px;
padding-left: 20px;
padding-right: 20px;
background-color: #29285b;
color: #FFF;
margin-top: 30px;
font-size: 18px;
font-weight: 400;
}
.home_btn {
height: 45px;
color: #29285b;
background-color: transparent;
padding-left: 20px;
padding-right: 20px;
margin-top: 30px;
font-size: 18px;
font-weight: 900;
}
}
}
}
.footer_btn {
width: 100%;
position: fixed;
bottom: 0px;
z-index: 999;
left: 0px;
right: 0px;
background-color: rgba(41, 40, 91, 1);
text-align: center;
color: #fff;
font-size: 18px;
padding: 10px;
font-weight: 300;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
}
\ No newline at end of file
src/app/cart/cart.page.ts
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-cart',
......@@ -7,9 +11,66 @@ import { Component, OnInit } from '@angular/core';
})
export class CartPage implements OnInit {
constructor() { }
@ViewChild(IonSlides, { static: false }) slides: IonSlides;
currentIndex: any;
count:any;
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) {
this.currentIndex = 0;
this.count = 0;
}
ngOnInit() {
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
cart_wizard = {
initialSlide: 0,
speed: 1000,
allowTouchMove: false
};
next() {
this.slides.slideNext();
}
prev() {
this.slides.slidePrev();
}
addCount(){
this.count = this.count+1
}
removeCount() {
this.count = this.count - 1;
if(this.count <0){
this.count = 0;
}
}
slideChanged() {
this.slides.getActiveIndex().then(index => {
this.currentIndex = index;
console.log(this.currentIndex);
});
}
}
src/app/home/home.page.html
......@@ -16,7 +16,7 @@
<img src="../../assets/Group 11_2.png">
</ion-col>
<ion-col class="textRight">
<p class="floatRight">Territory Queens</p>
<p class="floatRight" (click)="istoggle()">Territory Queens</p>
</ion-col>
</ion-row>
</div>
......@@ -182,4 +182,11 @@
</ul>
</div>
</div>
<div class="sort_wrappper" *ngIf="isShow" [@slideInOut] (click)="istoggle()">
<div class="sort_inner">
<input class="search_box" placeholder="Enter your location">
<button class="search_btn" (click)="istoggle()">Search</button>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/home/home.page.scss
......@@ -216,4 +216,130 @@
}
}
}
}
.sort_wrappper {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.sort_inner {
margin: 0 auto;
width: 90%;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #fff;
position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 25%;
border-radius: 0px;
h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
margin-bottom: 30px;
}
.search_box {
width: calc(100% - 100px);
height: 45px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.search_btn {
width: 100px;
height: 45px;
background-color: rgba(41, 40, 91, 1);
border: none;
color: #fff;
font-size: 16px;
}
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-top: 10px;
padding-bottom: 10px;
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 5px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 6px;
top: 10px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
}
.sort_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
}
.submit {
background-color: rgba(41, 40, 91, 1);
}
.cancel {
background-color: rgba(215, 213, 228, 1);
}
}
}
}
\ No newline at end of file
src/app/home/home.page.ts
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-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({ transform: 'translateY(100%)' }),
animate('200ms ease-in', style({ transform: 'translateY(0%)' }))
]),
transition(':leave', [
animate('200ms ease-out', style({ transform: 'translateY(100%)' }))
])
])
]
})
export class HomePage implements OnInit {
isShow = false;
slideOpts = {
slidesPerView:1.5
}
......@@ -29,5 +43,9 @@ export class HomePage implements OnInit {
this.location.back();
}
istoggle() {
this.isShow = !this.isShow;
}
}
src/app/landing/landing.page.ts
......@@ -23,7 +23,8 @@ export class LandingPage implements OnInit {
slideOpts = {
initialSlide: 0,
speed: 1000
speed: 1000,
allowTouchMove: false
};
......
src/app/login/login.page.ts
......@@ -20,4 +20,5 @@ export class LoginPage implements OnInit {
}
}
src/app/myorder/myorder.page.html
<ion-header>
<ion-toolbar>
<ion-title>myorder</ion-title>
</ion-toolbar>
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
<h4>MY ORDERS</h4>
</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="myorder_wrapper">
<ul>
<li>
<div class="order_image"></div>
<div class="order_detail">
<h5 class="floatLeft">European Style V Neck</h5>
<div class="clear"></div>
<h5>Green, Small <span>3</span></h5>
<p>AU$99.00</p>
</div>
<div class="order_other">
<h6 class="floatRight">June 26th 2019</h6>
<div class="clear"></div>
<button class="track_btn" (click)=" goToPage('trackorder')">TRACK</button>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="order_image"></div>
<div class="order_detail">
<h5 class="floatLeft">European Style V Neck</h5>
<div class="clear"></div>
<h5>Green, Small <span>3</span></h5>
<p>AU$99.00</p>
</div>
<div class="order_other">
<h6 class="floatRight">June 26th 2019</h6>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="order_image"></div>
<div class="order_detail">
<h5 class="floatLeft">European Style V Neck</h5>
<div class="clear"></div>
<h5>Green, Small <span>3</span></h5>
<p>AU$99.00</p>
</div>
<div class="order_other">
<h6 class="floatRight">June 26th 2019</h6>
<div class="clear"></div>
</ion-content>
</div>
<div class="clear"></div>
</li>
<li>
<div class="order_image"></div>
<div class="order_detail">
<h5 class="floatLeft">European Style V Neck</h5>
<div class="clear"></div>
<h5>Green, Small <span>3</span></h5>
<p>AU$99.00</p>
</div>
<div class="order_other">
<h6 class="floatRight">June 26th 2019</h6>
<div class="clear"></div>
<h5 class="floatRight">Cancelled</h5>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
\ No newline at end of file
src/app/myorder/myorder.page.scss
.myorder_wrapper {
ul {
margin: 0px;
padding: 10px;
li {
list-style: none;
padding: 10px;
padding-bottom: 15px;
.order_image {
width: 90px;
height: 90px;
float: left;
border-radius: 8px;
background-color: #a8a8a8;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.order_detail {
width: calc(100% - 190px);
float: left;
padding-left: 20px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 16px;
padding-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
span {
color: #29285b;
}
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
padding-top: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-top: 10px;
font-size: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.order_other {
width: 100px;
float: right;
h6 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
padding-top: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 10px;
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(206, 153, 76, 1);
font-size: 16px;
font-weight: bold;
}
.track_btn {
background: #29285b;
color: #FFF;
float: right;
padding: 12px;
font-size: 18px;
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
}
}
}
}
}
\ No newline at end of file
src/app/myorder/myorder.page.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-myorder',
......@@ -7,9 +9,22 @@ import { Component, OnInit } from '@angular/core';
})
export class MyorderPage 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();
}
}
src/app/ordercancelled/ordercancelled.page.html
<ion-header>
<ion-toolbar>
<ion-title>ordercancelled</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="cart_wrapper">
<div class="cart_head">
<div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
<h4></h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
<img src="../../assets/[email protected]">
<h4>ORDER CANCELLED</h4>
<p>June 26th 2019, 03:00 PM</p>
</div>
<div class="nearby_shop_list">
<ul>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img src="../../assets/[email protected]">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="product_detail">
<h6>Green, Small</h6>
<h5>Quantity : <span>3</span></h5>
<h5>Amount : <strong>AU$99.00</strong></h5>
<h5>Delivery time : <span>Delivery in 1 hour</span></h5>
<h4>DELIVERY</h4>
<h5>
Shamjith KS<br> +00 0000 888 888<br> Carnival Infopark Infopark Kochi<br> 682030, Kerala, India
</h5>
<button class="cancel_btn" (click)="goToPage('productdetail')">BUY NOW</button>
<hr>
</div>
</ion-content>
<div class="related_product_slider">
<h5>
<span class="floatLeft">Related Products</span><span class="floatRight">MORE</span>
<div class="clear"></div>
</h5>
<ul>
<ion-slides pager="false" [options]="relatedProd">
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00 <span class="offer">-8%</span></p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
<div class="featured_badge">Featured</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00<span>AU$110.00</span></p>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/ordercancelled/ordercancelled.page.scss
.cart_wrapper {
width: 100%;
.cart_head {
width: 100%;
height: 240px;
text-align: center;
background-image: url("../../assets/Group [email protected]");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
.nav_header {
.nav_title {
h4 {
color: #FFF;
}
}
}
img {
width: 70px;
}
h4 {
color: #fff;
font-weight: bolder;
margin-bottom: 5px;
text-align: center;
}
p {
color: rgba(215, 213, 228, 1);
margin: 0px;
padding: 0px;
font-size: 14px;
text-align: center;
}
}
.order_status {
width: 100%;
padding: 20px;
.track_btn {
border-radius: 5px;
height: 40px;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
}
.status_div {
margin-bottom: 10px;
margin-top: 10px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
}
.go_green {
h4 {
color: rgba(53, 203, 171, 1);
}
}
.go_green.status_gap {
border-left: 2px dashed rgba(53, 203, 171, 1);
}
.status_gap {
border-left: 2px dashed rgba(215, 213, 228, 1);
height: 30px;
}
}
.nearby_shop_list {
padding-top: 40px;
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 120px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
}
}
}
}
}
.product_detail {
padding: 10px;
hr {
border-bottom: 1px solid rgba(176, 174, 199);
height: 0px;
border-top: none;
}
h6 {
margin: 0px;
padding: 0px;
color: #29285b;
font-size: 18px;
padding-bottom: 15px;
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
line-height: 25px;
padding-bottom: 15px;
strong {
color: rgba(41, 40, 91, 1);
}
span {
color: rgba(41, 40, 91, 1);
}
.afterpay {
color: rgba(206, 153, 76, 1);
padding-left: 10px;
}
}
h4 {
color: rgba(41, 40, 91, 1);
margin: 0px;
font-weight: 900;
font-size: 18px;
padding-top: 20px;
padding-bottom: 10px;
}
.cancel_btn {
border-radius: 8px;
height: 45px;
width: 100%;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
}
.related_product_slider {
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 10px;
font-weight: 900;
font-size: 18px;
}
p {
color: rgba(59, 57, 77, 1);
padding: 10px;
text-align: justify;
margin: 0px;
font-size: 18px;
}
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: 100%;
display: inline-block;
border-top: none;
border-bottom: none;
margin-bottom: 10px;
.product_image {
height: 235px;
position: relative;
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
.fav_icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url("../../assets/Group32_2.png");
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 5px;
padding-bottom: 5px;
font-weight: 500;
text-align: left;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
text-align: left;
span {
text-decoration: line-through;
margin-left: 10px;
color: rgba(215, 213, 228, 1)
}
.offer {
color: #fff;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
}
}
}
}
}
\ No newline at end of file
src/app/ordercancelled/ordercancelled.page.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-ordercancelled',
......@@ -7,9 +9,26 @@ import { Component, OnInit } from '@angular/core';
})
export class OrdercancelledPage implements OnInit {
constructor() { }
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
relatedProd = {
slidesPerView: 2
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/app/orderplaced/orderplaced.page.html
<ion-header>
<ion-toolbar>
<ion-title>orderplaced</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="cart_wrapper">
<div class="cart_head">
<div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
<h4></h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
<img src="../../assets/white_tick.png">
<h4>ORDER IS PLACED</h4>
<p>June 26th 2019, 03:00 PM</p>
</div>
<div class="order_status">
<div class="clear"></div>
<div class="status_div go_green">
<h4>Order Placed</h4>
<h6>June 26th 2019, 03:00PM</h6>
</div>
<div class="status_gap go_green">
</div>
<div class="status_div go_green">
<h4>Retailer Accepted</h4>
<h6>June 26th 2019, 03:05PM</h6>
</div>
<div class="status_gap go_green">
</div>
<div class="status_div go_green">
<div class="floatLeft">
<h4>Product Packed</h4>
<h6>June 26th 2019, 03:10PM</h6>
</div>
<button class="track_btn floatRight" (click)="goToPage('trackorder')">Track Order</button>
<div class="clear"></div>
</div>
<div class="status_gap go_green">
</div>
<div class="status_div go_green">
<h4>Rider is assigned to shop</h4>
<h6>June 26th 2019, 03:12PM</h6>
</div>
<div class="status_gap go_green">
</div>
<div class="status_div go_green">
<h4>Rider has picked up your product and on the way</h4>
<h6>June 26th 2019, 03:15PM</h6>
</div>
<div class="status_gap">
</div>
<div class="status_div">
<h4>Your product is delivered</h4>
</div>
</div>
<div class="nearby_shop_list">
<ul>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img src="../../assets/[email protected]">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="product_detail">
<h6>Green, Small</h6>
<h5>Quantity : <span>3</span></h5>
<h5>Amount : <strong>AU$99.00</strong><span class="afterpay">After Pay</span></h5>
<h5>Delivery time : <span>Delivery in 1 hour</span></h5>
<h4>DELIVERY</h4>
<h5>
Shamjith KS<br> +00 0000 888 888<br> Carnival Infopark Infopark Kochi<br> 682030, Kerala, India
</h5>
<button class="cancel_btn" (click)="goToPage('ordercancelled')">CANCEL THIS ORDER</button>
<hr>
</div>
</ion-content>
<div class="related_product_slider">
<h5>
<span class="floatLeft">Related Products</span><span class="floatRight">MORE</span>
<div class="clear"></div>
</h5>
<ul>
<ion-slides pager="false" [options]="relatedProd">
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00 <span class="offer">-8%</span></p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
<div class="featured_badge">Featured</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00<span>AU$110.00</span></p>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/orderplaced/orderplaced.page.scss
.cart_wrapper {
width: 100%;
.cart_head {
width: 100%;
height: 240px;
text-align: center;
background-image: url("../../assets/[email protected]");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
.nav_header {
.nav_title {
h4 {
color: #FFF;
}
}
}
img {
width: 70px;
}
h4 {
color: #fff;
font-weight: bolder;
margin-bottom: 5px;
text-align: center;
}
p {
color: rgba(215, 213, 228, 1);
margin: 0px;
padding: 0px;
font-size: 14px;
text-align: center;
}
}
.order_status {
width: 100%;
padding: 20px;
.track_btn {
border-radius: 5px;
height: 40px;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
}
.status_div {
margin-bottom: 10px;
margin-top: 10px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
}
.go_green {
h4 {
color: rgba(53, 203, 171, 1);
}
}
.go_green.status_gap {
border-left: 2px dashed rgba(53, 203, 171, 1);
}
.status_gap {
border-left: 2px dashed rgba(215, 213, 228, 1);
height: 30px;
}
}
.nearby_shop_list {
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 120px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
}
}
}
}
}
.product_detail {
padding: 10px;
hr {
border-bottom: 1px solid rgba(176, 174, 199);
height: 0px;
border-top: none;
}
h6 {
margin: 0px;
padding: 0px;
color: #29285b;
font-size: 18px;
padding-bottom: 15px;
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
line-height: 25px;
padding-bottom: 15px;
strong {
color: rgba(41, 40, 91, 1);
}
span {
color: rgba(41, 40, 91, 1);
}
.afterpay {
color: rgba(206, 153, 76, 1);
padding-left: 10px;
}
}
h4 {
color: rgba(41, 40, 91, 1);
margin: 0px;
font-weight: 900;
font-size: 18px;
padding-top: 20px;
padding-bottom: 10px;
}
.cancel_btn {
border-radius: 8px;
height: 45px;
width: 100%;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
}
.related_product_slider {
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 10px;
font-weight: 900;
font-size: 18px;
}
p {
color: rgba(59, 57, 77, 1);
padding: 10px;
text-align: justify;
margin: 0px;
font-size: 18px;
}
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: 100%;
display: inline-block;
border-top: none;
border-bottom: none;
margin-bottom: 10px;
.product_image {
height: 235px;
position: relative;
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
.fav_icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url("../../assets/Group32_2.png");
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 5px;
padding-bottom: 5px;
font-weight: 500;
text-align: left;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
text-align: left;
span {
text-decoration: line-through;
margin-left: 10px;
color: rgba(215, 213, 228, 1)
}
.offer {
color: #fff;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
}
}
}
}
}
\ No newline at end of file
src/app/orderplaced/orderplaced.page.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-orderplaced',
......@@ -7,9 +9,26 @@ import { Component, OnInit } from '@angular/core';
})
export class OrderplacedPage implements OnInit {
constructor() { }
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
relatedProd = {
slidesPerView: 2
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/app/productdetail/productdetail.page.html
<ion-header>
<ion-nav-pop>
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
</button>
</ion-nav-pop>
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
</div>
<button class="nav_btn floatRight">
......@@ -206,8 +203,8 @@
<div class="footer_options">
<button class="share"></button>
<button class="fav"></button>
<button class="cart"></button>
<button class="cart" (click)="goToPage('cart')"></button>
</div>
<div class="footer_btn">BUY NOW</div>
<div class="footer_btn" (click)="goToPage('cart')">BUY NOW</div>
</div>
</ion-content>
\ No newline at end of file
src/app/tabs/tabs.module.ts
......@@ -2,8 +2,8 @@ import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabsPageRoutingModule } from './tabs.router.module';
import { Tab1PageModule } from './../tab1/tab1.module';
import { TabsPage } from './tabs.page';
......@@ -12,7 +12,8 @@ import { TabsPage } from './tabs.page';
IonicModule,
CommonModule,
FormsModule,
TabsPageRoutingModule
TabsPageRoutingModule,
Tab1PageModule
],
declarations: [TabsPage]
})
......
src/app/tabs/tabs.router.module.ts
......@@ -2,8 +2,14 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: '',
redirectTo: '/tabs',
pathMatch: 'full'
},
{
path: 'tabs',
component: TabsPage,
children: [
......@@ -43,12 +49,8 @@ const routes: Routes = [
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
......
src/app/trackorder/trackorder.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TrackorderPage } from './trackorder.page';
import { AgmCoreModule } from '@agm/core';
const routes: Routes = [
{
path: '',
component: TrackorderPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyAK3Av2e2dunqInYEaAVJPmzK5HTi0gubw'
}),
RouterModule.forChild(routes)
],
declarations: [TrackorderPage]
})
export class TrackorderPageModule {}
src/app/trackorder/trackorder.page.html 0 → 100644
<ion-header>
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
<h4>ORDER TRACKING</h4>
</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="trackorder_div">
<agm-map [zoom]="18" [latitude]=" lat " [longitude]="lng " [backgroundColor]="444397">
<agm-marker [latitude]="lat " [longitude]="lng "></agm-marker>
</agm-map>
<!-- <div class="overlay">
</div> -->
</div>
<div class="rider_footer ">
<div class="rider_image "></div>
<div class="rider_detail ">
<h5>John Doe</h5>
<p>Rider</p>
</div>
<div class="rider_time ">
18<span>Mins</span>
</div>
<div class="rider_call ">Call Rider</div>
<div class="clear "></div>
</div>
</ion-content>
\ No newline at end of file
src/app/trackorder/trackorder.page.scss 0 → 100644
.trackorder_div {
width: 100%;
height: 100vh;
position: relative;
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(68, 67, 151, 0.2);
}
agm-map {
width: 100%;
height: 100%;
}
}
.rider_footer {
position: fixed;
bottom: 0px;
left: 0px;
padding: 15px;
right: 0px;
background-color: #fff;
-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
.rider_image {
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
background-color: #a8a8a8;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
.rider_detail {
float: left;
padding: 5px;
padding-left: 10px;
width: calc(100% - 300px);
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.rider_time {
float: left;
width: 150px;
font-size: 35px;
font-weight: 900;
color: rgba(59, 57, 77, 1);
padding: 5px;
padding-left: 15px;
span {
color: rgba(176, 174, 199, 1);
font-size: 16px;
padding-left: 5px;
font-weight: 400;
}
}
.rider_call {
background-color: rgba(53, 203, 171, 1);
color: #fff;
float: right;
height: 50px;
padding: 14px;
font-size: 16px;
width: 100px;
border-radius: 5px;
font-weight: 700;
padding-left: 20px;
padding-right: 20px;
}
}
\ No newline at end of file
src/app/trackorder/trackorder.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TrackorderPage } from './trackorder.page';
describe('TrackorderPage', () => {
let component: TrackorderPage;
let fixture: ComponentFixture<TrackorderPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TrackorderPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TrackorderPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/trackorder/trackorder.page.ts 0 → 100644
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
declare var google;
@Component({
selector: 'app-trackorder',
templateUrl: './trackorder.page.html',
styleUrls: ['./trackorder.page.scss'],
})
export class TrackorderPage implements OnInit {
map: any;
address: string;
lat: number = 51.678418;
lng: number = 7.809007;
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();
}
}
src/global.scss
......@@ -417,6 +417,10 @@ button {
background-image: url("./assets/Group 17_2.png");
}
.nav_back_white {
background-image: url("./assets/arrow_white.png");
}
.nav_menu {
background-image: url("./assets/Group 22_2.png");
}
......
src/index.html
......@@ -2,24 +2,24 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<base href="/" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
<app-root></app-root>
</body>
</html>
</html>
\ No newline at end of file
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