Skip to content

G
getme
Commit f6b936e8 by muhsin
Options

fixed search bar issue, initial userdata issue

parent 0e941d48
Showing with 751 additions and 607 deletions
src/app/app.component.html
...@@ -3,17 +3,14 @@ ...@@ -3,17 +3,14 @@
<ion-menu> <ion-menu>
<ion-content> <ion-content>
<div class="side_menu_wrapper"> <div class="side_menu_wrapper">
<<<<<<< HEAD
<ion-menu-toggle>
<div class="top_banner" (click)="goToPage('profile')">
=======
<ion-menu-toggle *ngIf="userData"> <ion-menu-toggle *ngIf="userData">
<div class="top_banner"> <div class="top_banner">
>>>>>>> b35f226916e6e5b4feacc30b355445f087230416 <div class="top_image">
<div class="top_image"></div> <img [src]="userData.profilePhoto" />
</div>
<div class="top_detail"> <div class="top_detail">
<h4>{{userData.name}}</h4> <h4>{{ userData.name }}</h4>
<p>{{userData.emailId}}</p> <p>{{ userData.emailId }}</p>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
...@@ -62,7 +59,7 @@ ...@@ -62,7 +59,7 @@
</ion-split-pane> </ion-split-pane>
</ion-app> </ion-app>
<div class="common_tab" [hidden]="fetchCase() === true"> <div class="common_tab" [hidden]="fetchCase() === true" *ngIf="!isSearchOpen">
<ul> <ul>
<li (click)="goToPage('home')"> <li (click)="goToPage('home')">
<div <div
...@@ -100,7 +97,8 @@ ...@@ -100,7 +97,8 @@
class="icon_sec m6_icon" class="icon_sec m6_icon"
[class.m6_icon_act]="sec_active6" [class.m6_icon_act]="sec_active6"
(click)="setActive6()" (click)="setActive6()"
menuClose></div> menuClose
></div>
</li> </li>
</ul> </ul>
</div> </div>
src/app/app.component.ts
...@@ -23,6 +23,8 @@ import { SearchmodalPage } from './searchmodal/searchmodal.page'; ...@@ -23,6 +23,8 @@ import { SearchmodalPage } from './searchmodal/searchmodal.page';
styleUrls: ['app.component.scss'] styleUrls: ['app.component.scss']
}) })
export class AppComponent { export class AppComponent {
isSearchOpen = false;
sec_active1 = true; sec_active1 = true;
sec_active2 = false; sec_active2 = false;
sec_active3 = false; sec_active3 = false;
...@@ -56,7 +58,7 @@ export class AppComponent { ...@@ -56,7 +58,7 @@ export class AppComponent {
this.state = loginData; this.state = loginData;
}); });
this.service.get('userData').then(userData => { this.subjectService.getUserData().subscribe(userData => {
if (userData) { if (userData) {
this.userData = JSON.parse(userData); this.userData = JSON.parse(userData);
console.log(userData); console.log(userData);
...@@ -109,7 +111,7 @@ export class AppComponent { ...@@ -109,7 +111,7 @@ export class AppComponent {
} }
setActive1() { setActive1() {
this.sec_active1 = !this.sec_active1; this.sec_active1 = true;
this.sec_active2 = false; this.sec_active2 = false;
this.sec_active3 = false; this.sec_active3 = false;
this.sec_active4 = false; this.sec_active4 = false;
...@@ -117,7 +119,7 @@ export class AppComponent { ...@@ -117,7 +119,7 @@ export class AppComponent {
this.sec_active6 = false; this.sec_active6 = false;
} }
setActive2() { setActive2() {
this.sec_active2 = !this.sec_active2; this.sec_active2 = true;
this.sec_active1 = false; this.sec_active1 = false;
this.sec_active3 = false; this.sec_active3 = false;
this.sec_active4 = false; this.sec_active4 = false;
...@@ -125,7 +127,7 @@ export class AppComponent { ...@@ -125,7 +127,7 @@ export class AppComponent {
this.sec_active6 = false; this.sec_active6 = false;
} }
setActive3() { setActive3() {
this.sec_active3 = !this.sec_active3; this.sec_active3 = true;
this.sec_active1 = false; this.sec_active1 = false;
this.sec_active2 = false; this.sec_active2 = false;
this.sec_active4 = false; this.sec_active4 = false;
...@@ -133,7 +135,7 @@ export class AppComponent { ...@@ -133,7 +135,7 @@ export class AppComponent {
this.sec_active6 = false; this.sec_active6 = false;
} }
setActive4() { setActive4() {
this.sec_active4 = !this.sec_active4; this.sec_active4 = true;
this.sec_active1 = false; this.sec_active1 = false;
this.sec_active2 = false; this.sec_active2 = false;
this.sec_active3 = false; this.sec_active3 = false;
...@@ -141,7 +143,7 @@ export class AppComponent { ...@@ -141,7 +143,7 @@ export class AppComponent {
this.sec_active6 = false; this.sec_active6 = false;
} }
setActive5() { setActive5() {
this.sec_active5 = !this.sec_active5; this.sec_active5 = true;
this.sec_active1 = false; this.sec_active1 = false;
this.sec_active2 = false; this.sec_active2 = false;
this.sec_active3 = false; this.sec_active3 = false;
...@@ -149,7 +151,7 @@ export class AppComponent { ...@@ -149,7 +151,7 @@ export class AppComponent {
this.sec_active6 = false; this.sec_active6 = false;
} }
setActive6() { setActive6() {
this.sec_active6 = !this.sec_active6; this.sec_active6 = true;
this.sec_active1 = false; this.sec_active1 = false;
this.sec_active2 = false; this.sec_active2 = false;
this.sec_active3 = false; this.sec_active3 = false;
...@@ -199,10 +201,19 @@ export class AppComponent { ...@@ -199,10 +201,19 @@ export class AppComponent {
} }
async searchModal() { async searchModal() {
// Hides Bottom navbar items
this.isSearchOpen = true;
const modal = await this.modalController.create({ const modal = await this.modalController.create({
component: SearchmodalPage component: SearchmodalPage
}); });
modal.onDidDismiss().then(dataReturned => {}); // modal.onDidDismiss().then(dataReturned => {
//
// });
// Shows bottom navbar items on component unmount
modal.onWillDismiss().then(() => {
this.isSearchOpen = false;
});
return await modal.present(); return await modal.present();
} }
} }
src/app/changedetails/changedetails.page.ts
...@@ -58,13 +58,13 @@ export class ChangedetailsPage implements OnInit { ...@@ -58,13 +58,13 @@ export class ChangedetailsPage implements OnInit {
form.value.password && form.value.password &&
form.value.password != form.value.confirmPassword form.value.password != form.value.confirmPassword
) { ) {
this.register.updatePassword(form.value.password); // this.register.updatePassword(form.value.password);
} else { } else {
alert('Password should match'); alert('Password should match');
} }
// Calls update user data fn // Calls update user data fn
this.register.updateData(form.value, this.userData.uid); // this.register.updateData(form.value, this.userData.uid);
console.log('valid form values', form.value); console.log('valid form values', form.value);
} }
} }
......
src/app/home/home.page.html
<div class="nav_header"> <div class="nav_header">
<ion-menu-toggle> <ion-menu-toggle>
<button class="nav_btn nav_menu floatLeft"> <button class="nav_btn nav_menu floatLeft"></button>
</button> </ion-menu-toggle>
</ion-menu-toggle>
<div class="nav_title floatLeft relative"> <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)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> -->
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="searchModal()"> <input
class="search_bar"
</div> placeholder="Search here.. eg:shirts, retailers etc..."
<button class="nav_btn nav_search floatRight" *ngIf="!searchShow"> (click)="searchModal()"
</button> />
<button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"> </div>
</button> <button
<div class="clear"></div> 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> </div>
<ion-content> <ion-content>
<div class="home_wrapper"> <div class="home_wrapper">
<div class="home_banner">
<div class="home_banner"> <div class="home_banner_title">
<div class="home_banner_title"> <ion-row>
<ion-row> <ion-col class="textLeft">
<ion-col class="textLeft"> <img src="../assets/Group 11_2.png" />
<img src="../assets/Group 11_2.png"> </ion-col>
</ion-col> <ion-col class="textRight">
<ion-col class="textRight"> <p class="floatRight" (click)="istoggle()">{{address}}</p>
<p class="floatRight" (click)="istoggle()">{{address}}</p> </ion-col>
</ion-col> </ion-row>
</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> </div>
<ion-slides pager="true" *ngIf="centerService.centers && centerService.centers.length > 0"> </div>
<ion-slide *ngFor="let center of centerService.centers"> </ion-slide>
<div class="banner_slide" (click)="goToPage('storelist', center)"> <!-- <ion-slide>
<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')"> <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"> <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"> <div class="feature_overlay">
...@@ -63,97 +86,133 @@ ...@@ -63,97 +86,133 @@
</div> </div>
</div> </div>
</ion-slide> --> </ion-slide> -->
</ion-slides> </ion-slides>
</div> </div>
<div class="home_sub_header"> <div class="home_sub_header">
<span class="floatLeft">Nearby Shopping Centers</span> <span class="floatLeft">Nearby Shopping Centers</span>
<span class="floatRight"> <span class="floatRight">
<div class="nearby_icon" (click)="goToPage('nearby')"> <div class="nearby_icon" (click)="goToPage('nearby')"></div>
</div> </span>
</span> <div class="clear"></div>
<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>
</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>
</div>
</ion-content> </ion-content>
<div *ngIf="isShow" [@slideInOut]> <div *ngIf="isShow" [@slideInOut]>
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle()"> <button class="nav_btn nav_back floatLeft" (click)="istoggle()">
<img src="../assets/Group17_2.png"> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>CHANGE LOCATION</h4> <h4>CHANGE LOCATION</h4>
</div> </div>
<div class="clear"></div>
</div>
<ion-content class="sort_wrappper">
<agm-map
[zoom]="20"
[latitude]="lat"
[longitude]="lng"
[disableDefaultUI]="false"
[zoomControl]="false"
[backgroundColor]="'rgba(29, 27, 130,0.2)'"
>
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')"
>ADD NEW</span
>
<div class="clear"></div> <div class="clear"></div>
</h5>
<ul
*ngIf="addressService.addressList && addressService.addressList.length > 0"
>
<li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft">
{{address.default}}
<input
class="styled-checkbox"
name="addressId"
id="styled-checkbox-{{i}}"
type="radio"
(click)="setDefault(address.addressId)"
[value]="address.addressId"
#addressType
[checked]="address.defaultVal == 1"
/>
<label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
</div>
<div class="floatLeft">
<p>
{{address.building}}, {{address.landmark}}, {{address.address}}
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div> </div>
<ion-content class="sort_wrappper"> </ion-content>
<agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
<div class="clear"></div>
</h5>
<ul *ngIf="addressService.addressList && addressService.addressList.length > 0">
<li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft">{{address.default}}
<input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId)" [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> </div>
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]> <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
<ul *ngIf="searchService.searchList"> <ul *ngIf="searchService.searchList">
<li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li> <li
</ul> *ngFor="let search of searchService.searchList"
</div> (click)="viewPage(search)"
\ No newline at end of file >
{{search.text}}
</li>
</ul>
</div>
src/app/productlist/productlist.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()"> <button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png"> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()"> <input
</div> class="search_bar"
<button class="nav_btn nav_search floatRight" *ngIf="!searchShow"> placeholder="Search here.. eg:shirts, retailers etc..."
</button> (click)="clickSearch()"
<button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"> />
</button> </div>
<div class="clear"></div> <button
class="nav_btn nav_search floatRight"
*ngIf="!searchShow"
(click)="clickSearch()"
></button>
<button
class="nav_btn nav_close floatRight"
*ngIf="searchShow"
(click)="searchClose()"
></button>
<div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="product_list">
<div class="product_list"> <div class="product_taskbar">
<div class="product_taskbar"> <div class="filter floatLeft" (click)="istoggle()"></div>
<div class="filter floatLeft" (click)="istoggle()"> <div class="viewset floatRight">
<div
</div> class="grid_view grid_act floatRight"
<div class="viewset floatRight"> (click)="gridToggle()"
<div class="grid_view grid_act floatRight" (click)="gridToggle()" [class.line_view]="onGrid"> [class.line_view]="onGrid"
</div> ></div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="product_title" *ngIf="data"> <div class="product_title" *ngIf="data">
{{data.shopName}} {{data.shopName}}
</div>
<ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0">
<li *ngFor="let product of prodService.product; let i = index">
<div class="product_image">
<img [src]="product.image" onerror="this.src='../assets/[email protected]'" (click)="prodDetails(i)">
<div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)">
</div>
<div class="featured_badge" *ngIf="product.featured">Featured</div>
</div>
<h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5>
<p (click)="prodDetails(i)">A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span></p>
</li>
</ul>
</div> </div>
<div class="sort_wrappper" *ngIf="isShow" [@slideInOut]> <ul
<div class="sort_inner"> [class.grid_view]="onGrid"
<h4>Sort By</h4> *ngIf="prodService.product && prodService.product.length > 0"
<ul> >
<!-- <li> <li *ngFor="let product of prodService.product; let i = index">
<div class="product_image">
<img
[src]="product.image"
onerror="this.src='../assets/[email protected]'"
(click)="prodDetails(i)"
/>
<div
[ngClass]="checkFavStatus(product.prodId)"
(click)="changeFav(product.prodId)"
></div>
<div class="featured_badge" *ngIf="product.featured">Featured</div>
</div>
<h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5>
<p (click)="prodDetails(i)">
A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0"
>-{{product.discount}}%</span
>
</p>
</li>
</ul>
</div>
<div class="sort_wrappper" *ngIf="isShow" [@slideInOut]>
<div class="sort_inner">
<h4>Sort By</h4>
<ul>
<!-- <li>
<input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="popular" name="sort" (click)="setValue($event.target.value)"> <input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="popular" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-1">Popularity</label> <label for="styled-checkbox-1">Popularity</label>
</li> --> </li> -->
<!-- <li> <!-- <li>
<input class="styled-checkbox" id="styled-checkbox-2" type="radio" value="relevance" name="sort" (click)="setValue($event.target.value)"> <input class="styled-checkbox" id="styled-checkbox-2" type="radio" value="relevance" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-2">Relevence</label> <label for="styled-checkbox-2">Relevence</label>
</li> --> </li> -->
<li> <li>
<input class="styled-checkbox" id="styled-checkbox-3" type="radio" value="low" name="sort" (click)="setValue($event.target.value)"> <input
<label for="styled-checkbox-3">Price Low - High</label> class="styled-checkbox"
</li> id="styled-checkbox-3"
<li> type="radio"
<input class="styled-checkbox" id="styled-checkbox-4" type="radio" value="high" name="sort" (click)="setValue($event.target.value)"> value="low"
<label for="styled-checkbox-4">Price High - Low</label> name="sort"
</li> (click)="setValue($event.target.value)"
<!-- <li> />
<label for="styled-checkbox-3">Price Low - High</label>
</li>
<li>
<input
class="styled-checkbox"
id="styled-checkbox-4"
type="radio"
value="high"
name="sort"
(click)="setValue($event.target.value)"
/>
<label for="styled-checkbox-4">Price High - Low</label>
</li>
<!-- <li>
<input class="styled-checkbox" id="styled-checkbox-5" type="radio" value="rate" name="sort" (click)="setValue($event.target.value)"> <input class="styled-checkbox" id="styled-checkbox-5" type="radio" value="rate" name="sort" (click)="setValue($event.target.value)">
<label for="styled-checkbox-5">Rating</label> <label for="styled-checkbox-5">Rating</label>
</li> --> </li> -->
</ul> </ul>
<div class="sort_footer"> <div class="sort_footer">
<button class="cancel floatLeft" (click)="istoggle()">CANCEL</button> <button class="cancel floatLeft" (click)="istoggle()">CANCEL</button>
<button class="submit floatRight" (click)="istoggle(); submit()">SUBMIT</button> <button class="submit floatRight" (click)="istoggle(); submit()">
<div class="clear"></div> SUBMIT
</div> </button>
</div> <div class="clear"></div>
</div>
</div> </div>
</div>
</ion-content> </ion-content>
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]> <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
<ul *ngIf="searchService.searchList"> <ul *ngIf="searchService.searchList">
<li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li> <li
</ul> *ngFor="let search of searchService.searchList"
</div> (click)="viewPage(search)"
\ No newline at end of file >
{{search.text}}
</li>
</ul>
</div>
src/app/searchmodal/searchmodal.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="closeModal()"> <button class="nav_btn nav_back floatLeft" (click)="closeModal()"></button>
</button> <div class="nav_title floatLeft relative">
<div class="nav_title floatLeft relative"> <input
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> class="search_bar"
</div> placeholder="Search here.. eg:shirts, retailers etc..."
<button class="nav_btn nav_close floatRight" (click)="closeModal()"> (click)="clickSearch()"
</button> (input)="searchFun($event.target.value)"
<div class="clear"></div> #searchText
/>
</div>
<button class="nav_btn nav_close floatRight" (click)="closeModal()"></button>
<div class="clear"></div>
</div> </div>
<div class="search_item_list"> <div class="search_item_list">
<ul *ngIf="searchService.searchList"> <ul *ngIf="searchService.searchList">
<li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}} </li> <li
</ul> *ngFor="let search of searchService.searchList"
</div> (click)="viewPage(search)"
\ No newline at end of file >
{{search.text}}
</li>
</ul>
</div>
src/app/storelist/storelist.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()"> <button class="nav_btn nav_back floatLeft" (click)="goBack()"></button>
</button> <div class="nav_title floatLeft">
<div class="nav_title floatLeft"> <input
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()"> class="search_bar"
</div> placeholder="Search here.. eg:shirts, retailers etc..."
<button class="nav_btn nav_search floatRight" *ngIf="!searchShow"> (click)="clickSearch()"
</button> />
<button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"> </div>
</button> <button
<div class="clear"></div> class="nav_btn nav_search floatRight"
*ngIf="!searchShow"
(click)="clickSearch()"
></button>
<button
class="nav_btn nav_close floatRight"
*ngIf="searchShow"
(click)="searchClose()"
></button>
<div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="home_wrapper"> <div class="home_wrapper">
<div class="home_sub_header"> <div class="home_sub_header">
Featured Stores 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-slides>
</div>
<div class="home_sub_header" *ngIf="data">
{{data.centerName}}
</div>
<div class="nearby_shop_list">
<ul *ngIf="shopperService.shoppers && shopperService.shoppers.length > 0">
<li *ngFor="let shopper of shopperService.shoppers" (click)="goToPage('productlist', shopper)">
<div class="nearby_image">
<img [src]="shopper.profilePic" onerror="this.src='./../../assets/getmi_malls/store298/stores1.png'">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">{{shopper.name}}</span>
<span class="floatRight">0
<img src="../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>{{shopper.caption}}</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div> </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-slides>
</div>
<div class="home_sub_header" *ngIf="data">
{{data.centerName}}
</div>
<div class="nearby_shop_list">
<ul *ngIf="shopperService.shoppers && shopperService.shoppers.length > 0">
<li
*ngFor="let shopper of shopperService.shoppers"
(click)="goToPage('productlist', shopper)"
>
<div class="nearby_image">
<img
[src]="shopper.profilePic"
onerror="this.src='./../../assets/getmi_malls/store298/stores1.png'"
/>
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">{{shopper.name}}</span>
<span class="floatRight"
>0
<img src="../assets/Path61_2.png" />
</span>
<div class="clear"></div>
</h5>
<p>{{shopper.caption}}</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</ion-content> </ion-content>
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]> <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
<ul> <ul>
<li>sample</li> <li>sample</li>
</ul> </ul>
</div> </div>
\ No newline at end of file
src/config/auth.service.ts
...@@ -150,6 +150,7 @@ export class AuthService { ...@@ -150,6 +150,7 @@ export class AuthService {
}; };
this.loggedUser = userData; 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); console.log(this.loggedUser);
}); });
} }
......
src/config/subject.service.ts
...@@ -6,13 +6,22 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject'; ...@@ -6,13 +6,22 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
providedIn: 'root' providedIn: 'root'
}) })
export class SubjectService { export class SubjectService {
private loginState = new BehaviorSubject<any>(null); private loginState = new BehaviorSubject<any>(null);
private DataState = new BehaviorSubject<any>(null);
sendLoginData(state: any) { sendLoginData(state: any) {
this.loginState.next(state); this.loginState.next(state);
} }
getLoginData(): Observable<any> { getLoginData(): Observable<any> {
return this.loginState.asObservable(); return this.loginState.asObservable();
} }
sendUserData(state: any) {
this.DataState.next(state);
}
getUserData(): Observable<any> {
return this.DataState.asObservable();
}
} }
src/global.scss
...@@ -9,25 +9,24 @@ ...@@ -9,25 +9,24 @@
* https://ionicframework.com/docs/layout/global-stylesheets * https://ionicframework.com/docs/layout/global-stylesheets
*/ */
/* Core CSS required for Ionic components to work properly */ /* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css"; @import '~@ionic/angular/css/core.css';
/* Basic CSS for apps built with Ionic */ /* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css"; @import '~@ionic/angular/css/normalize.css';
@import "~@ionic/angular/css/structure.css"; @import '~@ionic/angular/css/structure.css';
@import "~@ionic/angular/css/typography.css"; @import '~@ionic/angular/css/typography.css';
@import '~@ionic/angular/css/display.css'; @import '~@ionic/angular/css/display.css';
/* Optional CSS utils that can be commented out */ /* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css"; @import '~@ionic/angular/css/padding.css';
@import "~@ionic/angular/css/float-elements.css"; @import '~@ionic/angular/css/float-elements.css';
@import "~@ionic/angular/css/text-alignment.css"; @import '~@ionic/angular/css/text-alignment.css';
@import "~@ionic/angular/css/text-transformation.css"; @import '~@ionic/angular/css/text-transformation.css';
@import "~@ionic/angular/css/flex-utils.css"; @import '~@ionic/angular/css/flex-utils.css';
/* /*
Site Name: GETME Site Name: GETME
...@@ -54,7 +53,6 @@ ...@@ -54,7 +53,6 @@
*/ */
/*------------------------------- /*-------------------------------
01. FONTS-N-SIZES 01. FONTS-N-SIZES
...@@ -64,108 +62,107 @@ ...@@ -64,108 +62,107 @@
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap'); @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); @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
* { * {
font-family: 'Abel', sans-serif; font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
display: none; display: none;
} }
.no-scroll .scroll-content { .no-scroll .scroll-content {
overflow: hidden; overflow: hidden;
} }
a { a {
text-decoration: none !important; text-decoration: none !important;
} }
button { button {
outline: none; outline: none;
} }
input[type=number]::-webkit-inner-spin-button, input[type='number']::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none !important; -webkit-appearance: none !important;
margin: 0; margin: 0;
} }
html, html,
body { body {
font-family: 'Lato', sans-serif !important; font-family: 'Lato', sans-serif !important;
margin: 0px; margin: 0px;
} }
button { button {
cursor: pointer; cursor: pointer;
} }
.start_wizard_wrapper { .start_wizard_wrapper {
ion-slides { ion-slides {
.swiper-pagination { .swiper-pagination {
.swiper-pagination-bullet { .swiper-pagination-bullet {
background-color: #29285b; background-color: #29285b;
width: 14px; width: 14px;
height: 3px; height: 3px;
border-radius: 0px; border-radius: 0px;
} }
}
} }
}
} }
.gm-style .gm-style-iw-c { .gm-style .gm-style-iw-c {
padding: 0px !important; padding: 0px !important;
} }
.home_banner { .home_banner {
ion-slides { ion-slides {
.swiper-pagination-bullets { .swiper-pagination-bullets {
left: auto; left: auto;
width: auto; width: auto;
right: 15px; right: 15px;
bottom: 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 { .product_banner {
ion-slides { ion-slides {
.swiper-pagination-bullets { .swiper-pagination-bullets {
left: auto; left: auto;
width: auto; width: auto;
right: 15px; right: 15px;
bottom: 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 02. FONTS-SETTINGS
...@@ -173,50 +170,49 @@ button { ...@@ -173,50 +170,49 @@ button {
--------------------------------*/ --------------------------------*/
.text_color_white { .text_color_white {
color: #fff !important; color: #fff !important;
} }
.font_size_xs { .font_size_xs {
font-size: 12px !important; font-size: 12px !important;
} }
.font_size_sm { .font_size_sm {
font-size: 14px !important; font-size: 14px !important;
} }
.font_size_md { .font_size_md {
font-size: 16px !important; font-size: 16px !important;
} }
.font_size_lg { .font_size_lg {
font-size: 18px !important; font-size: 18px !important;
} }
.font_size_xl { .font_size_xl {
font-size: 20px !important; font-size: 20px !important;
} }
.font_size_vl { .font_size_vl {
font-size: 35px !important; font-size: 35px !important;
} }
.font_weight300 { .font_weight300 {
font-weight: 300 !important; font-weight: 300 !important;
} }
.font_weight400 { .font_weight400 {
font-weight: 400 !important; font-weight: 400 !important;
} }
.font_weight500 { .font_weight500 {
font-weight: 500 !important; font-weight: 500 !important;
} }
.font_weight600 { .font_weight600 {
font-weight: 600 !important; font-weight: 600 !important;
} }
/*------------------------------- /*-------------------------------
03. THEMES-N-BACKGROUNDS 03. THEMES-N-BACKGROUNDS
...@@ -224,31 +220,30 @@ button { ...@@ -224,31 +220,30 @@ button {
--------------------------------*/ --------------------------------*/
.theme_background { .theme_background {
background-size: cover !important; background-size: cover !important;
background-position: center !important; background-position: center !important;
} }
.theme_transparent { .theme_transparent {
background: transparent !important; background: transparent !important;
} }
.theme_white { .theme_white {
background-color: #f7f8fd !important; background-color: #f7f8fd !important;
} }
.theme_off_white { .theme_off_white {
background-color: #f4f4f4 !important; background-color: #f4f4f4 !important;
} }
.theme_dark_transparent { .theme_dark_transparent {
background-color: rgba(0, 0, 0, 0.6) !important; background-color: rgba(0, 0, 0, 0.6) !important;
} }
.theme_white_transparent { .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 04. SPACING-N-POSITIONS
...@@ -256,118 +251,117 @@ button { ...@@ -256,118 +251,117 @@ button {
--------------------------------*/ --------------------------------*/
.width25 { .width25 {
width: 25% !important; width: 25% !important;
} }
.width50 { .width50 {
width: 50% !important; width: 50% !important;
} }
.width75 { .width75 {
width: 75% !important; width: 75% !important;
} }
.widthFull { .widthFull {
width: 100% !important; width: 100% !important;
} }
.widthAuto { .widthAuto {
width: auto !important; width: auto !important;
} }
.height25 { .height25 {
height: 25% !important; height: 25% !important;
} }
.height50 { .height50 {
height: 50% !important; height: 50% !important;
} }
.height75 { .height75 {
width: 75% !important; width: 75% !important;
} }
.heightFull { .heightFull {
height: 100% !important; height: 100% !important;
} }
.heightAuto { .heightAuto {
height: auto !important; height: auto !important;
} }
.p0 { .p0 {
padding: 0px !important; padding: 0px !important;
} }
.pl0 { .pl0 {
padding-left: 0px !important; padding-left: 0px !important;
} }
.pr0 { .pr0 {
padding-right: 0px !important; padding-right: 0px !important;
} }
.pt0 { .pt0 {
padding-top: 0px !important; padding-top: 0px !important;
} }
.pb0 { .pb0 {
padding-bottom: 0px !important; padding-bottom: 0px !important;
} }
.p10 { .p10 {
padding: 10px !important; padding: 10px !important;
} }
.pt10 { .pt10 {
padding-top: 10px !important; padding-top: 10px !important;
} }
.m0 { .m0 {
margin: 0px !important; margin: 0px !important;
} }
.ml0 { .ml0 {
margin-left: 0px !important; margin-left: 0px !important;
} }
.mr0 { .mr0 {
margin-right: 0px !important; margin-right: 0px !important;
} }
.mt0 { .mt0 {
margin-top: 0px !important; margin-top: 0px !important;
} }
.mb0 { .mb0 {
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
.mAuto { .mAuto {
margin: 0 auto !important; margin: 0 auto !important;
} }
.clear { .clear {
clear: both !important; clear: both !important;
} }
.absolute { .absolute {
position: absolute !important; position: absolute !important;
} }
.relative { .relative {
position: relative !important; position: relative !important;
} }
.fixed { .fixed {
position: fixed !important; position: fixed !important;
} }
.borderNone { .borderNone {
border: none !important; border: none !important;
} }
/*------------------------------- /*-------------------------------
05. ALIGMENTS 05. ALIGMENTS
...@@ -375,282 +369,282 @@ button { ...@@ -375,282 +369,282 @@ button {
--------------------------------*/ --------------------------------*/
.floatLeft { .floatLeft {
float: left !important; float: left !important;
} }
.floatRight { .floatRight {
float: right !important; float: right !important;
} }
.textLeft { .textLeft {
text-align: left !important; text-align: left !important;
} }
.textRight { .textRight {
text-align: right !important; text-align: right !important;
} }
.textCenter { .textCenter {
text-align: center !important; text-align: center !important;
} }
.ion-page { .ion-page {
padding-top: 50px; padding-top: 50px;
} }
app-landing { app-landing {
padding: 0px !important; padding: 0px !important;
} }
app-cart { app-cart {
padding: 0px !important; padding: 0px !important;
} }
app-orderplaced { app-orderplaced {
padding: 0px !important; padding: 0px !important;
} }
app-ordercancelled { app-ordercancelled {
padding: 0px !important; padding: 0px !important;
} }
app-delivery { app-delivery {
padding: 0px !important; padding: 0px !important;
} }
app-deliverypop { app-deliverypop {
padding: 0px !important; padding: 0px !important;
} }
.nav_header { .nav_header {
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
z-index: 9999; z-index: 9999;
background-color: #fff; background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); -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); -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); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
} }
.nav_btn { .nav_btn {
width: 50px; width: 50px;
height: 50px; height: 50px;
background-color: transparent; background-color: transparent;
color: #282438; color: #282438;
font-size: 25px; font-size: 25px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 25px; background-size: 25px;
position: relative; position: relative;
} }
.not { .not {
background-color: #3b394d; background-color: #3b394d;
color: #fff; color: #fff;
width: 17px; width: 17px;
height: 17px; height: 17px;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 10px; right: 10px;
font-size: 10px; font-size: 10px;
padding: 4px; padding: 4px;
} }
.nav_title { .nav_title {
width: calc(100% - 100px); width: calc(100% - 100px);
color: rgba(59, 57, 77, 1); color: rgba(59, 57, 77, 1);
padding: 12px; padding: 12px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
font-weight: 400; font-weight: 400;
text-align: center;
img {
height: 30px;
}
h4 {
margin: 0px;
font-weight: 900;
padding: 0px;
font-size: 20px;
text-align: center; text-align: center;
img { text-transform: uppercase;
height: 30px; span {
color: #39267f;
} }
h4 { }
margin: 0px; input {
font-weight: 900; width: 100%;
padding: 0px; border: none;
font-size: 20px; padding-left: 10px;
text-align: center; padding-right: 10px;
text-transform: uppercase; &:focus {
span { outline: none;
color: #39267f;
}
} }
input { &:hover {
width: 100%; outline: none;
border: none;
padding-left: 10px;
padding-right: 10px;
&:focus {
outline: none;
}
&:hover {
outline: none;
}
} }
}
} }
.nav_back { .nav_back {
background-color: #fff !important; background-color: #fff !important;
background-image: url("./assets/Group17_2.png"); background-image: url('./assets/Group17_2.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_back_white { .nav_back_white {
background-color: transparent; background-color: transparent;
background-image: url("./assets/arrow_white.png"); background-image: url('./assets/arrow_white.png');
img { img {
width: 25px !important; width: 25px !important;
display: none; display: none;
} }
} }
.nav_menu { .nav_menu {
background-image: url("./assets/Group22_2.png"); background-image: url('./assets/Group22_2.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_search { .nav_search {
background-image: url("./assets/search_2.png"); background-image: url('./assets/search_2.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_exit { .nav_exit {
background-image: url("./assets/Group17_2.png"); background-image: url('./assets/Group17_2.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_close { .nav_close {
background-image: url("./assets/close.png"); background-image: url('./assets/close.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_cart { .nav_cart {
background-image: url("./assets/cart_icon.png"); background-image: url('./assets/cart_icon.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
ion-header { ion-header {
z-index: 9999 !important; z-index: 9999 !important;
order: 0 !important; order: 0 !important;
} }
.lds-ripple { .lds-ripple {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 64px; width: 64px;
height: 64px; height: 64px;
} }
.lds-ripple div { .lds-ripple div {
position: absolute; position: absolute;
border: 5px solid #29285b; border: 5px solid #29285b;
opacity: 1; opacity: 1;
border-radius: 50%; border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
} }
.lds-ripple div:nth-child(2) { .lds-ripple div:nth-child(2) {
animation-delay: -0.5s; animation-delay: -0.5s;
} }
@keyframes lds-ripple { @keyframes lds-ripple {
0% { 0% {
top: 30px; top: 30px;
left: 30px; left: 30px;
width: 0; width: 0;
height: 0; height: 0;
opacity: 1; opacity: 1;
} }
100% { 100% {
top: -1px; top: -1px;
left: -1px; left: -1px;
width: 60px; width: 60px;
height: 60px; height: 60px;
opacity: 0; opacity: 0;
} }
} }
.loader { .loader {
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
padding-top: 50%; padding-top: 50%;
background-color: rgba(273, 273, 273, 0.9); background-color: rgba(273, 273, 273, 0.9);
text-align: center; text-align: center;
z-index: 99; z-index: 99;
} }
.picker-wrapper { .picker-wrapper {
.picker-toolbar { .picker-toolbar {
.picker-toolbar-button { .picker-toolbar-button {
.picker-button { .picker-button {
color: #29285b; color: #29285b;
font-weight: 900; font-weight: 900;
} }
}
} }
.picker-columns { }
.picker-opt-selected { .picker-columns {
color: #29285b; .picker-opt-selected {
font-weight: 900; color: #29285b;
} font-weight: 900;
} }
}
} }
.search_item_list { .search_item_list {
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
left: 0px; left: 0px;
right: 0px; right: 0px;
width: 100%; width: 100%;
margin: 0px;
top: 50px;
bottom: 0px;
z-index: 99;
ul {
margin: 0px; margin: 0px;
top: 50px; padding: 0px;
bottom: 0px; li {
z-index: 99; list-style: none;
ul { color: rgba(59, 57, 77, 1);
margin: 0px; text-align: left;
padding: 0px; list-style: none;
li { padding: 10px;
list-style: none; border-bottom: 1px solid #ddd;
color: rgba(59, 57, 77, 1); &:hover {
text-align: left; background-color: rgba(59, 57, 77, 1);
list-style: none; color: #fff;
padding: 10px; }
border-bottom: 1px solid #ddd; &:focus {
&:hover { background-color: rgba(59, 57, 77, 1);
background-color: rgba(59, 57, 77, 1); color: #fff;
color: #fff; }
}
&:focus {
background-color: rgba(59, 57, 77, 1);
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