Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
getme
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
1
Issues
1
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
amal
getme
Commits
6203fa66
Commit
6203fa66
authored
5 years ago
by
Arjun
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
style fix
parent
86664af8
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
1157 additions
and
1219 deletions
+1157
-1219
app.component.html
src/app/app.component.html
+71
-99
app.component.scss
src/app/app.component.scss
+149
-146
home.page.html
src/app/home/home.page.html
+118
-182
home.page.scss
src/app/home/home.page.scss
+285
-296
nearby.page.scss
src/app/nearby/nearby.page.scss
+62
-17
profile.page.html
src/app/profile/profile.page.html
+111
-123
profile.page.scss
src/app/profile/profile.page.scss
+4
-4
auth.service.ts
src/config/auth.service.ts
+55
-55
global.scss
src/global.scss
+302
-297
No files found.
src/app/app.component.html
View file @
6203fa66
<ion-app>
<ion-split-pane>
<ion-menu>
<ion-content>
<div
class=
"side_menu_wrapper"
>
<ion-menu-toggle
*
ngIf=
"userData"
>
<div
class=
"top_banner"
>
<div
class=
"top_image"
>
<img
[
src
]="
userData
.
profilePhoto
"
onerror=
"this.src='./../assets/asset_avatar.png'"
/>
</div>
<div
class=
"top_detail"
>
<h4>
{{ userData.name }}
</h4>
<p>
{{ userData.emailId }}
</p>
</div>
<div
class=
"clear"
></div>
</div>
</ion-menu-toggle>
<div
class=
"sidemenu_list"
>
<ul>
<ion-menu-toggle
(
click
)="
hideTab
()"
>
<li
(
click
)="
vieworder
('
home
')"
>
Shop
</li>
</ion-menu-toggle>
<!-- <li>About us</li> -->
<ion-menu-toggle>
<li
(
click
)="
vieworder
('
myorder
')"
>
View Order
</li>
</ion-menu-toggle>
<ion-split-pane>
<ion-menu>
<ion-content>
<div
class=
"side_menu_wrapper"
>
<ion-menu-toggle
*
ngIf=
"userData"
>
<div
class=
"top_banner"
>
<div
class=
"top_image"
>
<img
[
src
]="
userData
.
profilePhoto
"
onerror=
"this.src='./../assets/asset_avatar.png'"
/>
</div>
<div
class=
"top_detail"
>
<h4>
{{ userData.name }}
</h4>
<p>
{{ userData.emailId }}
</p>
</div>
<div
class=
"clear"
></div>
</div>
</ion-menu-toggle>
<div
class=
"sidemenu_list"
>
<ul>
<ion-menu-toggle
(
click
)="
hideTab
()"
>
<li
(
click
)="
vieworder
('
home
')"
>
Shop
</li>
</ion-menu-toggle>
<!-- <li>About us</li> -->
<ion-menu-toggle>
<li
(
click
)="
vieworder
('
myorder
')"
>
View Order
</li>
</ion-menu-toggle>
<div
class=
"sub_menu"
>
<ul
*
ngIf=
"categoryService.activecategories"
>
<ion-menu-toggle>
<li
*
ngFor=
"let category of categoryService.activecategories"
(
click
)="
goToPage
('
catstorelist
',
category
)"
>
{{ category.catName }}
</li>
</ion-menu-toggle>
<!-- <li>Women's Fashion</li>
<div
class=
"sub_menu"
>
<ul
*
ngIf=
"categoryService.activecategories"
>
<ion-menu-toggle>
<li
*
ngFor=
"let category of categoryService.activecategories"
(
click
)="
goToPage
('
catstorelist
',
category
)"
>
{{ category.catName }}
</li>
</ion-menu-toggle>
<!-- <li>Women's Fashion</li>
<li>Features</li>
<li>Bags</li>
<li>Shoes</li>
<li>Electronics</li> -->
</ul>
</div>
<ion-menu-toggle>
<li
(
click
)="
vieworder
('
feedback
')"
>
Complaints
&
Feedback
</li>
</ion-menu-toggle>
<li>
<span
class=
"floatLeft"
(
click
)="
authService
.
SignOut
()"
>
Logout
</span
>
<span
class=
"floatRight version"
>
Version 0.1.0.2
</span>
<div
class=
"clear"
></div>
</li>
</ul>
</div>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet
main
></ion-router-outlet>
</ion-split-pane>
</ul>
</div>
<ion-menu-toggle>
<li
(
click
)="
vieworder
('
feedback
')"
>
Complaints
&
Feedback
</li>
</ion-menu-toggle>
<li>
<span
class=
"floatLeft"
(
click
)="
authService
.
SignOut
()"
>
Logout
</span>
<span
class=
"floatRight version"
>
Version 0.1.0.2
</span>
<div
class=
"clear"
></div>
</li>
</ul>
</div>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet
main
></ion-router-outlet>
</ion-split-pane>
</ion-app>
<div
class=
"common_tab"
[
hidden
]="
fetchCase
()
===
true
"
*
ngIf=
"!isSearchOpen"
>
<ul>
<li
(
click
)="
goToPage
('
home
')"
>
<div
class=
"icon_sec m1_icon"
[
class
.
m1_icon_act
]="
sec_active1
"
(
click
)="
setActive1
()"
></div>
</li>
<li
(
click
)="
goToPage
('
catagory
')"
>
<div
class=
"icon_sec m2_icon"
[
class
.
m2_icon_act
]="
sec_active2
"
(
click
)="
setActive2
()"
></div>
</li>
<li
(
click
)="
searchModal
()"
>
<div
class=
"icon_sec m3_icon"
[
class
.
m3_icon_act
]="
sec_active3
"
(
click
)="
setActive3
()"
></div>
</li>
<!-- <li (click)="goToPage('cart')">
<ul>
<li
(
click
)="
goToPage
('
home
')"
>
<div
class=
"icon_sec m1_icon"
[
class
.
m1_icon_act
]="
sec_active1
"
(
click
)="
setActive1
()"
></div>
</li>
<li
(
click
)="
goToPage
('
catagory
')"
>
<div
class=
"icon_sec m2_icon"
[
class
.
m2_icon_act
]="
sec_active2
"
(
click
)="
setActive2
()"
></div>
</li>
<li
(
click
)="
searchModal
()"
>
<div
class=
"icon_sec m3_icon"
[
class
.
m3_icon_act
]="
sec_active3
"
(
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
('
myorder
')"
>
<div
class=
"icon_sec m5_icon"
[
class
.
m5_icon_act
]="
sec_active5
"
(
click
)="
setActive5
()"
></div>
</li>
<li
(
click
)="
goToPage
('
profile
')"
>
<div
class=
"icon_sec m6_icon"
[
class
.
m6_icon_act
]="
sec_active6
"
(
click
)="
setActive6
()"
menuClose
></div>
</li>
</ul>
</div>
</li>
<li
(
click
)="
goToPage
('
myorder
')"
>
<div
class=
"icon_sec m5_icon"
[
class
.
m5_icon_act
]="
sec_active5
"
(
click
)="
setActive5
()"
></div>
</li>
<li
(
click
)="
goToPage
('
profile
')"
>
<div
class=
"icon_sec m6_icon"
[
class
.
m6_icon_act
]="
sec_active6
"
(
click
)="
setActive6
()"
menuClose
></div>
</li>
</ul>
</div>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/app/app.component.scss
View file @
6203fa66
@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
This diff is collapsed.
Click to expand it.
src/app/home/home.page.html
View file @
6203fa66
<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
This diff is collapsed.
Click to expand it.
src/app/home/home.page.scss
View file @
6203fa66
.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
This diff is collapsed.
Click to expand it.
src/app/nearby/nearby.page.scss
View file @
6203fa66
...
...
@@ -46,24 +46,69 @@
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
;
ul
{
margin
:
0px
;
padding
:
0px
;
padding-top
:
30px
;
li
{
list-style
:
none
;
margin-bottom
:
15px
;
p
{
margin
:
0px
;
padding
:
0px
;
color
:
rgba
(
176
,
174
,
199
,
1
);
padding-top
:
5px
;
padding-bottom
:
5px
;
}
.styled-checkbox
{
position
:
absolute
;
// take it out of document flow
opacity
:
0
;
// hide it
&
+
label
{
position
:
relative
;
cursor
:
pointer
;
padding
:
0
;
width
:
100%
;
}
// Box.
&
+
label
:before
{
content
:
''
;
margin-right
:
10px
;
display
:
inline-block
;
vertical-align
:
text-top
;
width
:
20px
;
height
:
20px
;
border-radius
:
50%
;
background
:
white
;
border
:
1px
solid
rgba
(
215
,
213
,
228
,
1
);
}
&
:checked
+
label
:before
{
background
:
#29285b
;
}
// Disabled state label.
&
:disabled
+
label
{
color
:
#b8b8b8
;
cursor
:
auto
;
}
// Disabled box.
&
:disabled
+
label
:before
{
box-shadow
:
none
;
background
:
#ddd
;
}
// Checkmark. Could be replaced with an image
&
:checked
+
label
:after
{
content
:
''
;
position
:
absolute
;
left
:
6px
;
top
:
10px
;
background
:
white
;
width
:
2px
;
height
:
2px
;
box-shadow
:
2px
0
0
white
,
4px
0
0
white
,
4px
-2px
0
white
,
4px
-4px
0
white
,
4px
-6px
0
white
,
4px
-8px
0
white
;
transform
:
rotate
(
45deg
);
}
}
}
}
}
.styled-checkbox
{
...
...
This diff is collapsed.
Click to expand it.
src/app/profile/profile.page.html
View file @
6203fa66
<div
class=
"nav_header"
>
<ion-menu-toggle>
<button
class=
"nav_btn nav_menu floatLeft"
></button>
</ion-menu-toggle>
<div
class=
"nav_title floatLeft"
>
<img
src=
"../../assets/Group 11@3x.png"
/>
</div>
<div
class=
"clear"
></div>
<ion-menu-toggle>
<button
class=
"nav_btn nav_menu floatLeft"
></button>
</ion-menu-toggle>
<div
class=
"nav_title floatLeft"
>
<img
src=
"../../assets/Group 11@3x.png"
/>
</div>
<div
class=
"clear"
></div>
</div>
<ion-content>
<div
class=
"profile_wrapper"
*
ngIf=
"loggedUser"
>
<div
class=
"profile_banner"
>
<!-- <div class="profile_circle">
<div
class=
"profile_wrapper"
*
ngIf=
"loggedUser"
>
<div
class=
"profile_banner"
>
<!-- <div class="profile_circle">
<div class="edit"></div>
</div> -->
<div
class=
"profile_circle"
>
<img
[
src
]="
loggedUser
.
profilePhoto
"
onerror=
"this.src='./../../assets/profile_banner.png'"
/>
<div
class=
"edit"
></div>
<input
type=
"file"
accept=
"image/*"
(
change
)="
fileChange
($
event
)"
/>
</div>
<div
class=
"profile_circle"
>
<img
[
src
]="
loggedUser
.
profilePhoto
"
onerror=
"this.src='./../../assets/profile_banner.png'"
/>
<div
class=
"edit"
></div>
<input
type=
"file"
accept=
"image/*"
(
change
)="
fileChange
($
event
)"
/>
</div>
<h5>
{{loggedUser.name}}
</h5>
<p
(
click
)="
istoggle
()"
>
LOGOUT
</p>
</div>
<div
class=
"account_wrapper"
>
<div
class=
"account_header"
>
<h5
class=
"floatLeft"
>
ACCOUNT INFORMATION
</h5>
<span
class=
"floatRight"
(
click
)="
goToPage
('
changedetails
',
user
&&
user
)"
><img
src=
"../../assets/edit.png"
/></span>
<div
class=
"clear"
></div>
</div>
<div
class=
"row"
>
<ion-row>
<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>
</ion-col>
</ion-row>
</div>
<div
class=
"row"
>
<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
>
</p>
</ion-col>
<ion-col
class=
"textRight p0"
>
<h6>
{{loggedUser.emailId}}
</h6>
</ion-col>
</ion-row>
</div>
<hr
/>
<ion-row
(
click
)="
goToPage
('
wishlist
')"
>
<ion-col
class=
"textLeft p0"
>
<p>
Wishlist
</p>
</ion-col>
<ion-col
class=
"textRight p0"
>
<h6>
(0)
</h6>
</ion-col>
</ion-row>
<hr
/>
<ion-row
(
click
)="
goToPage
('
address
')"
>
<ion-col
class=
"textLeft p0"
>
<p>
Address
</p>
</ion-col>
<ion-col
class=
"textRight p0"
>
<h6
*
ngIf=
"addressService.addList"
>
({{addressService.addressList.length}})
</h6>
</ion-col>
</ion-row>
<hr
/>
<!-- <ion-row>
<h5>
{{loggedUser.name}}
</h5>
<p
(
click
)="
istoggle
()"
>
LOGOUT
</p>
</div>
<div
class=
"account_wrapper"
>
<div
class=
"account_header"
>
<h5
class=
"floatLeft"
>
ACCOUNT INFORMATION
</h5>
<span
class=
"floatRight"
(
click
)="
goToPage
('
changedetails
',
user
&&
user
)"
><img
src=
"../../assets/edit.png"
/></span>
<div
class=
"clear"
></div>
</div>
<div
class=
"row"
>
<ion-row>
<ion-col
class=
"textLeft p0"
>
<p>
Phone
</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>
<div
class=
"row"
>
<ion-row>
<ion-col
class=
"textLeft p0"
>
<p>
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>
<hr
/>
<ion-row
(
click
)="
goToPage
('
wishlist
')"
>
<ion-col
class=
"textLeft p0"
>
<p>
Wishlist
</p>
</ion-col>
<ion-col
class=
"textRight p0"
>
<h6>
(0)
</h6>
</ion-col>
</ion-row>
<hr
/>
<ion-row
(
click
)="
goToPage
('
address
')"
>
<ion-col
class=
"textLeft p0"
>
<p>
Address
</p>
</ion-col>
<ion-col
class=
"textRight p0"
>
<h6
*
ngIf=
"addressService.addList"
>
({{addressService.addressList.length}})
</h6>
</ion-col>
</ion-row>
<hr
/>
<!-- <ion-row>
<ion-col class="textLeft p0">
<p>My Cards</p>
</ion-col>
...
...
@@ -102,46 +92,43 @@
</ion-col>
</ion-row>
<hr /> -->
<ion-row
(
click
)="
goToPage
('
myorder
')"
>
<ion-col
class=
"textLeft p0"
>
<p>
My Order
</p>
</ion-col>
<ion-col
class=
"textRight p0"
>
<h6>
<ion-icon
name=
"arrow-forward"
></ion-icon>
</h6>
</ion-col>
</ion-row>
<hr
/>
<ion-row>
<ion-col
class=
"textLeft p0"
>
<p>
Currency
</p>
</ion-col>
<ion-col
class=
"textRight p0"
>
<h6>
<span>
AUD
</span>
</h6>
</ion-col>
</ion-row>
</div>
<div
class=
"logout-pop-wrapper"
*
ngIf=
"isShow"
[@
slideInOut
]
>
<div
class=
"logout_inner"
>
<h4>
Logout
</h4>
<p>
Are you sure to Logout ?
</p>
<div
class=
"logout_footer"
>
<button
class=
"btn-cancel floatLeft"
(
click
)="
istoggle
();"
>
<ion-row
(
click
)="
goToPage
('
myorder
')"
>
<ion-col
class=
"textLeft p0"
>
<p>
My Order
</p>
</ion-col>
<ion-col
class=
"textRight p0"
>
<h6>
<ion-icon
name=
"arrow-forward"
></ion-icon>
</h6>
</ion-col>
</ion-row>
<hr
/>
<ion-row>
<ion-col
class=
"textLeft p0"
>
<p>
Currency
</p>
</ion-col>
<ion-col
class=
"textRight p0"
>
<h6>
<span>
AUD
</span>
</h6>
</ion-col>
</ion-row>
</div>
<div
class=
"logout-pop-wrapper"
*
ngIf=
"isShow"
[@
slideInOut
]
>
<div
class=
"logout_inner"
>
<h4>
Logout
</h4>
<p>
Are you sure to Logout ?
</p>
<div
class=
"logout_footer"
>
<button
class=
"btn-cancel floatLeft"
(
click
)="
istoggle
();"
>
Cancel
</button>
<button
class=
"btn-logout floatRight"
(
click
)="
authService
.
SignOut
();
istoggle
()"
>
<button
class=
"btn-logout floatRight"
(
click
)="
authService
.
SignOut
();
istoggle
()"
>
Logout
</button>
</div>
</div>
<div
class=
"clear"
></div>
</div>
<div
class=
"clear"
></div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-content>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/app/profile/profile.page.scss
View file @
6203fa66
...
...
@@ -82,16 +82,16 @@
width
:
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
;
span
{
color
:
rgba
(
206
,
153
,
76
,
1
);
margin-left
:
10px
;
}
}
h6
{
margin
:
0px
;
...
...
This diff is collapsed.
Click to expand it.
src/config/auth.service.ts
View file @
6203fa66
import
{
Injectable
}
from
'@angular/core'
;
import
{
User
,
Signup
,
Address
}
from
'./services/user'
;
import
{
auth
}
from
'firebase/app'
;
import
{
Router
,
ActivatedRoute
}
from
'@angular/router'
;
import
{
AngularFireAuth
}
from
'@angular/fire/auth'
;
import
{
Injectable
}
from
"@angular/core"
;
import
{
User
,
Signup
,
Address
}
from
"./services/user"
;
import
{
auth
}
from
"firebase/app"
;
import
{
Router
,
ActivatedRoute
}
from
"@angular/router"
;
import
{
AngularFireAuth
}
from
"@angular/fire/auth"
;
import
{
AngularFirestore
,
AngularFirestoreDocument
,
AngularFirestoreCollection
}
from
'@angular/fire/firestore'
;
import
{
ServiceService
}
from
'./../config/service.service'
;
import
{
SubjectService
}
from
'./../config/subject.service'
;
import
{
GooglePlus
}
from
'@ionic-native/google-plus/ngx'
;
import
{
take
}
from
'rxjs/operators'
;
import
{
from
}
from
'rxjs'
;
}
from
"@angular/fire/firestore"
;
import
{
ServiceService
}
from
"./../config/service.service"
;
import
{
SubjectService
}
from
"./../config/subject.service"
;
import
{
GooglePlus
}
from
"@ionic-native/google-plus/ngx"
;
import
{
take
}
from
"rxjs/operators"
;
import
{
from
}
from
"rxjs"
;
@
Injectable
({
providedIn
:
'root'
providedIn
:
"root"
})
export
class
AuthService
{
loader
:
boolean
;
...
...
@@ -30,33 +30,33 @@ export class AuthService {
this
.
loader
=
true
;
this
.
type
=
1
;
this
.
afAuth
.
authState
.
subscribe
(
user
=>
{
console
.
log
(
'here'
);
console
.
log
(
"here"
);
console
.
log
(
user
);
if
(
user
)
{
this
.
subjectService
.
sendLoginData
(
false
);
this
.
userData
=
user
;
console
.
log
(
this
.
userData
);
this
.
service
.
set
(
'user'
,
JSON
.
stringify
(
this
.
userData
));
this
.
service
.
set
(
"user"
,
JSON
.
stringify
(
this
.
userData
));
this
.
SetUserData
(
user
);
this
.
loader
=
false
;
if
(
this
.
type
===
1
)
{
this
.
router
.
navigateByUrl
(
'home'
);
this
.
router
.
navigateByUrl
(
"home"
);
}
else
{
this
.
router
.
navigateByUrl
(
'verification'
);
this
.
router
.
navigateByUrl
(
"verification"
);
}
}
else
{
console
.
log
(
'here too'
);
console
.
log
(
"here too"
);
this
.
loader
=
false
;
this
.
subjectService
.
sendLoginData
(
true
);
this
.
service
.
set
(
'user'
,
null
);
JSON
.
parse
(
localStorage
.
getItem
(
'user'
));
this
.
router
.
navigateByUrl
(
'login'
);
this
.
service
.
set
(
"user"
,
null
);
JSON
.
parse
(
localStorage
.
getItem
(
"user"
));
this
.
router
.
navigateByUrl
(
"login"
);
}
});
}
get
isLoggedIn
():
boolean
{
const
user
=
JSON
.
parse
(
localStorage
.
getItem
(
'user'
));
const
user
=
JSON
.
parse
(
localStorage
.
getItem
(
"user"
));
return
user
!==
null
&&
user
.
emailVerified
!==
false
?
true
:
false
;
}
userData
:
any
;
...
...
@@ -70,21 +70,21 @@ export class AuthService {
return
this
.
afAuth
.
auth
.
signInWithEmailAndPassword
(
email
,
password
)
.
then
(
result
=>
{
console
.
log
(
'success'
);
console
.
log
(
"success"
);
document
.
body
.
scrollTop
=
document
.
documentElement
.
scrollTop
=
0
;
this
.
SetUserData
(
result
.
user
);
})
.
catch
(
error
=>
{
this
.
loader
=
false
;
this
.
service
.
showToast
(
error
.
message
,
'bottom'
,
'my-error'
,
1000
);
this
.
service
.
showToast
(
error
.
message
,
"bottom"
,
"my-error"
,
1000
);
});
}
public
async
verify
(
otp
:
string
)
{
this
.
loader
=
true
;
const
custRef
:
AngularFirestoreCollection
<
any
>
=
this
.
afs
.
collection
(
'customers'
,
ref
=>
ref
.
where
(
'otp'
,
'=='
,
otp
).
where
(
'uid'
,
'=='
,
this
.
userData
.
uid
)
"customers"
,
ref
=>
ref
.
where
(
"otp"
,
"=="
,
otp
).
where
(
"uid"
,
"=="
,
this
.
userData
.
uid
)
);
custRef
.
valueChanges
()
...
...
@@ -92,18 +92,18 @@ export class AuthService {
.
subscribe
((
value
:
User
[])
=>
{
if
(
value
.
length
>
0
)
{
this
.
afs
.
collection
(
'customers'
)
.
collection
(
"customers"
)
.
doc
(
this
.
userData
.
uid
)
.
update
({
otp
:
''
,
phoneVerified
:
true
});
this
.
service
.
set
(
'type'
,
1
);
.
update
({
otp
:
""
,
phoneVerified
:
true
});
this
.
service
.
set
(
"type"
,
1
);
this
.
loader
=
false
;
this
.
router
.
navigateByUrl
(
'nearby'
);
this
.
router
.
navigateByUrl
(
"nearby"
);
}
else
{
this
.
loader
=
false
;
this
.
service
.
showToast
(
'Please input valid OTP'
,
'bottom'
,
'my-error'
,
"Please input valid OTP"
,
"bottom"
,
"my-error"
,
1000
);
}
...
...
@@ -112,7 +112,7 @@ export class AuthService {
profilePic
(
pic
)
{
this
.
afs
.
collection
(
'customers'
)
.
collection
(
"customers"
)
.
doc
(
this
.
userData
.
uid
)
.
update
({
profilePhoto
:
pic
});
}
...
...
@@ -123,7 +123,7 @@ export class AuthService {
this
.
afAuth
.
auth
.
signInWithPopup
(
new
auth
.
GoogleAuthProvider
())
.
then
(
result
=>
{
console
.
log
(
'success'
);
console
.
log
(
"success"
);
console
.
log
(
result
.
additionalUserInfo
.
isNewUser
);
if
(
result
.
additionalUserInfo
&&
...
...
@@ -150,11 +150,11 @@ export class AuthService {
.
signInWithPopup
(
new
auth
.
FacebookAuthProvider
())
.
then
(
result
=>
{
this
.
loader
=
false
;
console
.
log
(
'success'
);
console
.
log
(
"success"
);
console
.
log
(
result
);
})
.
catch
(
err
=>
{
this
.
service
.
showToast
(
err
.
message
,
'bottom'
,
'my-error'
,
1000
);
this
.
service
.
showToast
(
err
.
message
,
"bottom"
,
"my-error"
,
1000
);
});
}
catch
(
error
)
{
This
.
loader
=
false
;
...
...
@@ -181,7 +181,7 @@ export class AuthService {
loginType
:
value
.
loginType
};
this
.
loggedUser
=
userData
;
this
.
service
.
set
(
'userData'
,
JSON
.
stringify
(
this
.
loggedUser
));
this
.
service
.
set
(
"userData"
,
JSON
.
stringify
(
this
.
loggedUser
));
this
.
subjectService
.
sendUserData
(
JSON
.
stringify
(
this
.
loggedUser
));
console
.
log
(
this
.
loggedUser
);
});
...
...
@@ -191,9 +191,9 @@ export class AuthService {
this
.
loader
=
true
;
return
this
.
afAuth
.
auth
.
signOut
().
then
(()
=>
{
this
.
subjectService
.
sendLoginData
(
true
);
this
.
service
.
remove
(
'user'
);
this
.
service
.
remove
(
"user"
);
this
.
loader
=
false
;
console
.
log
(
'logout'
);
console
.
log
(
"logout"
);
});
}
...
...
@@ -201,9 +201,9 @@ export class AuthService {
this
.
type
=
2
;
console
.
log
(
userData
.
user
);
const
currencyData
=
{
currId
:
'123'
,
currName
:
'Australian dollar'
,
symbol
:
'A$'
currId
:
"123"
,
currName
:
"Australian dollar"
,
symbol
:
"A$"
};
const
otp
=
Math
.
floor
(
1000
+
Math
.
random
()
*
9000
);
userData
=
userData
.
user
;
...
...
@@ -223,11 +223,11 @@ export class AuthService {
this
.
userPostData
=
postData
;
console
.
log
(
postData
);
this
.
afs
.
collection
(
'customers'
)
.
collection
(
"customers"
)
.
doc
(
userData
.
uid
)
.
set
(
postData
)
.
then
(()
=>
{
console
.
log
(
'successs'
);
console
.
log
(
"successs"
);
});
}
...
...
@@ -242,15 +242,15 @@ export class AuthService {
console
.
log
(
result
.
user
);
this
.
afAuth
.
auth
.
currentUser
.
sendEmailVerification
();
const
currencyData
=
{
currId
:
'123'
,
currName
:
'Australian dollar'
,
symbol
:
'A$'
currId
:
"123"
,
currName
:
"Australian dollar"
,
symbol
:
"A$"
};
const
custData
=
result
.
user
;
const
postData
:
User
=
{
uid
:
custData
.
uid
,
status
:
true
,
profilePhoto
:
''
,
profilePhoto
:
""
,
phoneVerified
:
false
,
phone
:
userData
.
phone
,
name
:
userData
.
name
,
...
...
@@ -263,11 +263,11 @@ export class AuthService {
this
.
userPostData
=
postData
;
console
.
log
(
postData
);
this
.
afs
.
collection
(
'customers'
)
.
collection
(
"customers"
)
.
doc
(
custData
.
uid
)
.
set
(
postData
)
.
then
(()
=>
{
console
.
log
(
'successs'
);
console
.
log
(
"successs"
);
});
this
.
loader
=
false
;
})
...
...
@@ -282,7 +282,7 @@ export class AuthService {
console
.
log
(
this
.
userData
.
uid
);
this
.
loader
=
true
;
this
.
afs
.
collection
(
'address'
)
.
collection
(
"address"
)
.
add
({
uid
:
this
.
userData
.
uid
})
...
...
@@ -306,13 +306,13 @@ export class AuthService {
const
neworderId
=
docRef
.
id
;
console
.
log
(
addrData
);
this
.
afs
.
collection
(
'address'
)
.
collection
(
"address"
)
.
doc
(
neworderId
)
.
set
(
addrData
)
.
then
(()
=>
{
console
.
log
(
'Address add Successfully'
);
this
.
service
.
set
(
'user'
,
JSON
.
stringify
(
this
.
userData
));
this
.
router
.
navigateByUrl
(
'home'
);
console
.
log
(
"Address add Successfully"
);
this
.
service
.
set
(
"user"
,
JSON
.
stringify
(
this
.
userData
));
this
.
router
.
navigateByUrl
(
"home"
);
document
.
body
.
scrollTop
=
document
.
documentElement
.
scrollTop
=
0
;
})
.
catch
(
err
=>
{
...
...
This diff is collapsed.
Click to expand it.
src/global.scss
View file @
6203fa66
...
...
@@ -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
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment