Skip to content

G
getme
Commit 9e070769 by Adarsh K
Options

latest push

parents 28c6ade0 e34368fe
Showing with 1571 additions and 1421 deletions
src/app/app.component.html
......@@ -87,9 +87,13 @@
(click)="setActive3()"
></div>
</li>
<!-- <li (click)="goToPage('cart')">
<div class="icon_sec m4_icon" [class.m4_icon_act]="sec_active4" (click)="setActive4()"></div>
</li> -->
<li (click)="goToPage('cart')">
<div
class="icon_sec m4_icon"
[class.m4_icon_act]="sec_active4"
(click)="setActive4()"
></div>
</li>
<li (click)="goToPage('myorder')">
<div
class="icon_sec m5_icon"
......
src/app/app.component.scss
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
* {
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
}
.side_menu_wrapper {
background: rgba(41, 40, 91, 1);
width: 100%;
height: 100vh;
padding-left: 20px;
padding-top: 20px;
padding-right: 10px;
.top_banner {
.top_image {
width: 60px;
height: 60px;
float: left;
border-radius: 50%;
background-color: #fff;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
.top_detail {
width: calc(100% - 60px);
float: left;
padding: 7px;
padding-left: 15px;
h4 {
margin: 0px;
padding: 0px;
color: #fff;
}
p {
margin: 0px;
padding: 0px;
color: #fff;
color: rgba(176, 174, 199, 1);
}
background: rgba(41, 40, 91, 1);
width: 100%;
height: 100vh;
padding-left: 20px;
padding-top: 20px;
padding-right: 10px;
.top_banner {
.top_image {
width: 60px;
height: 60px;
float: left;
border-radius: 50%;
background-color: #fff;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
.top_detail {
width: calc(100% - 60px);
float: left;
padding: 7px;
padding-left: 15px;
h4 {
margin: 0px;
padding: 0px;
color: #fff;
}
p {
margin: 0px;
padding: 0px;
color: #fff;
color: rgba(176, 174, 199, 1);
}
}
}
}
}
.sidemenu_list {
padding-top: 30px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: #fff;
font-weight: 200;
font-size: 15px;
padding: 10px;
font-size: 16px;
&:focus {
background-color: rgba(40, 36, 88, 1);
}
&:hover {
background-color: rgba(40, 36, 88, 1);
}
.version {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
}
.sub_menu {
padding-left: 25px;
margin-bottom: 40px;
padding-top: 10px;
ul {
padding-top: 30px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: rgba(176, 174, 199, 1);
list-style: none;
color: #fff;
font-weight: 200;
font-size: 15px;
padding: 10px;
font-size: 16px;
&:focus {
background-color: rgba(40, 36, 88, 1);
}
&:hover {
background-color: rgba(40, 36, 88, 1);
}
.version {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
}
.sub_menu {
padding-left: 25px;
margin-bottom: 40px;
padding-top: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: rgba(176, 174, 199, 1);
}
}
}
}
}
}
}
.common_tab {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 50px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
-moz-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
ul {
margin: 0px;
padding: 0px;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
li {
list-style: none;
display: inline-block;
width: 20%;
height: 100%;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
}
.icon_sec {
width: 50px;
height: 50px;
background-image: url('../assets/icon_sprite.png');
margin: 0 auto;
background-repeat: no-repeat;
background-size: 450px;
}
.m1_icon {
background-position: top -6px left -249px;
}
.m1_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -249px;
}
.m2_icon {
background-position: top -3px left -88px;
}
.m2_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -3px left -88px;
}
.m3_icon {
background-position: top -6px left -167px;
}
.m3_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -167px;
}
.m4_icon {
background-position: top -6px left -5px;
}
.m4_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -5px;
}
.m5_icon {
background-position: top -6px left -325px;
}
.m5_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -325px;
}
.m6_icon {
background-position: top -6px left -398px;
}
.m6_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -398px;
height: 50px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
-moz-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
ul {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
li {
list-style: none;
display: inline-block;
height: 100%;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
}
.icon_sec {
width: 50px;
height: 50px;
background-image: url('../assets/icon_sprite.png');
margin: 0 auto;
background-repeat: no-repeat;
background-size: 450px;
}
.m1_icon {
background-position: top -6px left -249px;
}
.m1_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -249px;
}
.m2_icon {
background-position: top -3px left -88px;
}
.m2_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -3px left -88px;
}
.m3_icon {
background-position: top -6px left -167px;
}
.m3_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -167px;
}
.m4_icon {
background-position: top -6px left -5px;
}
.m4_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -5px;
}
.m5_icon {
background-position: top -6px left -325px;
}
.m5_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -325px;
}
.m6_icon {
background-position: top -6px left -398px;
}
.m6_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -398px;
}
}
}
}
}
\ No newline at end of file
src/app/app.component.ts
......@@ -89,10 +89,6 @@ export class AppComponent {
});
}
hideTab() {
alert('asdasdas');
}
async finishpop(data: any) {
const modal = await this.modalController.create({
component: DeliverypopPage,
......
src/app/cart/cart.page.html
......@@ -29,7 +29,11 @@
</ul>
</div>
<div class="cart_content">
<ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()">
<ion-slides
pager="false"
[options]="cartwizard"
(ionSlideDidChange)="slideChanged()"
>
<ion-slide>
<div class="cart_list" *ngIf="cartService.carts">
<ul *ngIf="cartService.carts.length > 0">
......@@ -63,7 +67,10 @@
</ion-col>
</ion-row>
</div>
<div class="no-items-wrapper" *ngIf="cartService.carts.length == 0">
<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>
......@@ -74,10 +81,15 @@
<div class="checkout_list">
<h5>
<span class="floatLeft">ITEMS</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</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-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>
......@@ -116,39 +128,67 @@
<div class="clear"></div>
</h5>
<div class="payment_method">
<input type="radio" name="payments" id="cod" name="radio-group" checked="true" (click)="getwaycod()" />
<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()" />
<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">
<!-- <div class="card_div" [hidden]="gateway !=1">
<input class="card_no borderNone widthFull" placeholder="PayPal ID" />
</div>
</div> -->
<div class="payment_method">
<input type="radio" name="payments" id="afterpay" name="radio-group" (click)="getwayafterpay()" />
<input
type="radio"
name="payments"
id="afterpay"
name="radio-group"
(click)="getwayafterpay()"
/>
<label for="afterpay">
<p>AfterPay</p>
</label>
</div>
<div class="card_div" [hidden]="gateway !=2">
<!-- <div class="card_div" [hidden]="gateway !=2">
<input class="card_no" placeholder="**** **** **** 1458" />
<input class="cv_number" placeholder="CVV" />
</div>
</div> -->
<div class="payment_method">
<input type="radio" name="payments" id="payk" name="radio-group" (click)="getwaypayk()" />
<input
type="radio"
name="payments"
id="payk"
name="radio-group"
(click)="getwaypayk()"
/>
<label for="payk">
<p>PayK</p>
</label>
</div>
<div class="card_div" [hidden]="gateway !=3">
<input class="card_no borderNone widthFull" placeholder="PafyK ID" />
</div>
<!-- <div class="card_div" [hidden]="gateway !=3">
<input
class="card_no borderNone widthFull"
placeholder="PafyK ID"
/>
</div> -->
<!-- <div class="delivery_time">
<ul>
<li>
......@@ -163,30 +203,39 @@
</div> -->
<hr />
<div class="coupon_code">
<input class="" placeholder="COUPON CODE: GET50" #promo /><button class="add_btn"
(click)="promoApply(promo.value)">
ADD
<input
class=""
placeholder="COUPON CODE: GET50"
#promo
/><button class="add_btn" (click)="promoApply(promo.value)">
APPLY
</button>
<span *ngIf="discountApplied" style="color: red">Promocode applied successfully
<span *ngIf="discountApplied" style="color: red"
>Promocode applied successfully
</span>
</div>
<br />
<h6>
<span class="floatLeft">PRODUCT COST</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span>
<span class="floatRight" *ngIf="cartService.cartTotal"
>A$ {{cartService.cartTotal}}</span
>
<div class="clear"></div>
</h6>
<h6>
<span class="floatLeft">DELIVERY CHARGE</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$
{{getDeliveryCharge(cartService.cartTotal)}}</span>
<span class="floatRight" *ngIf="cartService.cartTotal"
>A$ {{getDeliveryCharge(cartService.cartTotal)}}</span
>
<div class="clear"></div>
</h6>
<h6>
<span class="floatLeft">GST/TAX</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{getTax(cartService.cartTotal)}}</span>
<span class="floatRight" *ngIf="cartService.cartTotal"
>A$ {{getTax(cartService.cartTotal)}}</span
>
<div class="clear"></div>
</h6>
<h6 *ngIf="discountApplied">
......@@ -215,9 +264,10 @@
<h4>Order Placed</h4>
<p>{{bookDate}}</p>
<h3>The product will be delivered in</h3>
<h1>60:00 Mins</h1>
<h1>{{deliveryTime}} Mins</h1>
<button class="view_order" (click)="goToPage('myorder')">
VIEW ORDERS</button><br />
VIEW ORDERS</button
><br />
<button class="home_btn" (click)="goToPage('home')">HOME</button>
</div>
</ion-slide>
......@@ -227,14 +277,22 @@
</div>
</ion-content>
<ion-footer>
<div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
<div
class="footer_btnbay"
*ngIf="cartService.carts && cartService.carts.length > 0"
[hidden]="currentIndex != 0"
>
<div class="continue" (click)="goToPage('productlist')">
CONTINUE SHOPPING
</div>
<div class="checkout" (click)="next(1)">CHECKOUT</div>
</div>
<div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1"
(click)="next(2);">
<div
class="footer_btn"
*ngIf="cartService.carts && cartService.carts.length > 0"
[hidden]="currentIndex != 1"
(click)="next(2);"
>
PAY
</div>
<!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
......@@ -250,7 +308,10 @@
<div *ngIf="isShow" [@slideInOut]>
<div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle(); setAddress()">
<button
class="nav_btn nav_back floatLeft"
(click)="istoggle(); setAddress()"
>
<img src="../assets/Group17_2.png" />
</button>
<div class="nav_title floatLeft">
......@@ -259,23 +320,40 @@
<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-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>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')"
>ADD NEW</span
>
<div class="clear"></div>
</h5>
<ul *ngIf="addressService.addressList && addressService.addressList.length > 0">
<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" />
<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">
......@@ -288,4 +366,4 @@
</ul>
</div>
</ion-content>
</div>
\ No newline at end of file
</div>
src/app/cart/cart.page.ts
......@@ -48,6 +48,7 @@ export class CartPage implements OnInit {
discount: number;
totalAmt: number;
bookDate: any;
timeinterval: any;
constructor(
private router: Router,
......@@ -59,6 +60,7 @@ export class CartPage implements OnInit {
public service: ServiceService,
public addressService: AddressService
) {
console.log('cart loaded');
this.bookDate = this.formatDate();
this.currentIndex = 0;
this.count = 1;
......@@ -67,7 +69,7 @@ export class CartPage implements OnInit {
this.taxAmount = 0;
this.discountApplied = false;
this.discount = 0;
this.cartService.cartList();
// this.cartService.cartList();
this.loader = true;
const users = this.service.get('user').then(data => {
if (data) {
......@@ -86,6 +88,15 @@ export class CartPage implements OnInit {
this.setAddress();
}
ionViewWillEnter() {
const users = this.service.get('user').then(data => {
if (data) {
data = JSON.parse(data);
this.cartService.cartList();
}
});
}
setAddress() {
if (this.addressService.addressList.length > 0) {
let address = this.addressService.addressList.find(
......@@ -171,6 +182,10 @@ export class CartPage implements OnInit {
.checkOut(this.cartService.carts, otherCharges)
.then(data => {
console.log('ready for slide');
const timeStamp = Math.floor(Date.now() / 1000);
this.timeinterval = setInterval(() => {
this.getDeliveryTime(timeStamp);
}, 1000);
this.slides.slideNext();
});
} else {
......@@ -181,6 +196,31 @@ export class CartPage implements OnInit {
}
}
getDeliveryTime(timeStamp) {
console.log(timeStamp);
const endDate = new Date(timeStamp * 1000);
console.log(endDate);
endDate.setHours(endDate.getHours() + 1);
const t = this.getTimeRemaining(endDate, new Date());
const minutes = t.minutes < 10 ? '0' + t.minutes : t.minutes;
const seconds = t.seconds < 10 ? '0' + t.seconds : t.seconds;
this.deliveryTime = minutes + ' : ' + seconds;
if (t.t <= 0) {
clearInterval(this.timeinterval);
}
}
getTimeRemaining(endtime, currDate) {
const t = Date.parse(endtime) - Date.parse(currDate);
const seconds = Math.floor((t / 1000) % 60);
const minutes = Math.floor((t / 1000 / 60) % 60);
return {
t,
minutes,
seconds
};
}
prev() {
this.slides.slidePrev();
}
......
src/app/home/home.page.html
<div class="nav_header">
<ion-menu-toggle>
<button class="nav_btn nav_menu floatLeft"></button>
</ion-menu-toggle>
<ion-menu-toggle>
<button class="nav_btn nav_menu floatLeft"></button>
</ion-menu-toggle>
<div class="nav_title floatLeft relative">
<!-- <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> -->
<div class="nav_title floatLeft relative">
<!-- <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> -->
<input
class="search_bar"
placeholder="Search here.. eg:shirts, retailers etc..."
(click)="searchModal()"
/>
</div>
<button
class="nav_btn nav_search floatRight"
*ngIf="!searchShow"
(click)="searchModal()"
></button>
<button
class="nav_btn nav_close floatRight"
*ngIf="searchShow"
(click)="searchClose()"
></button>
<div class="clear"></div>
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="searchModal()" />
</div>
<button class="nav_btn nav_search floatRight" *ngIf="!searchShow" (click)="searchModal()"></button>
<button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></button>
<div class="clear"></div>
</div>
<ion-content>
<div class="home_wrapper">
<div class="home_banner">
<div class="home_banner_title">
<ion-row>
<ion-col class="textLeft">
<img src="../assets/Group 11_2.png" />
</ion-col>
<ion-col class="textRight">
<p class="floatRight" (click)="istoggle()">{{address}}</p>
</ion-col>
</ion-row>
</div>
<ion-slides
pager="true"
*ngIf="centerService.centers && centerService.centers.length > 0"
>
<ion-slide *ngFor="let center of centerService.centers">
<div class="banner_slide" (click)="goToPage('storelist', center)">
<h5>{{center.centerName}}</h5>
<p>{{center.description}}</p>
</div>
<img
[src]="center.centerImg"
onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'"
/>
</ion-slide>
</ion-slides>
</div>
<div class="home_sub_header">
Featured Stores
</div>
<div class="featured_slider">
<ion-slides
pager="false"
[options]="slideOpts"
*ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0"
>
<ion-slide *ngFor="let shopper of shopperService.activeshoppers">
<div
class="feature_product"
(click)="goToPage('productlist', shopper)"
>
<img
[src]="shopper.featuredImage"
onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'"
/>
<div class="feature_overlay">
<h5>{{shopper.name}}</h5>
<p>{{shopper.caption}}</p>
<div class="home_wrapper">
<div class="home_banner">
<div class="home_banner_title">
<ion-row>
<ion-col class="textLeft">
<img src="../assets/Group 11_2.png" />
</ion-col>
<ion-col class="textRight">
<p class="floatRight" (click)="istoggle()">{{address}}</p>
</ion-col>
</ion-row>
</div>
</div>
</ion-slide>
<!-- <ion-slide>
<ion-slides pager="true" *ngIf="centerService.centers && centerService.centers.length > 0">
<ion-slide *ngFor="let center of centerService.centers">
<div class="banner_slide" (click)="goToPage('storelist', center)">
<h5>{{center.centerName}}</h5>
<p>{{center.description}}</p>
</div>
<img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'" />
</ion-slide>
</ion-slides>
</div>
<div class="home_sub_header">
Featured Stores
</div>
<div class="featured_slider">
<ion-slides pager="false" [options]="slideOpts" *ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0">
<ion-slide *ngFor="let shopper of shopperService.activeshoppers">
<div class="feature_product" (click)="goToPage('productlist', shopper)">
<img [src]="shopper.featuredImage" onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'" />
<div class="feature_overlay">
<h5>{{shopper.name}}</h5>
<p>{{shopper.caption}}</p>
</div>
</div>
</ion-slide>
<!-- <ion-slide>
<div class="feature_product" (click)="goToPage('productlist')">
<img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png">
<div class="feature_overlay">
......@@ -86,122 +58,85 @@
</div>
</div>
</ion-slide> -->
</ion-slides>
</div>
<div class="home_sub_header">
<span class="floatLeft">Nearby Shopping Centers</span>
<span class="floatRight">
</ion-slides>
</div>
<div class="home_sub_header">
<span class="floatLeft">Nearby Shopping Centers</span>
<span class="floatRight">
<div class="nearby_icon" (click)="goToPage('nearby')"></div>
</span>
<div class="clear"></div>
</div>
<div class="nearby_shop_list">
<ul
*ngIf="centerService.nearcenters && centerService.nearcenters.length > 0"
>
<li
*ngFor="let center of centerService.nearcenters"
(click)="goToPage('storelist', center)"
>
<div class="nearby_image">
<img
[src]="center.centerImg"
onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'"
/>
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">{{center.centerName}}</span>
<span class="floatRight"
>0
<div class="clear"></div>
</div>
<div class="nearby_shop_list">
<ul *ngIf="centerService.nearcenters && centerService.nearcenters.length > 0">
<li *ngFor="let center of centerService.nearcenters" (click)="goToPage('storelist', center)">
<div class="nearby_image">
<img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'" />
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">{{center.centerName}}</span>
<span class="floatRight">0
<img src="../assets/Path61_2.png" />
</span>
<div class="clear"></div>
</h5>
<p>{{center.description}}</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="home_sub_header">
Featured Catagories
</div>
<div class="featured_catagory_list">
<ul
*ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0"
>
<li
*ngFor="let categories of categoriesService.activecategories"
(click)="goToPage('catstorelist', categories)"
>
<img
[src]="categories.catImage"
onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'"
/>
<div class="featured_overlay">
<h4>{{categories.catName}}</h4>
</div>
</li>
</ul>
<div class="clear"></div>
</h5>
<p>{{center.description}}</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="home_sub_header">
Featured Catagories
</div>
<div class="featured_catagory_list">
<ul *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0">
<li *ngFor="let categories of categoriesService.activecategories" (click)="goToPage('catstorelist', categories)">
<img [src]="categories.catImage" onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'" />
<div class="featured_overlay">
<h4>{{categories.catName}}</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</ion-content>
<div *ngIf="isShow" [@slideInOut]>
<div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle()">
<div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle()">
<img src="../assets/Group17_2.png" />
</button>
<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="nav_title floatLeft">
<h4>CHANGE LOCATION</h4>
</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)"
[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>
<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>
</h5>
<ul class="address-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)" [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/home/home.page.scss
.home_wrapper {
width: 100%;
padding-bottom: 50px;
.home_banner {
width: 100%;
height: 300px;
padding-top: 80px;
position: relative;
background-color: #fff;
.home_banner_title {
padding: 10px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
img {
width: 100px;
}
p {
margin: 0px;
text-align: right;
background-image: url('../../assets/Path 55_2.png');
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
}
ion-slides {
width: 100%;
height: 100%;
ion-slide {
padding-bottom: 50px;
.home_banner {
width: 100%;
height: 100%;
height: 300px;
padding-top: 80px;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
background-color: #fff;
.home_banner_title {
padding: 10px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
img {
width: 100px;
}
p {
margin: 0px;
text-align: right;
background-image: url('../../assets/Path 55_2.png');
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
}
.banner_slide {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
padding-top: 160px;
padding-left: 20px;
padding-right: 20px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 5px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ion-slides {
width: 100%;
height: 100%;
ion-slide {
width: 100%;
height: 100%;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner_slide {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
padding-top: 160px;
padding-left: 20px;
padding-right: 20px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 5px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
}
.home_sub_header {
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
.nearby_icon {
width: 25px;
height: 25px;
background-image: url('../../assets/location.png');
background-position: center;
background-size: contain;
}
}
.featured_slider {
padding-left: 10px;
padding-right: 10px;
.feature_product {
width: 100%;
height: 130px;
position: relative;
background-color: #a8a8a8;
border: 2px solid #fff;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.feature_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
padding: 15px;
padding-top: 60px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 2px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.home_sub_header {
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
.nearby_icon {
width: 25px;
height: 25px;
background-image: url('../../assets/location.png');
background-position: center;
background-size: contain;
}
}
}
}
.nearby_shop_list {
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 125px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
.featured_slider {
padding-left: 10px;
padding-right: 10px;
.feature_product {
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;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 130px;
position: relative;
background-color: #a8a8a8;
border: 2px solid #fff;
img {
width: 16px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.feature_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
padding: 15px;
padding-top: 60px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 2px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
.featured_catagory_list {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
position: relative;
height: 120px;
width: 100%;
border-radius: 8px;
margin-bottom: 10px;
&:nth-child(odd) {
text-align: left;
}
&:nth-child(even) {
text-align: right;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
.nearby_shop_list {
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 125px;
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;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.featured_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 45px;
padding-left: 20px;
padding-right: 20px;
h4 {
}
.featured_catagory_list {
padding: 10px;
ul {
margin: 0px;
font-size: 26px;
font-weight: 900;
}
padding: 0px;
li {
list-style: none;
position: relative;
height: 120px;
width: 100%;
border-radius: 8px;
margin-bottom: 10px;
&:nth-child(odd) {
text-align: left;
}
&:nth-child(even) {
text-align: right;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.featured_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 45px;
padding-left: 20px;
padding-right: 20px;
h4 {
margin: 0px;
font-size: 26px;
font-weight: 900;
}
}
}
}
}
}
}
}
.sort_wrappper {
height: 100vh;
width: 100%;
background: #fff;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99;
agm-map {
width: 100%;
height: 100vh;
}
.add_address_wrapper {
width: 100%;
background: #fff;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99;
agm-map {
width: 100%;
height: 100vh;
}
}
.add_address_wrapper {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
padding: 20px;
padding: 20px 20px 50px 20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background: #fff;
......@@ -271,77 +273,63 @@
-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;
}
.add_address_wrapper {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
padding: 20px 20px 50px 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;
}
.styled-checkbox {
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
& + label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
&+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: 50%;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
&:checked + label:before {
background: #29285b;
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled + label {
color: #b8b8b8;
cursor: auto;
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled + label:before {
box-shadow: none;
background: #ddd;
&: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);
&: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);
}
}
}
}
}
.address-ul {
padding-left: 0 !important;
li {
list-style: none;
}
}
\ No newline at end of file
src/app/nearby/nearby.page.scss
.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: 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;
height: 100%;
position: relative;
}
.click_marker {
min-width: 200px;
padding: 10px;
h5 {
margin: 0px;
padding: 0px;
}
.click_marker {
min-width: 200px;
padding: 10px;
h5 {
margin: 0px;
padding: 0px;
}
p {
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;
}
p {}
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;
}
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;
}
p {
}
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
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);
}
}
src/app/ordercancelled/ordercancelled.page.html
<ion-content>
<div class="cart_wrapper">
<div class="cart_head">
<div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
<img src="../assets/arrow_white.png">
<div class="cart_wrapper" *ngIf="data">
<div class="cart_head">
<div class="nav_header">
<button
class="nav_btn nav_back_white floatLeft"
(click)="goToPage('myorder')"
>
<img src="../assets/arrow_white.png" />
</button>
<div class="nav_title floatLeft">
<h4></h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
<img [src]="data.product[0].image" onerror="this.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 class="nav_title floatLeft">
<h4></h4>
</div>
<div class="related_product_slider">
<button class="nav_btn floatRight"></button>
<div class="clear"></div>
</div>
<img onerror="this.src='../assets/[email protected]'" />
<h4>ORDER CANCELLED</h4>
<p>{{orderCancelled | date:'MMMM dd, y'}}</p>
</div>
<div class="nearby_shop_list">
<ul>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img
[src]="data.product[0].image"
onerror="this.src='../assets/[email protected]'"
/>
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Related Products</span><span class="floatRight">MORE</span>
<div class="clear"></div>
<span class="floatLeft">{{data.shopperName}}</span>
<span class="floatRight"
>4
<img src="../assets/Path61_2.png" />
</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>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
\ No newline at end of file
<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></h5>
<h5>Delivery time : <span> 1 hour</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)="goToPage('ordercancelled')"
>
BUY NOW
</button> -->
<!-- <hr /> -->
</div>
<!-- <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>
src/app/ordercancelled/ordercancelled.page.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
import { ServiceService } from './../../config/service.service';
@Component({
selector: 'app-ordercancelled',
templateUrl: './ordercancelled.page.html',
styleUrls: ['./ordercancelled.page.scss'],
styleUrls: ['./ordercancelled.page.scss']
})
export class OrdercancelledPage implements OnInit {
data: any;
orderCancelled = new Date();
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
private location: Location,
private service: ServiceService
) {
this.service.get('order').then(val => {
this.data = val;
});
}
ngOnInit() {}
relatedProd = {
slidesPerView: 2
}
};
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
......@@ -29,6 +35,5 @@ export class OrdercancelledPage implements OnInit {
goBack() {
this.location.back();
}
}
}
src/app/orderplaced/orderplaced.page.html
......@@ -89,7 +89,10 @@
Amount : <strong>A$ {{product.price}}</strong
><span class="afterpay">COD</span>
</h5>
<h5>Delivery time : <span>{{deliveryTime}}</span></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}},
......@@ -97,10 +100,14 @@
{{data.deliveryAddress.building}}, <br />
{{data.deliveryAddress.landmark}}
</h5>
<button class="cancel_btn" (click)="goToPage('ordercancelled')">
<button
class="cancel_btn"
(click)="cancellOrder(data.orderId)"
*ngIf="cancelDelivery > 0 && data.orderStatus != 0 && data.orderStatus != 8"
>
CANCEL THIS ORDER
</button>
<hr />
<!-- <hr /> -->
</div>
<!-- <div class="related_product_slider">
......
src/app/orderplaced/orderplaced.page.ts
......@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
import { ServiceService } from './../../config/service.service';
import { MyordersService } from './../../config/myorder.service';
@Component({
selector: 'app-orderplaced',
......@@ -10,12 +11,14 @@ import { ServiceService } from './../../config/service.service';
})
export class OrderplacedPage implements OnInit {
deliveryTime: any;
cancelDelivery: any;
timeinterval: any;
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location,
private service: ServiceService
private service: ServiceService,
private myOrder: MyordersService
) {
this.deliveryTime = '';
this.service.get('order').then(val => {
......@@ -47,6 +50,7 @@ export class OrderplacedPage implements OnInit {
getTimeRemaining(endtime, currDate) {
const t = Date.parse(endtime) - Date.parse(currDate);
this.cancelDelivery = t;
const seconds = Math.floor((t / 1000) % 60);
const minutes = Math.floor((t / 1000 / 60) % 60);
return {
......@@ -66,4 +70,55 @@ export class OrderplacedPage implements OnInit {
goBack() {
this.location.back();
}
cancellOrder(orderId) {
console.log(orderId);
this.myOrder.cancelOrder(orderId).then(() => {
this.service.showToast('Order cancelled!', 'top', 'my-toast', 1000);
const This = this;
setTimeout(() => {
This.goToPage('ordercancelled');
}, 1100);
});
}
getStatus(status: number) {
switch (status) {
case 1:
return 'Booked';
break;
case 2:
return 'Shop Accepted';
break;
case 3:
return 'Rider Assigned';
break;
case 4:
return 'Reached Shop';
break;
case 5:
return 'Picked Up';
break;
case 6:
return 'Reached Location';
break;
case 7:
return 'Delivered';
break;
case 9:
return 'Completed';
break;
case 8:
return 'Rejected';
break;
case 10:
return 'Not Received';
break;
case 0:
return 'Cancelled';
break;
default:
return 'Finished';
}
}
}
src/app/productdetail/productdetail.page.ts
......@@ -134,7 +134,7 @@ export class ProductdetailPage implements OnInit {
if (type === 1) {
this.router.navigateByUrl('cart');
} else {
// alert('Product added to cart');
this.service.showToast('Added into cart', 'top', 'my-toast', 2000);
}
this.cartService.cartList();
});
......
src/app/profile/profile.page.html
......@@ -42,14 +42,16 @@
<ion-col class="textLeft p0">
<p>
Phone
<span *ngIf="loggedUser.phoneVerified == true">Verified</span>
<span *ngIf="loggedUser.phoneVerified == false"
>Not Verified yet</span
>
</p>
</ion-col>
<ion-col class="textRight p0">
<h6>{{loggedUser.phone}}</h6>
<span class="ar-span" *ngIf="loggedUser.phoneVerified == true"
>Verified</span
>
<span class="ar-span" *ngIf="loggedUser.phoneVerified == false"
>Not Verified yet</span
>
</ion-col>
</ion-row>
</div>
......@@ -57,16 +59,17 @@
<ion-row>
<ion-col class="textLeft p0">
<p>
Email<span *ngIf="userData && userData.emailVerified == true"
>Verified</span
>
<span *ngIf="loggedUser.emailVerified == false"
>Not Verified yet</span
>
Email
</p>
</ion-col>
<ion-col class="textRight p0">
<h6>{{loggedUser.emailId}}</h6>
<span class="ar-span" *ngIf="loggedUser.emailVerified == true"
>Verified</span
>
<span class="ar-span" *ngIf="loggedUser.emailVerified == false"
>Not Verified yet</span
>
</ion-col>
</ion-row>
</div>
......
src/app/profile/profile.page.scss
.profile_wrapper {
.profile_banner {
.profile_banner {
width: 100%;
background-image: url('../../assets/profile_banner.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding-top: 40px;
.profile_circle {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
position: relative;
margin: 0 auto;
img {
width: 100%;
background-image: url('../../assets/profile_banner.png');
background-position: center;
background-repeat: no-repeat;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
input {
width: 80px;
height: 100%;
opacity: 0;
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.edit {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
object-position: center;
background-color: #000;
background-image: url('../../assets/edit_icon.png');
background-size: cover;
text-align: center;
padding-top: 40px;
.profile_circle {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
position: relative;
margin: 0 auto;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
input {
width: 80px;
height: 100%;
opacity: 0;
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.edit {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
object-position: center;
background-color: #000;
background-image: url('../../assets/edit_icon.png');
background-size: cover;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
}
}
h5 {
text-align: center;
color: #fff;
margin: 0px;
padding-top: 15px;
font-weight: 600;
padding-bottom: 5px;
}
p {
color: rgba(206, 153, 76, 1);
text-align: center;
margin: 0px;
padding-bottom: 20px;
font-weight: 700;
}
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
}
}
.account_wrapper {
width: calc(100% - 40px);
margin: 0 auto;
padding-top: 20px;
padding-bottom: 100px;
.account_header {
padding-bottom: 15px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
}
span {
color: rgba(59, 57, 77, 1);
img {
width: 20px;
}
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-size: 18px;
ion-icon {
color: rgba(176, 174, 199, 1);
}
h5 {
text-align: center;
color: #fff;
margin: 0px;
padding-top: 15px;
font-weight: 600;
padding-bottom: 5px;
}
p {
color: rgba(206, 153, 76, 1);
text-align: center;
margin: 0px;
padding-bottom: 20px;
font-weight: 700;
}
}
.account_wrapper {
width: calc(100% - 40px);
margin: 0 auto;
padding-top: 20px;
padding-bottom: 100px;
.account_header {
padding-bottom: 15px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
}
span {
color: rgba(59, 57, 77, 1);
img {
width: 20px;
}
.row {
padding-bottom: 20px;
}
}
.ar-span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-size: 18px;
ion-icon {
color: rgba(176, 174, 199, 1);
}
}
.row {
padding-bottom: 20px;
}
hr {
border-bottom: 1px solid rgba(176, 174, 199, 0.5);
height: 0px;
border-top: none;
margin-top: 15px;
margin-bottom: 15px;
}
}
.logout-pop-wrapper {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.logout_inner {
margin: 0 auto;
width: 280px;
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: 50%;
border-radius: 10px;
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;
}
p {
text-align: center;
}
.logout_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
text-transform: uppercase;
}
hr {
border-bottom: 1px solid rgba(176, 174, 199, 0.5);
height: 0px;
border-top: none;
margin-top: 15px;
margin-bottom: 15px;
.btn-cancel {
border: 1px solid #29285b;
background-color: #29285b;
}
}
.logout-pop-wrapper {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.logout_inner {
margin: 0 auto;
width: 280px;
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: 50%;
border-radius: 10px;
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;
}
p {
text-align: center;
}
.logout_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
text-transform: uppercase;
}
.btn-cancel {
border: 1px solid #29285B;
background-color: #29285B;
}
.btn-logout {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.16);
color: #000;
}
}
.btn-logout {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.16);
color: #000;
}
}
}
}
\ No newline at end of file
}
}
src/config/cart.service.ts
......@@ -121,6 +121,7 @@ export class CartsService {
}
public async cartList() {
console.log('called');
const cartRef: AngularFirestoreCollection<any> = this.afs.collection(
'carts',
ref => ref.where('custId', '==', this.custId)
......
src/config/myorder.service.ts
......@@ -79,6 +79,20 @@ export class MyordersService {
});
}*/
public async cancelOrder(orderId) {
const promise = new Promise(resolve => {
this.afs
.collection('orders')
.doc(orderId)
.update({
orderStatus: 0,
cancelTime: firebase.firestore.FieldValue.serverTimestamp()
});
resolve(true);
});
return promise;
}
public async orderList(custId) {
// console.log('called');
// console.log(custId);
......@@ -86,7 +100,7 @@ export class MyordersService {
this.orders = [];
const orderRef: AngularFirestoreCollection<any> = this.afs.collection(
'orders',
ref => ref.where('custId', '==', custId).orderBy('bookDate', 'desc')
ref => ref.where('custId', '==', custId).orderBy('orderDate', 'desc')
);
orderRef.stateChanges().subscribe(value => {
// console.log(value);
......@@ -100,6 +114,7 @@ export class MyordersService {
const order: Myorder = {
amount: item.amount,
status: item.status,
orderDate: item.orderDate,
orderStatus: item.orderStatus,
bookDate: item.bookDate,
deliveryLocation: item.deliveryLocation,
......@@ -122,6 +137,7 @@ export class MyordersService {
}
}
});
this.orders.sort((a, b) => Number(b.orderDate) - Number(a.orderDate));
// console.log(this.orders);
}
});
......
src/config/order.service.ts
......@@ -170,6 +170,7 @@ export class OrdersService {
deliveryCharge: 'A$ ' + otherCharge.deliveryCharge,
deliveryLocation: delivery,
bookDate: firebase.firestore.FieldValue.serverTimestamp(),
orderDate: Math.floor(Date.now() / 1000),
orderCode: this.orderCode(),
orderId: neworderId,
orderStatus: 1,
......
src/config/services/myorder.ts
export interface Myorder {
amount: string;
bookDate: any;
pickupLocation: any;
deliveryLocation: any;
deliveryAddress: any;
status: number;
orderStatus: number;
riderName: string;
orderId: string;
time: string;
product: any;
orderCode: string;
amount: string;
bookDate: any;
orderDate: any;
pickupLocation: any;
deliveryLocation: any;
deliveryAddress: any;
status: number;
orderStatus: number;
riderName: string;
orderId: string;
time: string;
product: any;
orderCode: string;
}
src/config/services/order.ts
......@@ -29,45 +29,43 @@
}*/
export interface CartProd {
prodName: any;
prodId: string;
image: string;
size: string;
color: string;
qty: number;
discount: string;
price: string;
productDoc: any;
prodName: any;
prodId: string;
image: string;
size: string;
color: string;
qty: number;
discount: string;
price: string;
productDoc: any;
}
export interface Order {
amount: string;
customer: any;
custName: string;
deliveryAddress: string;
deliveryCharge: string;
deliveryLocation: object;
orderCode: string;
orderId: string;
orderStatus: number;
pickupAddress: string;
pickupLocation: object;
bookDate: any;
custId: string;
promoId: any;
rider: any;
riderName: string;
riderId: string;
shopper: any;
shopperName: string;
shopperId: string;
status: number;
shopperState: number;
product: any;
tax: string;
discount: string;
promoApplied: boolean;
amount: string;
customer: any;
custName: string;
deliveryAddress: string;
deliveryCharge: string;
deliveryLocation: object;
orderCode: string;
orderId: string;
orderStatus: number;
pickupAddress: string;
pickupLocation: object;
bookDate: any;
orderDate: any;
custId: string;
promoId: any;
rider: any;
riderName: string;
riderId: string;
shopper: any;
shopperName: string;
shopperId: string;
status: number;
shopperState: number;
product: any;
tax: string;
discount: string;
promoApplied: boolean;
}
src/global.scss
......@@ -9,6 +9,7 @@
* https://ionicframework.com/docs/layout/global-stylesheets
*/
/* Core CSS required for Ionic components to work properly */
@import '~@ionic/angular/css/core.css';
......@@ -53,6 +54,7 @@
*/
/*-------------------------------
01. FONTS-N-SIZES
......@@ -62,107 +64,108 @@
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
* {
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
}
*::-webkit-scrollbar {
display: none;
display: none;
}
.no-scroll .scroll-content {
overflow: hidden;
overflow: hidden;
}
a {
text-decoration: none !important;
text-decoration: none !important;
}
button {
outline: none;
outline: none;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0;
-webkit-appearance: none !important;
margin: 0;
}
html,
body {
font-family: 'Lato', sans-serif !important;
margin: 0px;
font-family: 'Lato', sans-serif !important;
margin: 0px;
}
button {
cursor: pointer;
cursor: pointer;
}
.start_wizard_wrapper {
ion-slides {
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #29285b;
width: 14px;
height: 3px;
border-radius: 0px;
}
ion-slides {
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #29285b;
width: 14px;
height: 3px;
border-radius: 0px;
}
}
}
}
}
.gm-style .gm-style-iw-c {
padding: 0px !important;
padding: 0px !important;
}
.home_banner {
ion-slides {
.swiper-pagination-bullets {
left: auto;
width: auto;
right: 15px;
bottom: 15px;
ion-slides {
.swiper-pagination-bullets {
left: auto;
width: auto;
right: 15px;
bottom: 15px;
}
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #fff;
width: 14px;
height: 3px;
border-radius: 0px;
opacity: 1;
margin: 0px;
}
.swiper-pagination-bullet-active {
background-color: rgba(41, 37, 81, 1);
}
}
}
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #fff;
width: 14px;
height: 3px;
border-radius: 0px;
opacity: 1;
margin: 0px;
}
.swiper-pagination-bullet-active {
background-color: rgba(41, 37, 81, 1);
}
}
}
}
.product_banner {
ion-slides {
.swiper-pagination-bullets {
left: auto;
width: auto;
right: 15px;
bottom: 15px;
ion-slides {
.swiper-pagination-bullets {
left: auto;
width: auto;
right: 15px;
bottom: 15px;
}
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #fff;
width: 14px;
height: 3px;
border-radius: 0px;
opacity: 1;
margin: 0px;
}
.swiper-pagination-bullet-active {
background-color: rgba(41, 37, 81, 1);
}
}
}
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #fff;
width: 14px;
height: 3px;
border-radius: 0px;
opacity: 1;
margin: 0px;
}
.swiper-pagination-bullet-active {
background-color: rgba(41, 37, 81, 1);
}
}
}
}
/*-------------------------------
02. FONTS-SETTINGS
......@@ -170,49 +173,50 @@ button {
--------------------------------*/
.text_color_white {
color: #fff !important;
color: #fff !important;
}
.font_size_xs {
font-size: 12px !important;
font-size: 12px !important;
}
.font_size_sm {
font-size: 14px !important;
font-size: 14px !important;
}
.font_size_md {
font-size: 16px !important;
font-size: 16px !important;
}
.font_size_lg {
font-size: 18px !important;
font-size: 18px !important;
}
.font_size_xl {
font-size: 20px !important;
font-size: 20px !important;
}
.font_size_vl {
font-size: 35px !important;
font-size: 35px !important;
}
.font_weight300 {
font-weight: 300 !important;
font-weight: 300 !important;
}
.font_weight400 {
font-weight: 400 !important;
font-weight: 400 !important;
}
.font_weight500 {
font-weight: 500 !important;
font-weight: 500 !important;
}
.font_weight600 {
font-weight: 600 !important;
font-weight: 600 !important;
}
/*-------------------------------
03. THEMES-N-BACKGROUNDS
......@@ -220,30 +224,31 @@ button {
--------------------------------*/
.theme_background {
background-size: cover !important;
background-position: center !important;
background-size: cover !important;
background-position: center !important;
}
.theme_transparent {
background: transparent !important;
background: transparent !important;
}
.theme_white {
background-color: #f7f8fd !important;
background-color: #f7f8fd !important;
}
.theme_off_white {
background-color: #f4f4f4 !important;
background-color: #f4f4f4 !important;
}
.theme_dark_transparent {
background-color: rgba(0, 0, 0, 0.6) !important;
background-color: rgba(0, 0, 0, 0.6) !important;
}
.theme_white_transparent {
background-color: rgba(243, 243, 243, 0.6) !important;
background-color: rgba(243, 243, 243, 0.6) !important;
}
/*-------------------------------
04. SPACING-N-POSITIONS
......@@ -251,117 +256,118 @@ button {
--------------------------------*/
.width25 {
width: 25% !important;
width: 25% !important;
}
.width50 {
width: 50% !important;
width: 50% !important;
}
.width75 {
width: 75% !important;
width: 75% !important;
}
.widthFull {
width: 100% !important;
width: 100% !important;
}
.widthAuto {
width: auto !important;
width: auto !important;
}
.height25 {
height: 25% !important;
height: 25% !important;
}
.height50 {
height: 50% !important;
height: 50% !important;
}
.height75 {
width: 75% !important;
width: 75% !important;
}
.heightFull {
height: 100% !important;
height: 100% !important;
}
.heightAuto {
height: auto !important;
height: auto !important;
}
.p0 {
padding: 0px !important;
padding: 0px !important;
}
.pl0 {
padding-left: 0px !important;
padding-left: 0px !important;
}
.pr0 {
padding-right: 0px !important;
padding-right: 0px !important;
}
.pt0 {
padding-top: 0px !important;
padding-top: 0px !important;
}
.pb0 {
padding-bottom: 0px !important;
padding-bottom: 0px !important;
}
.p10 {
padding: 10px !important;
padding: 10px !important;
}
.pt10 {
padding-top: 10px !important;
padding-top: 10px !important;
}
.m0 {
margin: 0px !important;
margin: 0px !important;
}
.ml0 {
margin-left: 0px !important;
margin-left: 0px !important;
}
.mr0 {
margin-right: 0px !important;
margin-right: 0px !important;
}
.mt0 {
margin-top: 0px !important;
margin-top: 0px !important;
}
.mb0 {
margin-bottom: 0px !important;
margin-bottom: 0px !important;
}
.mAuto {
margin: 0 auto !important;
margin: 0 auto !important;
}
.clear {
clear: both !important;
clear: both !important;
}
.absolute {
position: absolute !important;
position: absolute !important;
}
.relative {
position: relative !important;
position: relative !important;
}
.fixed {
position: fixed !important;
position: fixed !important;
}
.borderNone {
border: none !important;
border: none !important;
}
/*-------------------------------
05. ALIGMENTS
......@@ -369,305 +375,303 @@ button {
--------------------------------*/
.floatLeft {
float: left !important;
float: left !important;
}
.floatRight {
float: right !important;
float: right !important;
}
.textLeft {
text-align: left !important;
text-align: left !important;
}
.textRight {
text-align: right !important;
text-align: right !important;
}
.textCenter {
text-align: center !important;
text-align: center !important;
}
.ion-page {
padding-top: 50px;
padding-top: 50px;
}
app-landing {
padding: 0px !important;
padding: 0px !important;
}
app-cart {
padding: 0px !important;
padding: 0px !important;
}
app-orderplaced {
padding: 0px !important;
padding: 0px !important;
}
app-ordercancelled {
padding: 0px !important;
padding: 0px !important;
}
app-delivery {
padding: 0px !important;
padding: 0px !important;
}
app-deliverypop {
padding: 0px !important;
padding: 0px !important;
}
app-success {
padding: 0px !important;
padding: 0px !important;
}
.nav_header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 9999;
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 9999;
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.nav_btn {
width: 50px;
height: 50px;
background-color: transparent;
color: #282438;
font-size: 25px;
background-position: center;
background-repeat: no-repeat;
background-size: 25px;
position: relative;
width: 50px;
height: 50px;
background-color: transparent;
color: #282438;
font-size: 25px;
background-position: center;
background-repeat: no-repeat;
background-size: 25px;
position: relative;
}
.not {
background-color: #3b394d;
color: #fff;
width: 17px;
height: 17px;
border-radius: 50%;
position: absolute;
top: 5px;
right: 10px;
font-size: 10px;
padding: 4px;
background-color: #3b394d;
color: #fff;
width: 17px;
height: 17px;
border-radius: 50%;
position: absolute;
top: 5px;
right: 10px;
font-size: 10px;
padding: 4px;
}
.nav_title {
width: calc(100% - 100px);
color: rgba(59, 57, 77, 1);
padding: 12px;
padding-left: 5px;
padding-right: 5px;
font-weight: 400;
text-align: center;
img {
height: 30px;
}
h4 {
margin: 0px;
font-weight: 900;
padding: 0px;
font-size: 20px;
width: calc(100% - 100px);
color: rgba(59, 57, 77, 1);
padding: 12px;
padding-left: 5px;
padding-right: 5px;
font-weight: 400;
text-align: center;
text-transform: uppercase;
span {
color: #39267f;
img {
height: 30px;
}
}
input {
width: 100%;
border: none;
padding-left: 10px;
padding-right: 10px;
&:focus {
outline: none;
h4 {
margin: 0px;
font-weight: 900;
padding: 0px;
font-size: 20px;
text-align: center;
text-transform: uppercase;
span {
color: #39267f;
}
}
&:hover {
outline: none;
input {
width: 100%;
border: none;
padding-left: 10px;
padding-right: 10px;
&:focus {
outline: none;
}
&:hover {
outline: none;
}
}
}
}
.nav_back {
background-color: #fff !important;
background-image: url('./assets/Group17_2.png');
img {
width: 25px;
display: none;
}
background-color: #fff !important;
background-image: url('./assets/Group17_2.png');
img {
width: 25px;
display: none;
}
}
.nav_back_white {
background-color: transparent;
background-image: url('./assets/arrow_white.png');
img {
width: 25px !important;
display: none;
}
background-color: transparent;
background-image: url('./assets/arrow_white.png');
img {
width: 25px !important;
display: none;
}
}
.nav_menu {
background-image: url('./assets/Group22_2.png');
img {
width: 25px;
display: none;
}
background-image: url('./assets/Group22_2.png');
img {
width: 25px;
display: none;
}
}
.nav_search {
background-image: url('./assets/search_2.png');
img {
width: 25px;
display: none;
}
background-image: url('./assets/search_2.png');
img {
width: 25px;
display: none;
}
}
.nav_exit {
background-image: url('./assets/Group17_2.png');
img {
width: 25px;
display: none;
}
background-image: url('./assets/Group17_2.png');
img {
width: 25px;
display: none;
}
}
.nav_close {
background-image: url('./assets/close.png');
img {
width: 25px;
display: none;
}
background-image: url('./assets/close.png');
img {
width: 25px;
display: none;
}
}
.nav_cart {
background-image: url('./assets/cart_icon.png');
img {
width: 25px;
display: none;
}
background-image: url('./assets/cart_icon.png');
img {
width: 25px;
display: none;
}
}
ion-header {
z-index: 9999 !important;
order: 0 !important;
z-index: 9999 !important;
order: 0 !important;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ripple div {
position: absolute;
border: 5px solid #29285b;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
position: absolute;
border: 5px solid #29285b;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 30px;
left: 30px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: -1px;
left: -1px;
width: 60px;
height: 60px;
opacity: 0;
}
0% {
top: 30px;
left: 30px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: -1px;
left: -1px;
width: 60px;
height: 60px;
opacity: 0;
}
}
.loader {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
padding-top: 50%;
background-color: rgba(273, 273, 273, 0.9);
text-align: center;
z-index: 99;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
padding-top: 50%;
background-color: rgba(273, 273, 273, 0.9);
text-align: center;
z-index: 99;
}
.picker-wrapper {
.picker-toolbar {
.picker-toolbar-button {
.picker-button {
color: #29285b;
font-weight: 900;
}
.picker-toolbar {
.picker-toolbar-button {
.picker-button {
color: #29285b;
font-weight: 900;
}
}
}
}
.picker-columns {
.picker-opt-selected {
color: #29285b;
font-weight: 900;
.picker-columns {
.picker-opt-selected {
color: #29285b;
font-weight: 900;
}
}
}
}
.search_item_list {
position: absolute;
background-color: #fff;
left: 0px;
right: 0px;
width: 100%;
margin: 0px;
top: 50px;
bottom: 0px;
z-index: 99;
ul {
position: absolute;
background-color: #fff;
left: 0px;
right: 0px;
width: 100%;
margin: 0px;
padding: 0px;
li {
list-style: none;
color: rgba(59, 57, 77, 1);
text-align: left;
list-style: none;
padding: 10px;
border-bottom: 1px solid #ddd;
&:hover {
background-color: rgba(59, 57, 77, 1);
color: #fff;
}
&:focus {
background-color: rgba(59, 57, 77, 1);
color: #fff;
}
top: 50px;
bottom: 0px;
z-index: 99;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: rgba(59, 57, 77, 1);
text-align: left;
list-style: none;
padding: 10px;
border-bottom: 1px solid #ddd;
&:hover {
background-color: rgba(59, 57, 77, 1);
color: #fff;
}
&:focus {
background-color: rgba(59, 57, 77, 1);
color: #fff;
}
}
}
}
}
// .successToast {
// color: #29285b;
// }
// .toast-content {
// }
.my-toast {
--background: #29285b;
--border-radius: 4px;
--color: #fff;
--background: #29285b;
--border-radius: 4px;
--color: #fff;
}
.my-error {
--background: rgb(212, 43, 38);
--border-radius: 4px;
--color: #fff;
}
--background: rgb(212, 43, 38);
--border-radius: 4px;
--color: #fff;
}
\ 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