Skip to content

G
getme
Commit 47fe521c by Arjun
Options

stylefix

parent eb6d59e9
Showing with 1669 additions and 1343 deletions
src/app/addaddresss/addaddresss.page.scss
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
input { input {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: rgba(215, 213, 228, 1); color: #000;
width: 100%; width: 100%;
height: 45px; height: 45px;
text-align: left; text-align: left;
...@@ -86,6 +86,15 @@ ...@@ -86,6 +86,15 @@
font-size: 16px; font-size: 16px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
outline: none;
transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
} }
.login_btn { .login_btn {
width: 100%; width: 100%;
......
src/app/addcard/addcard.page.scss
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
input { input {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: rgba(215, 213, 228, 1); color: #000;
width: 100%; width: 100%;
height: 45px; height: 45px;
text-align: left; text-align: left;
...@@ -87,6 +87,15 @@ ...@@ -87,6 +87,15 @@
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
text-align: center; text-align: center;
outline: none;
transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
} }
.login_btn { .login_btn {
width: 100%; width: 100%;
......
src/app/app-routing.module.ts
...@@ -100,7 +100,8 @@ const routes: Routes = [ ...@@ -100,7 +100,8 @@ const routes: Routes = [
{ path: 'address', loadChildren: './address/address.module#AddressPageModule' }, { path: 'address', loadChildren: './address/address.module#AddressPageModule' },
{ path: 'success', loadChildren: './success/success.module#SuccessPageModule' }, { path: 'success', loadChildren: './success/success.module#SuccessPageModule' },
{ path: 'failed', loadChildren: './failed/failed.module#FailedPageModule' }, { path: 'failed', loadChildren: './failed/failed.module#FailedPageModule' },
{ path: 'preference', loadChildren: './preference/preference.module#PreferencePageModule' } { path: 'preference', loadChildren: './preference/preference.module#PreferencePageModule' },
{ path: 'changeaddress', loadChildren: './changeaddress/changeaddress.module#ChangeaddressPageModule' }
]; ];
@NgModule({ @NgModule({
......
src/app/app.component.ts
...@@ -112,7 +112,8 @@ export class AppComponent { ...@@ -112,7 +112,8 @@ export class AppComponent {
'forgot', 'forgot',
'feedback', 'feedback',
'wishlist', 'wishlist',
'preference' 'preference',
'changeaddress'
]; ];
const currentUrl = this.router.url.split('/'); const currentUrl = this.router.url.split('/');
const index = restrictedUrl.findIndex(x => x === currentUrl[1]); const index = restrictedUrl.findIndex(x => x === currentUrl[1]);
......
src/app/cart/cart.page.html
<ion-content> <ion-content>
<div class="cart_wrapper"> <div class="cart_wrapper">
<div class="cart_head"> <div class="cart_head">
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()"> <button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
<img src="../assets/arrow_white.png" /> <img src="../assets/arrow_white.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>CART</h4> <h4>CART</h4>
</div> </div>
<button class="nav_btn floatRight"></button> <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]="cartwizard"
(ionSlideDidChange)="slideChanged()"
>
<ion-slide>
<div class="cart_list" *ngIf="cartService.carts">
<ul *ngIf="cartService.carts.length > 0">
<li *ngFor="let carts of cartService.carts; let i= index">
<div class="close" (click)="cartService.removeItem(i)"></div>
<div class="cart_image">
<img [src]="carts.image" onerror="this.src=''" />
</div>
<div class="cart_detail">
<h4>{{carts.prodName}}</h4>
<h4>{{carts.size}}, {{carts.color}}</h4>
<h5>A$ {{carts.price}}</h5>
</div>
<div class="cart_count">
<div class="add" (click)="cartService.addCount(i)">+</div>
<div class="count">{{carts.qty}}</div>
<div class="remove" (click)="cartService.removeCount(i)">
-
</div>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="total_div" *ngIf="cartService.cartTotal">
<ion-row>
<ion-col>
<p class="textLeft">Total Price:</p>
</ion-col>
<ion-col>
<p class="textRight">A$ {{cartService.cartTotal}}</p>
</ion-col>
</ion-row>
</div>
<div
class="no-items-wrapper"
*ngIf="cartService.carts.length == 0"
>
<img src="../../assets/noitem.png" />
<h1>There is no products added</h1>
<button (click)="goToPage('home')">Shop Now</button>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="checkout_list">
<h5>
<span class="floatLeft">ITEMS</span>
<span class="floatRight" *ngIf="cartService.cartTotal"
>A$ {{cartService.cartTotal}}</span
>
<div class="clear"></div>
</h5>
<ion-grid
class="p0"
*ngIf="cartService.carts && cartService.carts.length > 0"
>
<ion-row *ngFor="let carts of cartService.carts">
<ion-col size="6" class="p0">
<h6 class="textLeft">{{carts.prodName}}</h6>
</ion-col>
<ion-col size="2" class="p0">
<h6 class="textRight"><strong>{{carts.qty}} X</strong></h6>
</ion-col>
<ion-col size="4" class="p0">
<h6 class="textRight">
<strong>A$ {{carts.price}}</strong>
</h6>
</ion-col>
</ion-row>
</ion-grid>
<hr />
<h5>
<span class="floatLeft">DELIVERY</span>
<span class="floatRight" (click)="istoggle()">EDIT</span>
<div class="clear"></div>
</h5>
<ion-grid class="p0" *ngIf="custAddress">
<ion-row>
<ion-col class="p0">
<h6>
{{custAddress.building}},<br />
{{custAddress.landmark}},<br />
{{custAddress.address}}
</h6>
</ion-col>
</ion-row>
</ion-grid>
<hr />
<h5>
<span class="floatLeft">PAYMENT</span>
<span class="floatRight">CHANGE</span>
<div class="clear"></div> <div class="clear"></div>
</h5> </div>
<div class="payment_method"> <div class="cart_menu_header">
<input <ul>
type="radio" <li class="textCenter active" [class.active]="currentIndex == 0">
name="payments" CART
id="cod" </li>
name="radio-group" <li class="textCenter">
checked="true" <hr />
(click)="getwaycod()" </li>
/> <li class="textCenter" [class.active]="currentIndex == 1">
<label for="cod"> CHECKOUT
<p>COD</p> </li>
</label> <li class="textCenter">
</div> <hr />
<div class="payment_method"> </li>
<input <li class="textCenter" [class.active]="currentIndex == 2">FINISH</li>
type="radio" </ul>
name="payments" </div>
id="paypal" <div class="cart_content">
name="radio-group" <ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()">
(click)="getwaypaypal()" <ion-slide>
/> <div class="cart_list" *ngIf="cartService.carts">
<label for="paypal"> <ul *ngIf="cartService.carts.length > 0">
<p>PayPal</p> <li *ngFor="let carts of cartService.carts; let i= index">
</label> <div class="close" (click)="cartService.removeItem(i)"></div>
</div> <div class="cart_image">
<!-- <div class="card_div" [hidden]="gateway !=1"> <img [src]="carts.image" onerror="this.src=''" />
</div>
<div class="cart_detail">
<h4>{{carts.prodName}}</h4>
<h4>{{carts.size}}, {{carts.color}}</h4>
<h5>A$ {{carts.price}}</h5>
</div>
<div class="cart_count">
<div class="add" (click)="cartService.addCount(i)">+</div>
<div class="count">{{carts.qty}}</div>
<div class="remove" (click)="cartService.removeCount(i)">
-
</div>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="total_div" *ngIf="cartService.cartTotal">
<ion-row>
<ion-col>
<p class="textLeft">Total Price:</p>
</ion-col>
<ion-col>
<p class="textRight">A$ {{cartService.cartTotal}}</p>
</ion-col>
</ion-row>
</div>
<div class="no-items-wrapper" *ngIf="cartService.carts.length == 0">
<img src="../../assets/noitem.png" />
<h1>There is no products added</h1>
<button (click)="goToPage('home')">Shop Now</button>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="checkout_list">
<h5>
<span class="floatLeft">ITEMS</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$
{{cartService.cartTotal}}</span>
<div class="clear"></div>
</h5>
<ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0">
<ion-row *ngFor="let carts of cartService.carts">
<ion-col size="6" class="p0">
<h6 class="textLeft">{{carts.prodName}}</h6>
</ion-col>
<ion-col size="2" class="p0">
<h6 class="textRight"><strong>{{carts.qty}} X</strong></h6>
</ion-col>
<ion-col size="4" class="p0">
<h6 class="textRight">
<strong>A$ {{carts.price}}</strong>
</h6>
</ion-col>
</ion-row>
</ion-grid>
<hr />
<h5>
<span class="floatLeft">DELIVERY</span>
<span class="floatRight" (click)="istoggle()">EDIT</span>
<div class="clear"></div>
</h5>
<ion-grid class="p0" *ngIf="custAddress">
<ion-row>
<ion-col class="p0">
<h6>
{{custAddress.building}},<br /> {{custAddress.landmark}},
<br /> {{custAddress.address}}
</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="payment_method">
<input type="radio" name="payments" id="cod" name="radio-group" checked="true" (click)="getwaycod()" />
<label for="cod">
<p>COD</p>
</label>
</div>
<div class="payment_method">
<input type="radio" name="payments" id="paypal" name="radio-group" (click)="getwaypaypal()" />
<label for="paypal">
<p>PayPal</p>
</label>
</div>
<!-- <div class="card_div" [hidden]="gateway !=1">
<input class="card_no borderNone widthFull" placeholder="PayPal ID" /> <input class="card_no borderNone widthFull" placeholder="PayPal ID" />
</div> --> </div> -->
<div class="payment_method"> <div class="payment_method">
<input <input type="radio" name="payments" id="afterpay" name="radio-group" (click)="getwayafterpay()" />
type="radio" <label for="afterpay">
name="payments" <p>AfterPay</p>
id="afterpay" </label>
name="radio-group" </div>
(click)="getwayafterpay()" <!-- <div class="card_div" [hidden]="gateway !=2">
/>
<label for="afterpay">
<p>AfterPay</p>
</label>
</div>
<!-- <div class="card_div" [hidden]="gateway !=2">
<input class="card_no" placeholder="**** **** **** 1458" /> <input class="card_no" placeholder="**** **** **** 1458" />
<input class="cv_number" placeholder="CVV" /> <input class="cv_number" placeholder="CVV" />
</div> --> </div> -->
<div class="payment_method"> <div class="payment_method">
<input <input type="radio" name="payments" id="payk" name="radio-group" (click)="getwaypayk()" />
type="radio" <label for="payk">
name="payments" <p>PayK</p>
id="payk" </label>
name="radio-group" </div>
(click)="getwaypayk()" <!-- <div class="card_div" [hidden]="gateway !=3">
/>
<label for="payk">
<p>PayK</p>
</label>
</div>
<!-- <div class="card_div" [hidden]="gateway !=3">
<input <input
class="card_no borderNone widthFull" class="card_no borderNone widthFull"
placeholder="PafyK ID" placeholder="PafyK ID"
/> />
</div> --> </div> -->
<!-- <div class="delivery_time"> <!-- <div class="delivery_time">
<ul> <ul>
<li> <li>
Delivery 10 Mnt<br> Delivery 10 Mnt<br>
...@@ -201,169 +164,128 @@ ...@@ -201,169 +164,128 @@
</li> </li>
</ul> </ul>
</div> --> </div> -->
<hr /> <hr />
<div class="coupon_code"> <div class="coupon_code">
<input <input class="" placeholder="COUPON CODE: GET50" #promo /><button class="add_btn" (click)="promoApply(promo.value)">
class="" APPLY
placeholder="COUPON CODE: GET50" </button>
#promo <span *ngIf="discountApplied" style="color: red">Promocode applied successfully
/><button class="add_btn" (click)="promoApply(promo.value)"> </span>
APPLY </div>
</button> <br />
<span *ngIf="discountApplied" style="color: red"
>Promocode applied successfully
</span>
</div>
<br />
<h6> <h6>
<span class="floatLeft">PRODUCT COST</span> <span class="floatLeft">PRODUCT COST</span>
<span class="floatRight" *ngIf="cartService.cartTotal" <span class="floatRight" *ngIf="cartService.cartTotal">A$
>A$ {{cartService.cartTotal}}</span {{cartService.cartTotal}}</span>
> <div class="clear"></div>
<div class="clear"></div> </h6>
</h6>
<h6> <h6>
<span class="floatLeft">DELIVERY CHARGE</span> <span class="floatLeft">DELIVERY CHARGE</span>
<span class="floatRight" *ngIf="cartService.cartTotal" <span class="floatRight" *ngIf="cartService.cartTotal">A$
>A$ {{getDeliveryCharge(cartService.cartTotal)}}</span {{getDeliveryCharge(cartService.cartTotal)}}</span>
> <div class="clear"></div>
<div class="clear"></div> </h6>
</h6> <h6>
<h6> <span class="floatLeft">GST/TAX</span>
<span class="floatLeft">GST/TAX</span> <span class="floatRight" *ngIf="cartService.cartTotal">A$
<span class="floatRight" *ngIf="cartService.cartTotal" {{getTax(cartService.cartTotal)}}</span>
>A$ {{getTax(cartService.cartTotal)}}</span <div class="clear"></div>
> </h6>
<div class="clear"></div> <h6 *ngIf="discountApplied">
</h6> <span class="floatLeft">DISCOUNT</span>
<h6 *ngIf="discountApplied"> <span class="floatRight">(-) A$ {{discount}}</span>
<span class="floatLeft">DISCOUNT</span> <div class="clear"></div>
<span class="floatRight">(-) A$ {{discount}}</span> </h6>
<div class="clear"></div> <hr />
</h6> <div class="total_div">
<hr /> <ion-row>
<div class="total_div"> <ion-col>
<ion-row> <p class="textLeft">Total Price:</p>
<ion-col> </ion-col>
<p class="textLeft">Total Price:</p> <ion-col>
</ion-col> <p class="textRight" *ngIf="cartService.cartTotal">
<ion-col> A$ {{getTotal(cartService.cartTotal)}}
<p class="textRight" *ngIf="cartService.cartTotal"> </p>
A$ {{getTotal(cartService.cartTotal)}} </ion-col>
</p> </ion-row>
</ion-col> </div>
</ion-row> </div>
</div> </ion-slide>
<ion-slide>
<div class="order_placed_div">
<img src="../assets/[email protected]" />
<h4>Order Placed</h4>
<p>{{bookDate}}</p>
<h3>The product will be delivered in</h3>
<h1>{{deliveryTime}} 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>
</ion-slide> </div>
<ion-slide>
<div class="order_placed_div">
<img src="../assets/[email protected]" />
<h4>Order Placed</h4>
<p>{{bookDate}}</p>
<h3>The product will be delivered in</h3>
<h1>{{deliveryTime}} 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>
</div>
</ion-content> </ion-content>
<ion-footer> <ion-footer>
<div <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
class="footer_btnbay" <div class="continue" (click)="goToPage('productlist')">
*ngIf="cartService.carts && cartService.carts.length > 0" CONTINUE SHOPPING
[hidden]="currentIndex != 0" </div>
> <div class="checkout" (click)="next(1)">CHECKOUT</div>
<div class="continue" (click)="goToPage('productlist')">
CONTINUE SHOPPING
</div> </div>
<div class="checkout" (click)="next(1)">CHECKOUT</div> <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);">
</div> PAY
<div </div>
class="footer_btn" <!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
*ngIf="cartService.carts && cartService.carts.length > 0"
[hidden]="currentIndex != 1"
(click)="next(2);"
>
PAY
</div>
<!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
FINISH FINISH
</div> --> </div> -->
</ion-footer> </ion-footer>
<div class="loader" *ngIf="loader"> <div class="loader" *ngIf="loader">
<div class="lds-ripple"> <div class="lds-ripple">
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</div> </div>
<div *ngIf="isShow" [@slideInOut]> <div *ngIf="isShow" [@slideInOut]>
<div class="nav_header"> <div class="nav_header">
<button <button class="nav_btn nav_back floatLeft" (click)="istoggle(); setAddress()">
class="nav_btn nav_back floatLeft" <img src="../assets/Group17_2.png" />
(click)="istoggle(); setAddress()" </button>
> <div class="nav_title floatLeft">
<img src="../assets/Group17_2.png" /> <h4>CHANGE LOCATION</h4>
</button> </div>
<div class="nav_title floatLeft">
<h4>CHANGE LOCATION</h4>
</div>
<div class="clear"></div>
</div>
<ion-content class="sort_wrappper">
<agm-map
[zoom]="20"
[latitude]="lat"
[longitude]="lng"
[disableDefaultUI]="false"
[zoomControl]="false"
[backgroundColor]="'rgba(29, 27, 130,0.2)'"
>
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')"
>ADD NEW</span
>
<div class="clear"></div> <div class="clear"></div>
</h5>
<ul
*ngIf="addressService.addressList && addressService.addressList.length > 0"
>
<li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft">
{{address.default}}
<input
class="styled-checkbox"
name="addressId"
id="styled-checkbox-{{i}}"
type="radio"
(click)="setDefault(address.addressId, i)"
[value]="address.addressId"
#addressType
[checked]="address.defaultVal == 1"
/>
<label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
</div>
<div class="floatLeft">
<p>
{{address.building}}, {{address.landmark}}, {{address.address}}
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div> </div>
</ion-content> <ion-content class="sort_wrappper">
</div> <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
<div class="clear"></div>
</h5>
<ul *ngIf="addressService.addressList && addressService.addressList.length > 0">
<li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft">
{{address.default}}
<input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId, i)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1" />
<label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
</div>
<div class="floatLeft">
<p>
{{address.building}}, {{address.landmark}}, {{address.address}}
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
</div>
\ No newline at end of file
src/app/cart/cart.page.scss
...@@ -206,27 +206,30 @@ ...@@ -206,27 +206,30 @@
.coupon_code { .coupon_code {
padding-top: 20px; padding-top: 20px;
padding-bottom: 50px; padding-bottom: 50px;
border-bottom: 1px solid rgba(176, 174, 199, 1); border-bottom: 1px solid #b0aec7;
display: flex;
justify-content: space-between;
input { input {
width: calc(100% - 50px); width: 75%;
border: 1px solid rgba(176, 174, 199, 1); border: 1px solid #b0aec7;
border-radius: 20px; border-radius: 20px;
height: 35px; height: 35px;
padding-left: 20px; padding-left: 20px;
font-weight: 900; font-weight: 900;
color: rgba(215, 213, 228, 1); color: #29285b;
outline: none;
transition: all .4s ease-in-out;
&::placeholder { &::placeholder {
color: rgba(215, 213, 228, 1); color: rgba(215, 213, 228, 1);
outline: none;
} }
&:focus { &:focus {
color: rgba(215, 213, 228, 1); border: 1px solid #f3d09f;
outline: none; box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
} }
} }
.add_btn { .add_btn {
color: #29285b; color: #29285b;
width: 50px; width: 25%;
height: 35px; height: 35px;
background: transparent; background: transparent;
font-size: 17px; font-size: 17px;
......
src/app/changeaddress/changeaddress.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 { ChangeaddressPage } from './changeaddress.page';
import { AgmCoreModule } from '@agm/core';
import { AgmDirectionModule } from 'agm-direction';
const routes: Routes = [
{
path: '',
component: ChangeaddressPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
AgmDirectionModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyBn6hOlr6YHcZAmbptlsmbhvH5iQllWflE'
}),
RouterModule.forChild(routes)
],
declarations: [ChangeaddressPage]
})
export class ChangeaddressPageModule {}
src/app/changeaddress/changeaddress.page.html 0 → 100644
<div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png" />
</button>
<div class="nav_title floatLeft">
<h4>Change Address</h4>
</div>
<div class="clear"></div>
</div>
<ion-content>
<div class="nearby_map">
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="8" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" (dragEnd)="markerDragEnd($event)"></agm-marker>
</agm-map>
<form (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()" #addressForm="ngForm" method="post" class="form-horizontal">
<div class="add_address_wrapper">
<h5>DELIVERY</h5>
<p>{{address}}</p>
<input [(ngModel)]="addressForm.building" name="building" #building="ngModel" name="building" required placeholder="House No./ Building No" />
<div class="md-errors-spacer" [hidden]="building.valid || landmark.pristine" class="ion-padding-start">
Building Name is required
</div>
<input [(ngModel)]="addressForm.landmark" name="landmark" #landmark="ngModel" name="landmark" required placeholder="Landmark" />
<div class="md-errors-spacer" [hidden]="landmark.valid || landmark.pristine" class="ion-padding-start">
Landmark is required
</div>
<ion-grid>
<ion-row>
<ion-col>
<h6>
<input class="styled-checkbox" id="styled-check-1" type="radio" value="Home" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required />
<label for="styled-check-1"><span>Home</span></label>
</h6>
</ion-col>
<ion-col>
<h6>
<input class="styled-checkbox" id="styled-check-2" type="radio" value="Work" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required />
<label for="styled-check-2"><span>Office</span></label>
</h6>
</ion-col>
<ion-col>
<h6>
<input class="styled-checkbox" id="styled-check-3" type="radio" value="Other" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required />
<label for="styled-check-3"><span>Others</span></label>
</h6>
</ion-col>
</ion-row>
<div class="md-errors-spacer" [hidden]="addressType.valid || addressType.pristine" class="ion-padding-start">
Address Type is required
</div>
</ion-grid>
<button class="add_btn" type="submit" [disabled]="!addressForm.form.valid">
ADD
</button>
</div>
</form>
</div>
<div class="loader" *ngIf="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/changeaddress/changeaddress.page.scss 0 → 100644
.nearby_map {
width: 100%;
height: 100vh;
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(29, 27, 130, 0.2);
}
agm-map {
width: 100%;
height: 100%;
position: relative;
}
.click_marker {
min-width: 200px;
padding: 10px;
h5 {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
}
}
}
.add_address_wrapper {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
padding: 20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background: #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);
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 0px;
font-weight: 800;
}
input {
width: 100%;
height: 45px;
border: 1px solid #e1e0eb;
border-radius: 4px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
.add_btn {
width: 100%;
height: 45px;
background-color: #29285b;
color: #fff;
border-radius: 4px;
}
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 10px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
// Box hover
// Box checked
&: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: 11px;
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);
}
}
\ No newline at end of file
src/app/changeaddress/changeaddress.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ChangeaddressPage } from './changeaddress.page';
describe('ChangeaddressPage', () => {
let component: ChangeaddressPage;
let fixture: ComponentFixture<ChangeaddressPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ChangeaddressPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChangeaddressPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/changeaddress/changeaddress.page.ts 0 → 100644
import {
Component,
OnInit,
ViewChild,
ElementRef,
NgZone
} from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
import { MapsAPILoader, MouseEvent } from '@agm/core';
import { Address } from './../../config/services/address';
import { AddressService } from './../../config/address.service';
import { ServiceService } from './../../config/service.service';
import { NgForm } from '@angular/forms';
import * as firebase from 'firebase';
@Component({
selector: 'app-changeaddress',
templateUrl: './changeaddress.page.html',
styleUrls: ['./changeaddress.page.scss']
})
export class ChangeaddressPage implements OnInit {
latitude: number;
longitude: number;
zoom: number;
address: string;
private geoCoder;
addressForm: NgForm;
addressData = new Address('', '', '', '', true, '', 0, '');
successState: boolean;
uid: string;
type: any;
loader: boolean;
public searchElementRef: ElementRef;
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location,
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
public addressService: AddressService,
public service: ServiceService
) {
this.successState = false;
this.type = 0;
const users = this.service.get('user').then(data => {
if (data) {
data = JSON.parse(data);
this.uid = data.uid;
}
});
this.service.get('type').then(data => {
this.type = data;
});
}
ngOnInit() {
// load Places Autocomplete
this.mapsAPILoader.load().then(() => {
this.setCurrentLocation();
this.geoCoder = new google.maps.Geocoder();
});
}
// google maps zoom level
private setCurrentLocation() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(position => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 8;
this.getAddress(this.latitude, this.longitude);
});
}
}
markerDragEnd($event: MouseEvent) {
console.log($event);
this.latitude = $event.coords.lat;
this.longitude = $event.coords.lng;
this.getAddress(this.latitude, this.longitude);
}
getAddress(latitude, longitude) {
this.geoCoder.geocode(
{ location: { lat: latitude, lng: longitude } },
(results, status) => {
console.log(results);
console.log(status);
if (status === 'OK') {
if (results[0]) {
this.zoom = 12;
this.address = results[0].formatted_address;
console.log(this.address);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
}
);
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
window.history.back();
}
onSubmit(data: any) {
this.loader = true;
console.log(data);
const postData: Address = {
address: this.address,
addressType: data.addressType,
building: data.building,
landmark: data.landmark,
defaultVal: 0,
uid: this.uid,
latLng: new firebase.firestore.GeoPoint(this.latitude, this.longitude),
status: true
};
this.addressService.addressCreate(postData);
this.successState = true;
setTimeout(() => {
this.loader = false;
this.successState = false;
if (this.type === 1) {
this.service.set('type', 0);
this.router.navigateByUrl('home', { queryParams: null });
} else {
this.goBack();
}
}, 3000);
}
}
interface Marker {
lat: number;
lng: number;
label?: string;
draggable: boolean;
}
src/app/changedetails/changedetails.page.scss
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
input { input {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: rgba(215, 213, 228, 1); color: #000;
width: 100%; width: 100%;
height: 45px; height: 45px;
text-align: center; text-align: center;
...@@ -30,6 +30,15 @@ ...@@ -30,6 +30,15 @@
font-size: 16px; font-size: 16px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
outline: none;
transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
} }
.login_btn { .login_btn {
width: 100%; width: 100%;
......
src/app/changepass/changepass.page.scss
...@@ -8,12 +8,21 @@ ...@@ -8,12 +8,21 @@
input { input {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: rgba(215, 213, 228, 1); color: #000;
width: 100%; width: 100%;
height: 45px; height: 45px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 16px;
outline: none;
transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
} }
.login_btn { .login_btn {
width: 100%; width: 100%;
......
src/app/feedback/feedback.page.scss
.feedback_wrapper { .feedback_wrapper {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
padding-top: 30px; padding-top: 30px;
.form_div { .form_div {
.row { .row {
margin-bottom: 20px; margin-bottom: 20px;
.form-control { .form-control {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: #333; color: #000;
width: 100%; width: 100%;
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 16px;
padding: 11px 15px; padding: 11px 15px;
resize: none; resize: none;
&::placeholder { outline: none;
color: rgba(215, 213, 228, 1); transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
}
.login_btn {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
margin-bottom: 50px;
}
p {
text-align: left;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bolder;
padding-bottom: 10px;
}
} }
}
.login_btn {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
margin-bottom: 50px;
}
p {
text-align: left;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bolder;
padding-bottom: 10px;
}
} }
} }
} \ No newline at end of file
src/app/forgot/forgot.page.scss
...@@ -8,12 +8,21 @@ ...@@ -8,12 +8,21 @@
input { input {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: rgba(215, 213, 228, 1); color: #000;
width: 100%; width: 100%;
height: 45px; height: 45px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 16px;
outline: none;
transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
} }
.login_btn { .login_btn {
width: 100%; width: 100%;
......
src/app/home/home.page.html
...@@ -63,8 +63,8 @@ ...@@ -63,8 +63,8 @@
<div class="home_sub_header"> <div class="home_sub_header">
<span class="floatLeft">Nearby Shopping Centers</span> <span class="floatLeft">Nearby Shopping Centers</span>
<span class="floatRight"> <span class="floatRight">
<div class="nearby_icon" (click)="goToPage('nearby')"></div> <div class="nearby_icon" (click)="goToPage('nearby')"></div>
</span> </span>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="nearby_shop_list"> <div class="nearby_shop_list">
...@@ -77,8 +77,8 @@ ...@@ -77,8 +77,8 @@
<h5> <h5>
<span class="floatLeft">{{center.centerName}}</span> <span class="floatLeft">{{center.centerName}}</span>
<span class="floatRight">0 <span class="floatRight">0
<img src="../assets/Path61_2.png" /> <img src="../assets/Path61_2.png" />
</span> </span>
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
<p>{{center.description}}</p> <p>{{center.description}}</p>
...@@ -105,8 +105,8 @@ ...@@ -105,8 +105,8 @@
<div *ngIf="isShow" [@slideInOut]> <div *ngIf="isShow" [@slideInOut]>
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle()"> <button class="nav_btn nav_back floatLeft" (click)="istoggle()">
<img src="../assets/Group17_2.png" /> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>CHANGE LOCATION</h4> <h4>CHANGE LOCATION</h4>
</div> </div>
......
src/app/landing/landing.page.html
<ion-content> <ion-content>
<div class="start_wizard_wrapper"> <div class="start_wizard_wrapper">
<ion-slides <ion-slides pager="true" [options]="landingOptions" (ionSlideDidChange)="slideChanged()">
pager="true" <ion-slide>
[options]="landingOptions" <div class="wizard_inner_wrapper">
(ionSlideDidChange)="slideChanged()" <img src="../assets/Group 229_2.png" />
> <div class="wizard_textarea">
<ion-slide> <h3>EASY PURCHASE</h3>
<div class="wizard_inner_wrapper"> <p>
<img src="../assets/Group 229_2.png" /> Purchase your products from your<br /> favourite shops
<div class="wizard_textarea"> </p>
<h3>EASY PURCHASE</h3> </div>
<p> </div>
Purchase your products from your<br /> </ion-slide>
favourite shops <ion-slide>
</p> <div class="wizard_inner_wrapper">
</div> <img src="../assets/Group 230_2.png" />
</div> <div class="wizard_textarea">
</ion-slide> <h3>1 HOUR DELIVERY</h3>
<ion-slide> <p>The products will be delivered<br />within 1 hour</p>
<div class="wizard_inner_wrapper"> </div>
<img src="../assets/Group 230_2.png" /> </div>
<div class="wizard_textarea"> </ion-slide>
<h3>1 HOUR DELIVERY</h3> <ion-slide>
<p>The products will be delivered<br />within 1 hour</p> <div class="wizard_inner_wrapper">
</div> <img src="../assets/Group 231_2.png" />
</div> <div class="wizard_textarea">
</ion-slide> <h3>EASY PAYMENT</h3>
<ion-slide> <p>
<div class="wizard_inner_wrapper"> Easy Online payment system
<img src="../assets/Group 231_2.png" /> </p>
<div class="wizard_textarea"> </div>
<h3>EASY PAYMENT</h3> </div>
<p> </ion-slide>
Easy Online payment system </ion-slides>
</p> <div class="btn_row">
</div> <div class="btn_bay" [hidden]="currentIndex == 2">
</div> <div class="btn_next" (click)="next()">
</ion-slide> NEXT
</ion-slides> </div>
<div class="btn_row"> </div>
<div class="btn_bay" [hidden]="currentIndex == 2">
<div class="btn_next" (click)="next()">
NEXT
</div>
</div>
<div class="btn_bay" [hidden]="currentIndex != 2"> <div class="btn_bay" [hidden]="currentIndex != 2">
<div class="btn_getstarted" (click)="goToPage('login')"> <div class="btn_getstarted" (click)="goToPage('login')">
GET STARTED GET STARTED
</div>
</div>
</div> </div>
</div>
</div> </div>
</div> <div class="loader" *ngIf="loader">
<div class="loader" *ngIf="loader"> <div class="lds-ripple">
<div class="lds-ripple"> <div></div>
<div></div> <div></div>
<div></div> </div>
</div> </div>
</div> </ion-content>
</ion-content> \ No newline at end of file
src/app/landing/landing.page.ts
...@@ -46,7 +46,7 @@ export class LandingPage implements OnInit { ...@@ -46,7 +46,7 @@ export class LandingPage implements OnInit {
landingOptions = { landingOptions = {
initialSlide: 1, initialSlide: 1,
speed: 1000, speed: 1000,
allowTouchMove: false allowTouchMove: true
}; };
ngOnInit() {} ngOnInit() {}
......
src/app/login/login.page.scss
...@@ -16,12 +16,21 @@ ...@@ -16,12 +16,21 @@
input { input {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: rgba(215, 213, 228, 1); color: #000;
width: 100%; width: 100%;
height: 45px; height: 45px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 16px;
outline: none;
transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
} }
.login_btn { .login_btn {
width: 100%; width: 100%;
......
src/app/nearby/nearby.page.scss
.nearby_map { .nearby_map {
width: 100%;
height: 100vh;
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(29, 27, 130, 0.2);
}
agm-map {
width: 100%; width: 100%;
height: 100%; height: 100vh;
position: relative; .overlay {
} position: absolute;
.click_marker { top: 0px;
min-width: 200px; left: 0px;
padding: 10px; right: 0px;
h5 { bottom: 0px;
margin: 0px; background: rgba(29, 27, 130, 0.2);
padding: 0px; }
agm-map {
width: 100%;
height: 100%;
position: relative;
} }
p { .click_marker {
margin: 0px; min-width: 200px;
padding: 0px; padding: 10px;
h5 {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
}
} }
}
} }
.add_address_wrapper { .add_address_wrapper {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
padding: 20px; padding: 20px;
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
background: #fff; background: #fff;
-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2); -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); -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); box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
h5 { h5 {
color: rgba(41, 40, 91, 1); color: rgba(41, 40, 91, 1);
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-weight: 800; font-weight: 800;
} }
p { input {
} width: 100%;
input { height: 45px;
width: 100%; border: 1px solid #e1e0eb;
height: 45px; border-radius: 4px;
border: 1px solid #e1e0eb; padding-left: 10px;
border-radius: 4px; padding-right: 10px;
padding-left: 10px; margin-bottom: 20px;
padding-right: 10px; outline: none;
margin-bottom: 20px; transition: all .4s ease-in-out;
} &::placeholder {
.add_btn { color: rgba(215, 213, 228, 1);
width: 100%; }
height: 45px; &:focus {
background-color: #29285b; border: 1px solid #f3d09f;
color: #fff; box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
border-radius: 4px; }
} }
.add_btn {
width: 100%;
height: 45px;
background-color: #29285b;
color: #fff;
border-radius: 4px;
}
} }
.styled-checkbox { .styled-checkbox {
position: absolute; // take it out of document flow position: absolute; // take it out of document flow
opacity: 0; // hide it opacity: 0; // hide it
& + label { &+label {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
} }
// Box. // Box.
& + label:before { &+label:before {
content: ''; content: '';
margin-right: 10px; margin-right: 10px;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 10px; border-radius: 10px;
background: white; background: white;
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
} }
// Box hover // Box hover
// Box checked // Box checked
&:checked + label:before { &:checked+label:before {
background: #29285b; background: #29285b;
} }
// Disabled state label. // Disabled state label.
&:disabled + label { &:disabled+label {
color: #b8b8b8; color: #b8b8b8;
cursor: auto; cursor: auto;
} }
// Disabled box. // Disabled box.
&:disabled + label:before { &:disabled+label:before {
box-shadow: none; box-shadow: none;
background: #ddd; background: #ddd;
} }
// Checkmark. Could be replaced with an image // Checkmark. Could be replaced with an image
&:checked + label:after { &:checked+label:after {
content: ''; content: '';
position: absolute; position: absolute;
left: 6px; left: 6px;
top: 11px; top: 11px;
background: white; background: white;
width: 2px; width: 2px;
height: 2px; height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 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;
4px -6px 0 white, 4px -8px 0 white; transform: rotate(45deg);
transform: rotate(45deg); }
} }
} \ No newline at end of file
src/app/orderplaced/orderplaced.page.html
<ion-content> <ion-content>
<div class="cart_wrapper" *ngIf="data"> <div class="cart_wrapper" *ngIf="data">
<div class="cart_head"> <div class="cart_head">
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()"> <button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
<img src="../assets/arrow_white.png" /> <img src="../assets/arrow_white.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4></h4> <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>{{ data.bookDate.seconds * 1000 | date:'MMMM dd, y' }}</p>
</div> </div>
<button class="nav_btn floatRight"></button> <div class="order_status">
<div class="clear"></div> <div class="clear"></div>
</div> <div class="status_div go_green">
<img src="../assets/white_tick.png" /> <h4>Order Placed</h4>
<h4>ORDER IS PLACED</h4> <h6>{{ data.bookDate.seconds * 1000 | date:'MMMM dd, y' }}</h6>
<p>{{ data.bookDate.seconds * 1000 | date:'MMMM dd, y' }}</p> </div>
</div> <!-- <div class="status_gap go_green">
<div class="order_status">
<div class="clear"></div>
<div class="status_div go_green">
<h4>Order Placed</h4>
<h6>{{ data.bookDate.seconds * 1000 | date:'MMMM dd, y' }}</h6>
</div>
<!-- <div class="status_gap go_green">
</div> </div>
<div class="status_div go_green"> <div class="status_div go_green">
<h4>Retailer Accepted</h4> <h4>Retailer Accepted</h4>
...@@ -54,63 +54,57 @@ ...@@ -54,63 +54,57 @@
<div class="status_div"> <div class="status_div">
<h4>Your product is delivered</h4> <h4>Your product is delivered</h4>
</div> --> </div> -->
</div> </div>
<div class="nearby_shop_list"> <div class="nearby_shop_list">
<ul> <ul>
<li (click)="goToPage('productlist')"> <li (click)="goToPage('productlist')">
<div class="nearby_image"> <div class="nearby_image">
<img <img [src]="data.product[0].image" onerror="this.src='../assets/[email protected]'" />
[src]="data.product[0].image" </div>
onerror="this.src='../assets/[email protected]'" <div class="nearby_detail">
/> <h5>
</div> <span class="floatLeft">{{data.shopperName}}</span>
<div class="nearby_detail"> <span class="floatRight">{{data.product[0].qty}}
<h5>
<span class="floatLeft">{{data.shopperName}}</span>
<span class="floatRight"
>{{data.product[0].qty}}
<img src="../assets/Path61_2.png" /> <img src="../assets/Path61_2.png" />
</span> </span>
<div class="clear"></div> <div class="clear"></div>
</h5>
<p class="prodName">{{data.product[0].prodName}}</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="product_detail" *ngFor="let product of data.product">
<h6>
<span *ngIf="product.color !== 'No-Color'">{{product.color}}, </span>
<span *ngIf="product.size !== 'Any-Size'">{{product.size}}</span>
</h6>
<h5>Quantity : <span>{{product.qty}}</span></h5>
<h5>
Amount : <strong>A$ {{product.price}}</strong><span class="afterpay">COD</span>
</h5> </h5>
<p class="prodName">{{data.product[0].prodName}}</p> <h5 *ngIf="data.orderStatus >= 3 && data.orderStatus < 7">
</div> Delivery time : <span>{{deliveryTime}}</span>
<div class="clear"></div> </h5>
</li> <h5>Order Status : <span>{{getStatus(data.orderStatus)}}</span></h5>
</ul> <div class="delivery-wrap">
</div> <h4 class="floatLeft">DELIVERY</h4>
<div class="product_detail" *ngFor="let product of data.product"> <span class="floatRight"><img class="ng-tns-c3-0" src="../../assets/edit.png"
<h6> (click)="goToPage('changeaddress')"></span>
<span *ngIf="product.color !== 'No-Color'">{{product.color}}, </span> <div class="clear"></div>
<span *ngIf="product.size !== 'Any-Size'">{{product.size}}</span> </div>
</h6> <h5 *ngIf="data.deliveryAddress">
<h5>Quantity : <span>{{product.qty}}</span></h5> {{data.deliveryAddress.addressType}},<br />{{data.deliveryAddress.address}},
<h5> <br /> {{data.deliveryAddress.building}}, <br /> {{data.deliveryAddress.landmark}}
Amount : <strong>A$ {{product.price}}</strong </h5>
><span class="afterpay">COD</span> <button class="cancel_btn" (click)="cancellOrder(data.orderId)" *ngIf="cancelDelivery > 0 && data.orderStatus != 0 && data.orderStatus != 8">
</h5>
<h5 *ngIf="data.orderStatus >= 3 && data.orderStatus < 7">
Delivery time : <span>{{deliveryTime}}</span>
</h5>
<h5>Order Status : <span>{{getStatus(data.orderStatus)}}</span></h5>
<h4>DELIVERY</h4>
<h5 *ngIf="data.deliveryAddress">
{{data.deliveryAddress.addressType}},<br />{{data.deliveryAddress.address}},
<br />
{{data.deliveryAddress.building}}, <br />
{{data.deliveryAddress.landmark}}
</h5>
<button
class="cancel_btn"
(click)="cancellOrder(data.orderId)"
*ngIf="cancelDelivery > 0 && data.orderStatus != 0 && data.orderStatus != 8"
>
CANCEL THIS ORDER CANCEL THIS ORDER
</button> </button>
<!-- <hr /> --> <!-- <hr /> -->
</div> </div>
<!-- <div class="related_product_slider"> <!-- <div class="related_product_slider">
<h5> <h5>
<span class="floatLeft">Related Products</span><span class="floatRight">MORE</span> <span class="floatLeft">Related Products</span><span class="floatRight">MORE</span>
<div class="clear"></div> <div class="clear"></div>
...@@ -165,5 +159,5 @@ ...@@ -165,5 +159,5 @@
</ion-slides> </ion-slides>
</ul> </ul>
</div> --> </div> -->
</div> </div>
</ion-content> </ion-content>
\ No newline at end of file
src/app/orderplaced/orderplaced.page.scss
.cart_wrapper { .cart_wrapper {
width: 100%;
.cart_head {
width: 100%; width: 100%;
height: 240px; .cart_head {
text-align: center; width: 100%;
background-image: url('../../assets/[email protected]'); height: 240px;
background-position: center bottom; text-align: center;
background-repeat: no-repeat; background-image: url('../../assets/[email protected]');
background-size: cover; background-position: center bottom;
.nav_header { background-repeat: no-repeat;
position: static; background-size: cover;
background-color: transparent; .nav_header {
.nav_title { position: static;
background-color: transparent;
.nav_title {
h4 {
color: #fff;
}
}
}
img {
width: 70px;
}
h4 { h4 {
color: #fff; 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;
} }
}
}
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 { .order_status {
border-left: 2px dashed rgba(53, 203, 171, 1); 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;
}
} }
.status_gap { .nearby_shop_list {
border-left: 2px dashed rgba(215, 213, 228, 1); ul {
height: 30px; 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 {
.nearby_shop_list { padding: 10px;
ul { hr {
margin: 0px; border-bottom: 1px solid rgba(176, 174, 199);
padding-left: 10px; height: 0px;
padding-right: 10px; border-top: none;
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 { h6 {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgba(59, 57, 77, 1); color: #29285b;
font-weight: 900; font-size: 18px;
padding-bottom: 2px; padding-bottom: 15px;
img { }
width: 16px; h5 {
}
}
p {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgba(176, 174, 199); 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;
.product_detail { font-weight: 900;
padding: 10px; font-size: 18px;
hr { padding-top: 20px;
border-bottom: 1px solid rgba(176, 174, 199); padding-bottom: 10px;
height: 0px; }
border-top: none; .cancel_btn {
} border-radius: 8px;
h6 { height: 45px;
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%; width: 100%;
height: 100%; background-color: #29285b;
object-fit: cover; color: #fff;
object-position: center; font-size: 18px;
} font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
margin-top: 20px;
} }
.delivery-wrap {
img {
width: 20px;
margin-top: 20px;
}
}
}
.related_product_slider {
h5 { h5 {
margin: 0px; color: rgba(41, 40, 91, 1);
padding: 0px; margin: 0px;
color: rgba(59, 57, 77, 1); padding: 10px;
padding-top: 5px; font-weight: 900;
padding-bottom: 5px; font-size: 18px;
font-weight: 500;
text-align: left;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
p { p {
margin: 0px; color: rgba(59, 57, 77, 1);
padding: 0px; padding: 10px;
color: rgba(176, 174, 199, 1); text-align: justify;
font-size: 12px; margin: 0px;
text-align: left; font-size: 18px;
span { }
text-decoration: line-through; ul {
margin-left: 10px; padding: 10px;
color: rgba(215, 213, 228, 1); padding-bottom: 0px;
} padding-top: 0px;
.offer { margin: 0px;
color: #fff; li {
background-color: rgba(41, 40, 91, 1); width: 100%;
border-radius: 4px; display: inline-block;
text-decoration: none; border-top: none;
padding: 3px; border-bottom: none;
font-size: 13px; 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;
}
}
}
} }
}
} }
}
} }
.prodName { .prodName {
white-space: nowrap; white-space: nowrap;
width: 200px; width: 200px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
\ No newline at end of file
src/app/productlist/productlist.page.scss
.product_list { .product_list {
padding-bottom: 50px; padding-bottom: 50px;
.product_title { .product_title {
padding: 10px; padding: 10px;
padding-bottom: 20px; padding-bottom: 20px;
padding-top: 20px; padding-top: 20px;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: rgba(41, 40, 91, 1); color: rgba(41, 40, 91, 1);
}
.product_taskbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
height: 45px;
width: calc(100% - 20px);
margin: 0 auto;
background-image: url('../../assets/Group109_2.png');
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
.filter {
width: 45px;
height: 45px;
cursor: pointer;
} }
.viewset { .product_taskbar {
width: 45px; border-bottom: 1px solid rgba(0, 0, 0, 0.16);
height: 45px; height: 45px;
cursor: pointer; width: calc(100% - 20px);
.grid_view { margin: 0 auto;
width: 50%; background-image: url('../../assets/Group109_2.png');
height: 100%; background-position: left;
cursor: pointer;
background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 15px; background-size: 12px;
background-image: url('../../assets/Group111_2.png'); .filter {
} width: 45px;
.line_view { height: 45px;
background-image: url('../../assets/Group110_2.png'); cursor: pointer;
cursor: pointer;
}
}
}
.grid_view {
li {
width: 100%;
transition-timing-function: ease-in-out;
transition: 1s;
transform: translateX(0);
.product_image {
height: 390px;
}
}
}
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: calc(100% - 50%);
display: inline-block;
border: 10px solid #fff;
border-top: none;
border-bottom: none;
margin-bottom: 20px;
transition-timing-function: ease-in-out;
transform: translateX(2%);
transition: 1s;
.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;
} }
.fav_fill { .viewset {
position: absolute; width: 45px;
top: 10px; height: 45px;
right: 10px; cursor: pointer;
font-size: 27px; .grid_view {
width: 30px; width: 50%;
height: 30px; height: 100%;
background-image: url('../../assets/fav_fill.png'); cursor: pointer;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 24px; background-size: 15px;
background-image: url('../../assets/Group111_2.png');
}
.line_view {
background-image: url('../../assets/Group110_2.png');
cursor: pointer;
}
} }
img { }
width: 100%; .grid_view {
height: 100%; li {
object-fit: contain; width: 100%;
object-position: center; transition-timing-function: ease-in-out;
transition: 1s;
transform: translateX(0);
.product_image {
height: 390px;
}
} }
} }
h5 { ul {
margin: 0px; padding: 10px;
padding: 0px; padding-bottom: 0px;
color: rgba(59, 57, 77, 1); padding-top: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
p {
margin: 0px; margin: 0px;
padding: 0px; li {
color: rgba(176, 174, 199, 1); width: calc(100% - 50%);
span { display: inline-block;
text-decoration: line-through; border: 10px solid #fff;
margin-left: 10px; border-top: none;
color: rgba(215, 213, 228, 1); border-bottom: none;
} margin-bottom: 20px;
.offer { transition-timing-function: ease-in-out;
color: #fff; transform: translateX(2%);
background-color: rgba(41, 40, 91, 1); transition: 1s;
border-radius: 4px; .product_image {
text-decoration: none; height: 235px;
padding: 3px; position: relative;
font-size: 13px; .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;
}
.fav_fill {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url('../../assets/fav_fill.png');
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 5px;
padding-bottom: 5px;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
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;
}
}
} }
}
} }
} .ellipse {
.ellipse { white-space: nowrap;
white-space: nowrap; width: 180px;
width: 180px; overflow: hidden;
overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; }
}
} }
.sort_wrappper { .sort_wrappper {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 99; z-index: 99;
.sort_inner { .sort_inner {
margin: 0 auto; margin: 0 auto;
width: 280px; width: 280px;
padding: 10px; padding: 10px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
padding-bottom: 15px; padding-bottom: 15px;
background-color: #fff; background-color: #fff;
position: relative; position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); -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); -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); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 25%; top: 25%;
border-radius: 10px; border-radius: 10px;
h4 { h4 {
text-align: center; text-align: center;
color: rgba(59, 57, 77, 1); color: rgba(59, 57, 77, 1);
margin: 0px; margin: 0px;
font-weight: bold; font-weight: bold;
padding: 10px; padding: 10px;
font-size: 18px; font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16); border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px; padding-bottom: 20px;
} }
ul { ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
li { li {
list-style: none; list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16); border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
.styled-checkbox { .styled-checkbox {
position: absolute; // take it out of document flow position: absolute; // take it out of document flow
opacity: 0; // hide it opacity: 0; // hide it
& + label { &+label {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
// Box. // Box.
& + label:before { &+label:before {
content: ''; content: '';
margin-right: 10px; margin-right: 10px;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 5px; border-radius: 5px;
background: white; background: white;
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
} }
&:checked + label:before { &:checked+label:before {
background: #29285b; background: #29285b;
} }
// Disabled state label. // Disabled state label.
&:disabled + label { &:disabled+label {
color: #b8b8b8; color: #b8b8b8;
cursor: auto; cursor: auto;
} }
// Disabled box. // Disabled box.
&:disabled + label:before { &:disabled+label:before {
box-shadow: none; box-shadow: none;
background: #ddd; background: #ddd;
} }
// Checkmark. Could be replaced with an image // Checkmark. Could be replaced with an image
&:checked + label:after { &:checked+label:after {
content: ''; content: '';
position: absolute; position: absolute;
left: 6px; left: 6px;
top: 10px; top: 10px;
background: white; background: white;
width: 2px; width: 2px;
height: 2px; height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 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;
4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; transform: rotate(45deg);
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);
}
} }
}
}
.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);
}
} }
}
} }
.load-back { .load-back {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-image: url('../../assets/giphy.gif'); background-image: url('../../assets/giphy.gif');
background-position: center; background-position: center;
} }
.no-result-wrapper { .no-result-wrapper {
text-align: center; text-align: center;
padding-top: 40%; padding-top: 40%;
img { img {
width: 100px; width: 100px;
} }
h1 { h1 {
font-size: 18px; font-size: 18px;
font-weight: bolder; font-weight: bolder;
text-transform: uppercase; text-transform: uppercase;
color: #3b394d; color: #3b394d;
} }
button { button {
background-color: #29285b; background-color: #29285b;
border-radius: 8px; border-radius: 8px;
height: 50px; height: 50px;
width: 48%; width: 48%;
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
font-weight: lighter; font-weight: lighter;
text-transform: uppercase; text-transform: uppercase;
margin-top: 10px; margin-top: 10px;
} }
} }
\ No newline at end of file
src/app/signup/signup.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()"> <button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png" /> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>SIGN UP</h4> <h4>SIGN UP</h4>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="login_wrapper"> <div class="login_wrapper">
<div class="logo_wrapper"> <div class="logo_wrapper">
<img src="../assets/logo.png" /> <img src="../assets/logo.png" />
</div>
<div class="form_div">
<form #signupForm="ngForm" novalidate>
<div class="row">
<input
class=""
type="text"
placeholder="Your name"
[(ngModel)]="signup.name"
name="name"
#name="ngModel"
required
/>
<div
class="md-errors-spacer"
[hidden]="name.valid || submitted == false"
class="ion-padding-start"
>
Name is required
</div>
</div>
<div class="row">
<input
class=""
type="email"
placeholder="Email Address"
[(ngModel)]="signup.emailId"
name="emailId"
#emailId="ngModel"
email
pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"
required
/>
<div
class="md-errors-spacer"
[hidden]="emailId.valid || submitted == false"
>
<div *ngIf="emailId.errors && emailId.errors.required">
Email is required
</div>
<div *ngIf="emailId.errors && emailId.errors.pattern">
Email is invalid
</div>
</div>
</div>
<div class="row">
<input
class=""
type="text"
placeholder="Phone number"
[(ngModel)]="signup.phone"
name="phone"
#phone="ngModel"
pattern="(\(+61\)|\+61|\(0[1-9]\)|0[1-9])?( ?-?[0-9]){6,9}"
maxlength="10"
required
/>
<div
class="md-errors-spacer"
[hidden]="phone.valid || submitted == false"
>
<div *ngIf="phone.errors && phone.errors.required">
Phone number is required
</div>
<div *ngIf="phone.errors && phone.errors.pattern">
Phone is invalid
</div>
</div>
</div>
<div class="row">
<input
class=""
type="password"
placeholder="Create A Password"
[(ngModel)]="signup.password"
name="password"
#password="ngModel"
minlength="6"
required
/>
<div
class="md-errors-spacer"
[hidden]="password.valid || submitted == false"
>
<div *ngIf="password.errors && password.errors.required">
Password is required
</div>
<div *ngIf="password.errors && password.errors.minlength">
Password must be at least 6 characters
</div>
</div>
</div>
<div class="row">
<ion-datetime
displayFormat="DD-MM-YYYY"
[(ngModel)]="signup.dob"
name="dob"
#dob="ngModel"
placeholder="Date of Birth"
max="{{minDate}}"
required
></ion-datetime>
<div
class="md-errors-spacer"
[hidden]="dob.valid || submitted == false"
>
<div *ngIf="dob.errors && dob.errors.required">DOB is required</div>
</div>
</div> </div>
<div class="row"> <div class="form_div">
<h6> <form #signupForm="ngForm" novalidate>
<input <div class="row">
class="styled-checkbox" <input class="" type="text" placeholder="Your name" [(ngModel)]="signup.name" name="name" #name="ngModel" required />
id="styled-checkbox-1" <div class="md-errors-spacer" [hidden]="name.valid || submitted == false">
type="checkbox" Name is required
value="true" </div>
[(ngModel)]="signup.terms" </div>
required <div class="row">
name="terms" <input class="" type="email" placeholder="Email Address" [(ngModel)]="signup.emailId" name="emailId" #emailId="ngModel" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required />
#terms="ngModel" <div class="md-errors-spacer" [hidden]="emailId.valid || submitted == false">
/> <div *ngIf="emailId.errors && emailId.errors.required">
<label for="styled-checkbox-1" Email is required
><span </div>
>I agree with <div *ngIf="emailId.errors && emailId.errors.pattern">
<a (click)="menuToggle()">Terms and Conditions</a></span Email is invalid
></label </div>
> </div>
</h6> </div>
<div <div class="row">
class="md-errors-spacer" <input class="" type="text" placeholder="Phone number" [(ngModel)]="signup.phone" name="phone" #phone="ngModel" pattern="(\(+61\)|\+61|\(0[1-9]\)|0[1-9])?( ?-?[0-9]){6,9}" maxlength="10" required />
[hidden]="terms.valid || submitted == false" <div class="md-errors-spacer" [hidden]="phone.valid || submitted == false">
> <div *ngIf="phone.errors && phone.errors.required">
<div *ngIf="terms.errors && terms.errors.required"> Phone number is required
Please accept Terms and Conditions </div>
</div> <div *ngIf="phone.errors && phone.errors.pattern">
</div> Phone is invalid
</div> </div>
<div class="row"> </div>
<button class="login_btn" (click)="onSignup(signupForm)"> </div>
<div class="row">
<input class="" type="password" placeholder="Create A Password" [(ngModel)]="signup.password" name="password" #password="ngModel" minlength="6" required />
<div class="md-errors-spacer" [hidden]="password.valid || submitted == false">
<div *ngIf="password.errors && password.errors.required">
Password is required
</div>
<div *ngIf="password.errors && password.errors.minlength">
Password must be at least 6 characters
</div>
</div>
</div>
<div class="row">
<ion-datetime displayFormat="DD-MM-YYYY" [(ngModel)]="signup.dob" name="dob" #dob="ngModel" placeholder="Date of Birth" max="{{minDate}}" required></ion-datetime>
<div class="md-errors-spacer" [hidden]="dob.valid || submitted == false">
<div *ngIf="dob.errors && dob.errors.required">DOB is required</div>
</div>
</div>
<div class="row">
<h6>
<input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="true" [(ngModel)]="signup.terms" required name="terms" #terms="ngModel" />
<label for="styled-checkbox-1"><span>I agree with
<a (click)="menuToggle()">Terms and Conditions</a></span></label>
</h6>
<div class="md-errors-spacer" [hidden]="terms.valid || submitted == false">
<div *ngIf="terms.errors && terms.errors.required">
Please accept Terms and Conditions
</div>
</div>
</div>
<div class="row">
<button class="login_btn" (click)="onSignup(signupForm)">
SIGN UP SIGN UP
</button> </button>
</div>
</form>
<div class="row">
<hr />
<p><span>OR</span></p>
</div>
<div class="row">
<div class="social_div">
<div class="social_btn" style="border-right:1px solid rgba(215, 213, 228, 1);" (click)="register.facebook()">
Facebook
</div>
<div class="social_btn" (click)="register.google(2)">
Google
</div>
</div>
</div>
</div> </div>
</form>
<div class="row">
<hr />
<p><span>OR</span></p>
</div>
<div class="row">
<div class="social_div">
<div
class="social_btn"
style="border-right:1px solid rgba(215, 213, 228, 1);"
(click)="register.facebook()"
>
Facebook
</div>
<div class="social_btn" (click)="register.google(2)">
Google
</div>
</div>
</div>
</div> </div>
</div> <div class="loader" *ngIf="register.loader">
<div class="loader" *ngIf="register.loader"> <div class="lds-ripple">
<div class="lds-ripple"> <div></div>
<div></div> <div></div>
<div></div> </div>
</div> </div>
</div>
</ion-content> </ion-content>
<div class="terms_wrapper" *ngIf="menuShow" [@slideInOut]> <div class="terms_wrapper" *ngIf="menuShow" [@slideInOut]>
<div class="terms_inner"> <div class="terms_inner">
<h5>Terms & Conditions</h5> <h5>Terms & Conditions</h5>
<p> <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
Lorem Ipsum has been the industry's standard dummy text ever since the survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
1500s, when an unknown printer took a galley of type and scrambled it to publishing software like Aldus PageMaker including versions of Lorem Ipsum.
make a type specimen book. It has survived not only five centuries, but </p>
also the leap into electronic typesetting, remaining essentially <button class="accept" (click)="menuToggle()">I Accept</button>
unchanged. It was popularised in the 1960s with the release of Letraset </div>
sheets containing Lorem Ipsum passages, and more recently with desktop </div>
publishing software like Aldus PageMaker including versions of Lorem \ No newline at end of file
Ipsum.
</p>
<button class="accept" (click)="menuToggle()">I Accept</button>
</div>
</div>
src/app/signup/signup.page.scss
...@@ -16,23 +16,43 @@ ...@@ -16,23 +16,43 @@
input { input {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: rgba(215, 213, 228, 1); color: #000;
width: 100%; width: 100%;
height: 45px; height: 45px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 16px;
outline: none;
transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
}
.md-errors-spacer {
color: #c76969;
font-size: 14px;
} }
ion-datetime { ion-datetime {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: rgba(215, 213, 228, 1); color: #000;
width: 100%; width: 100%;
height: 45px; height: 45px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 16px;
padding-left: 0px; padding-left: 0px;
&::placeholder {
color: rgba(215, 213, 228, 1) !important;
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
} }
.login_btn { .login_btn {
width: 100%; width: 100%;
......
src/app/verification/verification.page.scss
...@@ -8,12 +8,21 @@ ...@@ -8,12 +8,21 @@
input { input {
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
background: transparent; background: transparent;
color: rgba(215, 213, 228, 1); color: #000;
width: 100%; width: 100%;
height: 45px; height: 45px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 16px;
outline: none;
transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
} }
.login_btn { .login_btn {
width: 100%; width: 100%;
......
src/config/auth.service.ts
...@@ -40,7 +40,7 @@ export class AuthService { ...@@ -40,7 +40,7 @@ export class AuthService {
this.SetUserData(user); this.SetUserData(user);
this.loader = false; this.loader = false;
if (this.type === 1) { if (this.type === 1) {
this.router.navigateByUrl('home'); // this.router.navigateByUrl('home');
} else { } else {
this.router.navigateByUrl('verification'); this.router.navigateByUrl('verification');
} }
......
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