kj
/
mall-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Sort / Filter module added

master
kj1352 6 years ago
parent
ed97265eb0
commit
bd1de284fb
27 changed files with 291 additions and 61491 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      package.json
  2. +1
    -1
      src/app/app-routing.module.ts
  3. +27
    -1
      src/app/mall-details/mall-details.page.html
  4. +24
    -0
      src/app/mall-details/mall-details.page.ts
  5. +17
    -9
      src/app/malls/malls.page.html
  6. +25
    -1
      src/app/malls/malls.page.ts
  7. +33
    -1
      src/app/outlet-details/outlet-details.page.html
  8. +36
    -0
      src/app/outlet-details/outlet-details.page.ts
  9. +47
    -3
      src/app/services/mall.service.ts
  10. BIN
      src/assets/custom/CrispyChickenSandwichMeal435X320-V1.png
  11. +0
    -1
      src/assets/custom/account.svg
  12. +0
    -30435
      src/assets/custom/background-2.svg
  13. +0
    -30451
      src/assets/custom/background-3.svg
  14. +0
    -17
      src/assets/custom/background.svg
  15. +0
    -39
      src/assets/custom/big-bookmark.svg
  16. +0
    -45
      src/assets/custom/bookmark.svg
  17. +0
    -39
      src/assets/custom/compass.svg
  18. +0
    -62
      src/assets/custom/eye.svg
  19. +0
    -50
      src/assets/custom/house-outline.svg
  20. +0
    -53
      src/assets/custom/menu.svg
  21. +0
    -48
      src/assets/custom/placeholder.svg
  22. +0
    -52
      src/assets/custom/restaurant.svg
  23. +0
    -76
      src/assets/custom/share.svg
  24. +0
    -48
      src/assets/custom/shopping-purse-icon.svg
  25. +0
    -53
      src/assets/custom/vision.svg
  26. +0
    -1
      src/assets/shapes.svg
  27. +80
    -4
      src/global.scss

+ 1
- 1
package.json View File

@@ -81,4 +81,4 @@
"android"
]
}
}
}

+ 1
- 1
src/app/app-routing.module.ts View File

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
{ path: '', redirectTo: 'onboarding', pathMatch: 'full' },
{ path: '', redirectTo: 'malls', pathMatch: 'full' },
{ path: 'onboarding', loadChildren: './onboarding/onboarding.module#OnboardingPageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'malls', loadChildren: './malls/malls.module#MallsPageModule' },


+ 27
- 1
src/app/mall-details/mall-details.page.html View File

@@ -1,4 +1,6 @@
<ion-content [scrollEvents]="true" *ngIf="mall_details" (ionScroll)="onScroll($event)">
<div class="overlay" [ngClass]="{ 'active' : show_sort_popup }"></div>

<div class="header-bar" [ngClass]="{'active' : show_top_bar }">
<div class="heading-holder">
<button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
@@ -56,7 +58,7 @@

<div class="results-utilities-holder">
<h5 *ngIf="mall_details"> {{ mall_details.outlets.length }} OUTLETS </h5>
<ion-button color="default" fill="clear"> SORT / FILTER </ion-button>
<ion-button color="default" fill="clear" (click)="togglePopup()"> SORT / FILTER </ion-button>
</div>

<ion-list lines="none" class="result-list" *ngIf="selected_tab === 'food'">
@@ -139,4 +141,28 @@
</figure>
</div>

<div class="sort-filter-holder" [ngClass]="{'active' : show_sort_popup }">
<header>
Sort / Filter <button (click)="togglePopup()"> Done </button>
</header>

<div class="sort-buttons-holder">
<button [ngClass]="{'active' : selected_sort === 'name'}"
(click)="sortBy('name')">
<div class="icon-holder"> A-Z </div>
<span> NAME </span>
</button>
<button [ngClass]="{'active' : selected_sort === 'rating'}"
(click)="sortBy('rating')">
<div class="icon-holder"> <ion-icon name="star"></ion-icon> </div>
<span> RATING </span>
</button>
<button [ngClass]="{'active' : selected_sort === 'time'}"
(click)="sortBy('time')">
<div class="icon-holder"> <ion-icon name="time"></ion-icon> </div>
<span> TIME </span>
</button>
</div>
</div>

</ion-content>

+ 24
- 0
src/app/mall-details/mall-details.page.ts View File

@@ -12,6 +12,8 @@ export class MallDetailsPage implements OnInit {
mall_details: Mall;
selected_tab: string = 'food';
show_top_bar: boolean = false;
show_sort_popup: boolean = false;
selected_sort: string = null;

constructor(
private mallService: MallService,
@@ -56,4 +58,26 @@ export class MallDetailsPage implements OnInit {
this.router.navigate(['/outlet-details', { mall_id: mall_id, outlet_id: outlet_id }]);
}

sortBy(type: string) {
this.selected_sort = type;
switch(this.selected_sort) {
case 'name': this.mall_details.outlets.sort(function(a, b){
if(a.name < b.name) { return -1; }
if(a.name > b.name) { return 1; }
return 0;
});
break;
case 'rating': this.mall_details.outlets.sort(function(a, b){
if(a.rating < b.rating) { return -1; }
if(a.rating > b.rating) { return 1; }
return 0;
}).reverse();
break;
}
}

togglePopup() {
this.show_sort_popup = !this.show_sort_popup;
}

}

+ 17
- 9
src/app/malls/malls.page.html View File

@@ -1,4 +1,5 @@
<ion-content>
<div class="overlay" [ngClass]="{ 'active' : show_sort_popup }"></div>

<section class="header-bar">
<h2> Find malls near you </h2>
@@ -16,7 +17,7 @@

<div class="results-utilities-holder">
<h5 *ngIf="malls"> {{ malls.length }} MALLS </h5>
<ion-button color="default" fill="clear"> SORT / FILTER </ion-button>
<ion-button color="default" fill="clear" (click)="togglePopup()"> SORT / FILTER </ion-button>
</div>

<ion-list lines="none" class="result-list">
@@ -116,21 +117,28 @@
</ion-item>
</ion-list>

<!-- <div class="sort-filter-holder">
<div class="sort-filter-holder" [ngClass]="{'active' : show_sort_popup }">
<header>
Sort / Filter <button> Done </button>
Sort / Filter <button (click)="togglePopup()"> Done </button>
</header>

<div class="sort-buttons-holder">
<button>
<button [ngClass]="{'active' : selected_sort === 'name'}"
(click)="sortBy('name')">
<div class="icon-holder"> A-Z </div>
<span> Name </span>
<span> NAME </span>
</button>
<button>
<div class="icon-holder"> A-Z </div>
<span> Name </span>
<button [ngClass]="{'active' : selected_sort === 'rating'}"
(click)="sortBy('rating')">
<div class="icon-holder"> <ion-icon name="star"></ion-icon> </div>
<span> RATING </span>
</button>
<button [ngClass]="{'active' : selected_sort === 'time'}"
(click)="sortBy('time')">
<div class="icon-holder"> <ion-icon name="time"></ion-icon> </div>
<span> TIME </span>
</button>
</div>
</div> -->
</div>

</ion-content>

+ 25
- 1
src/app/malls/malls.page.ts View File

@@ -10,6 +10,8 @@ import { Router } from '@angular/router';
export class MallsPage implements OnInit {
selected_tab: string = 'you';
malls: Array<Mall>;
show_sort_popup: boolean = false;
selected_sort: string = null;

constructor(
private mallService: MallService,
@@ -25,8 +27,30 @@ export class MallsPage implements OnInit {
});
}

showMallDetails(mall) {
showMallDetails(mall: Mall) {
this.router.navigate(['/mall-details', { mall_id: mall.id }]);
}

sortBy(type: string) {
this.selected_sort = type;
switch(this.selected_sort) {
case 'name': this.malls.sort(function(a, b){
if(a.name < b.name) { return -1; }
if(a.name > b.name) { return 1; }
return 0;
});
break;
case 'rating': this.malls.sort(function(a, b){
if(a.rating < b.rating) { return -1; }
if(a.rating > b.rating) { return 1; }
return 0;
}).reverse();
break;
}
}

togglePopup() {
this.show_sort_popup = !this.show_sort_popup;
}

}

+ 33
- 1
src/app/outlet-details/outlet-details.page.html View File

@@ -1,4 +1,6 @@
<ion-content [scrollEvents]="true" *ngIf="outlet_details" (ionScroll)="onScroll($event)">
<div class="overlay" [ngClass]="{ 'active' : show_sort_popup }"></div>

<div class="header-bar" [ngClass]="{'active' : show_top_bar }">
<div class="heading-holder">
<button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
@@ -55,7 +57,7 @@

<div class="results-utilities-holder">
<h5 *ngIf="outlet_details"> {{ outlet_details.menu_items.length }} FOOD ITEMS </h5>
<ion-button color="default" fill="clear"> SORT / FILTER </ion-button>
<ion-button color="default" fill="clear" (click)="togglePopup()"> SORT / FILTER </ion-button>
</div>

<div class="items-holder">
@@ -89,4 +91,34 @@
<img src="https://d2z1w4aiblvrwu.cloudfront.net/ad/IO1u/mcdonalds-2-mcdouble-and-fries-too-good-to-last-large-6.jpg" alt="">
</div>


<div class="sort-filter-holder" [ngClass]="{'active' : show_sort_popup }">
<header>
Sort / Filter <button (click)="togglePopup()"> Done </button>
</header>

<div class="sort-buttons-holder">
<button [ngClass]="{'active' : selected_sort === 'name'}"
(click)="sortBy('name')">
<div class="icon-holder"> A-Z </div>
<span> NAME </span>
</button>
<button [ngClass]="{'active' : selected_sort === 'rating'}"
(click)="sortBy('rating')">
<div class="icon-holder"> <ion-icon name="star"></ion-icon> </div>
<span> RATING </span>
</button>
<button [ngClass]="{'active' : selected_sort === 'duration'}"
(click)="sortBy('duration')">
<div class="icon-holder"> <ion-icon name="time"></ion-icon> </div>
<span> WAITING TIME </span>
</button>
<button [ngClass]="{'active' : selected_sort === 'price'}"
(click)="sortBy('price')">
<div class="icon-holder"> &#8377; </div>
<span> PRICE </span>
</button>
</div>
</div>

</ion-content>

+ 36
- 0
src/app/outlet-details/outlet-details.page.ts View File

@@ -16,6 +16,8 @@ export class OutletDetailsPage implements OnInit {
show_only_veg: boolean = false;
selected_tag: string = null;
selected_description: string = null;
show_sort_popup: boolean = false;
selected_sort: string = null;

constructor(
private route: ActivatedRoute,
@@ -71,4 +73,38 @@ export class OutletDetailsPage implements OnInit {
}
}

sortBy(type: string) {
this.selected_sort = type;
switch(this.selected_sort) {
case 'name': this.temp_outlet_details.menu_items.sort(function(a, b){
if(a.name < b.name) { return -1; }
if(a.name > b.name) { return 1; }
return 0;
});
break;
case 'rating': this.temp_outlet_details.menu_items.sort(function(a, b){
if(a.rating < b.rating) { return -1; }
if(a.rating > b.rating) { return 1; }
return 0;
}).reverse();
break;
case 'price': this.temp_outlet_details.menu_items.sort(function(a, b){
if(a.price < b.price) { return -1; }
if(a.price > b.price) { return 1; }
return 0;
});
break;
case 'duration': this.temp_outlet_details.menu_items.sort(function(a, b){
if(a.wait_duration < b.wait_duration) { return -1; }
if(a.wait_duration > b.wait_duration) { return 1; }
return 0;
});
break;
}
}

togglePopup() {
this.show_sort_popup = !this.show_sort_popup;
}

}

+ 47
- 3
src/app/services/mall.service.ts View File

@@ -87,7 +87,7 @@ export class MallService {
wait_duration: 13,
price: 120,
discount: 50,
rating: 4.3,
rating: 4.0,
tags: ['spicy', 'dinner']
}, {
id: '0003',
@@ -120,6 +120,50 @@ export class MallService {
is_food_outlet: false,
is_bookmarked: true,
rating: 4.8,
}, {
id: '0003',
image_url: 'https://www.mbarendezvous.com/images/top-stories-img/bannerimage_1463407053.jpg',
name: 'Cafe Coffee Day',
description: 'Veg / Non-Veg Cafe',
tags: ['hot', 'cold', 'pizza', 'beverage'],
menu_items: [{
id: '0001',
name: 'Margherita Pizza',
image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-pizzas-side-1.jpg',
description: 'Cheese pizza topped with tomato sauce, garlic sauce and fresh basil.',
is_vegeterian: true,
wait_duration: 25,
price: 150,
discount: 0,
rating: 3.5,
tags: ['pizza', 'hot']
}, {
id: '0002',
name: 'Espresso Shot',
image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-classic-hot-bottom.jpg',
description: 'Coffee at its simplest best. Without milk, served with cold water on the side. We call it a simple big-shot.',
is_vegeterian: true,
wait_duration: 5,
price: 80,
discount: 0,
rating: 4.5,
tags: ['hot', 'beverage']
}, {
id: '0003',
name: 'The Coffee Gola',
image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-Coffetini-Easel-side.jpg',
description: 'The perfect blend of coffee, almonds and a rich vanilla gola. Sure to give you an exotic kulfi experience.',
is_vegeterian: true,
wait_duration: 15,
price: 200,
discount: 10,
rating: 4.9,
tags: ['cold', 'beverage']
}],
offers: [],
is_food_outlet: true,
is_bookmarked: false,
rating: 4,
}],
offer_collection: [{
name: 'Food',
@@ -132,7 +176,7 @@ export class MallService {
name: 'Shopping',
offers: []
}],
rating: 4.3,
rating: 4.1,
distance: 2,
location: {
latitude: 12.903903292,
@@ -154,7 +198,7 @@ export class MallService {
name: 'Shopping',
offers: []
}],
rating: 4.3,
rating: 4.5,
distance: 2,
location: {
latitude: 12.903903292,


BIN
src/assets/custom/CrispyChickenSandwichMeal435X320-V1.png View File

Before After
Width: 435  |  Height: 320  |  Size: 44 KiB

+ 0
- 1
src/assets/custom/account.svg View File

@@ -1 +0,0 @@
<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m512 256c0-141.488281-114.496094-256-256-256-141.488281 0-256 114.496094-256 256 0 140.234375 113.539062 256 256 256 141.875 0 256-115.121094 256-256zm-256-226c124.617188 0 226 101.382812 226 226 0 45.585938-13.558594 89.402344-38.703125 126.515625-100.96875-108.609375-273.441406-108.804687-374.59375 0-25.144531-37.113281-38.703125-80.929687-38.703125-126.515625 0-124.617188 101.382812-226 226-226zm-168.585938 376.5c89.773438-100.695312 247.421876-100.671875 337.167969 0-90.074219 100.773438-247.054687 100.804688-337.167969 0zm0 0"/><path d="m256 271c49.625 0 90-40.375 90-90v-30c0-49.625-40.375-90-90-90s-90 40.375-90 90v30c0 49.625 40.375 90 90 90zm-60-120c0-33.085938 26.914062-60 60-60s60 26.914062 60 60v30c0 33.085938-26.914062 60-60 60s-60-26.914062-60-60zm0 0"/></svg>

+ 0
- 30435
src/assets/custom/background-2.svg
File diff suppressed because it is too large
View File


+ 0
- 30451
src/assets/custom/background-3.svg
File diff suppressed because it is too large
View File


+ 0
- 17
src/assets/custom/background.svg View File

@@ -1,17 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 750 1334" style="enable-background:new 0 0 750 1334;" xml:space="preserve">
<style type="text/css">
.st0{fill:#7250C9;}
.st1{fill:#7D58DC;}
.st2{fill:#684BB9;}
</style>
<rect class="st0" width="750" height="1334"/>
<path class="st1" d="M750,599.22C702.84,571.98,647.8,549.1,585,537C286.16,479.4,39,709.67,0,747.11c0-115.06,0-230.12,0-345.19
c26.88,4.25,73.6,8.48,126.47-5.98c166.64-45.59,192.38-221.61,356.31-314.5C533.11,52.92,617.25,20.47,750,30.33
C750,219.96,750,409.59,750,599.22z"/>
<path class="st2" d="M750,1102.44c-31.64,6.07-81.2,16.7-140.56,34.56c-173.12,52.07-237.59,107.8-384.44,153.33
c-50.79,15.75-126.97,35.09-225,43.67c0-98.26,0-196.52,0-294.78c29.84-24.71,80.12-60.86,149.44-84.44
c174.62-59.4,290.56,22.04,451.11-42.22c37.59-15.05,92.28-43.94,149.44-104.89C750,905.93,750,1004.19,750,1102.44z"/>
</svg>

+ 0
- 39
src/assets/custom/big-bookmark.svg View File

@@ -1,39 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 70.015 70.015" style="enable-background:new 0 0 70.015 70.015;" xml:space="preserve">
<g id="_x37_7_Essential_Icons_3_">
<path id="Bookmark" d="M54.008,0h-38c-1.1,0-2,0.9-2,2v66c0,1.8,2.1,2.7,3.4,1.4l17.6-17.6l17.6,17.6c1,1,3.4,0.7,3.4-1.4V2
C56.008,0.9,55.108,0,54.008,0z M52.008,63.2l-15.6-15.6c-0.8-0.8-2-0.8-2.8,0l-15.6,15.6V4h34V63.2z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 45
src/assets/custom/bookmark.svg View File

@@ -1,45 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="431.972px" height="431.972px" viewBox="0 0 431.972 431.972" style="enable-background:new 0 0 431.972 431.972;"
xml:space="preserve">
<g>
<path d="M393.146,14.279c-3.713-5.333-8.713-9.233-14.989-11.707c-3.997-1.711-8.186-2.568-12.565-2.568V0H66.378
c-4.377,0-8.562,0.857-12.56,2.568c-6.28,2.472-11.278,6.377-14.989,11.707c-3.71,5.33-5.568,11.228-5.568,17.701v368.019
c0,6.475,1.858,12.371,5.568,17.706c3.711,5.329,8.709,9.233,14.989,11.704c3.994,1.711,8.183,2.566,12.56,2.566
c8.949,0,16.844-3.142,23.698-9.418l125.91-121.062l125.91,121.065c6.663,6.081,14.562,9.127,23.695,9.127
c4.76,0,8.948-0.756,12.565-2.279c6.276-2.471,11.276-6.375,14.989-11.711c3.71-5.328,5.564-11.225,5.564-17.699V31.98
C398.71,25.507,396.852,19.609,393.146,14.279z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 39
src/assets/custom/compass.svg View File

@@ -1,39 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490.735 490.735" style="enable-background:new 0 0 490.735 490.735;" xml:space="preserve">
<g>
<path d="M254.464,470.039l-59.5-174.2l-174.3-59.6c-26.7-9.1-27.8-46.4-1.7-57.1l429.5-176.7c25.1-10.3,50.2,14.8,39.9,39.9
l-176.8,429.4C300.864,497.839,263.564,496.639,254.464,470.039z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 62
src/assets/custom/eye.svg View File

@@ -1,62 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="511.626px" height="511.627px" viewBox="0 0 511.626 511.627" style="enable-background:new 0 0 511.626 511.627;"
xml:space="preserve">
<g>
<g>
<path d="M361.161,291.652c15.037-21.796,22.56-45.922,22.56-72.375c0-7.422-0.76-15.417-2.286-23.984l-79.938,143.321
C326.235,329.101,346.125,313.438,361.161,291.652z"/>
<path d="M372.872,94.221c0.191-0.378,0.28-1.235,0.28-2.568c0-3.237-1.522-5.802-4.571-7.715c-0.568-0.38-2.423-1.475-5.568-3.287
c-3.138-1.805-6.14-3.567-8.989-5.282c-2.854-1.713-5.989-3.472-9.422-5.28c-3.426-1.809-6.375-3.284-8.846-4.427
c-2.479-1.141-4.189-1.713-5.141-1.713c-3.426,0-6.092,1.525-7.994,4.569l-15.413,27.696c-17.316-3.234-34.451-4.854-51.391-4.854
c-51.201,0-98.404,12.946-141.613,38.831C70.998,156.08,34.836,191.385,5.711,236.114C1.903,242.019,0,248.586,0,255.819
c0,7.231,1.903,13.801,5.711,19.698c16.748,26.073,36.592,49.396,59.528,69.949c22.936,20.561,48.011,37.018,75.229,49.396
c-8.375,14.273-12.562,22.556-12.562,24.842c0,3.425,1.524,6.088,4.57,7.99c23.219,13.329,35.97,19.985,38.256,19.985
c3.422,0,6.089-1.529,7.992-4.575l13.99-25.406c20.177-35.967,50.248-89.931,90.222-161.878
C322.908,183.871,352.886,130.005,372.872,94.221z M158.456,362.885C108.97,340.616,68.33,304.93,36.547,255.822
c28.931-44.921,65.19-78.518,108.777-100.783c-11.61,19.792-17.417,41.206-17.417,64.237c0,20.365,4.661,39.68,13.99,57.955
c9.327,18.274,22.27,33.4,38.83,45.392L158.456,362.885z M265.525,155.887c-2.662,2.667-5.906,3.999-9.712,3.999
c-16.368,0-30.361,5.808-41.971,17.416c-11.613,11.615-17.416,25.603-17.416,41.971c0,3.811-1.336,7.044-3.999,9.71
c-2.668,2.667-5.902,3.999-9.707,3.999c-3.809,0-7.045-1.334-9.71-3.999c-2.667-2.666-3.999-5.903-3.999-9.71
c0-23.79,8.52-44.206,25.553-61.242c17.034-17.034,37.447-25.553,61.241-25.553c3.806,0,7.043,1.336,9.713,3.999
c2.662,2.664,3.996,5.901,3.996,9.707C269.515,149.992,268.181,153.228,265.525,155.887z"/>
<path d="M505.916,236.114c-10.853-18.08-24.603-35.594-41.255-52.534c-16.646-16.939-34.022-31.496-52.105-43.68l-17.987,31.977
c31.785,21.888,58.625,49.87,80.51,83.939c-23.024,35.782-51.723,65-86.07,87.648c-34.358,22.661-71.712,35.693-112.065,39.115
l-21.129,37.688c42.257,0,82.18-9.038,119.769-27.121c37.59-18.076,70.668-43.488,99.216-76.225
c13.322-15.421,23.695-29.219,31.121-41.401c3.806-6.476,5.708-13.046,5.708-19.702
C511.626,249.157,509.724,242.59,505.916,236.114z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 50
src/assets/custom/house-outline.svg View File

@@ -1,50 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="611.997px" height="611.998px" viewBox="0 0 611.997 611.998" style="enable-background:new 0 0 611.997 611.998;"
xml:space="preserve">
<g>
<g>
<path d="M511.114,300.251c-9.94,0-17.638,7.663-17.638,17.651v241.105H368.401v-98.453c0-9.236-7.697-17.31-17.002-17.31h-90.435
c-9.948,0-17.96,8.073-17.96,17.31v98.453h-124.76v-233.1c0-9.306-7.69-17.036-17.638-17.036c-9.298,0-16.995,7.73-16.995,17.036
v250.752c0,9.305,7.697,17.036,16.995,17.036h160.358c9.298,0,16.995-7.731,16.995-17.036v-98.454h55.801v98.454
c0,9.305,7.697,17.036,17.639,17.036h159.715c9.299,0,16.995-7.731,16.995-17.036V317.903
C528.109,307.915,520.413,300.251,511.114,300.251z"/>
<path d="M607.003,314.003L467.819,174.225V78.919c0-9.921-8.019-17.583-17.96-17.583c-9.305,0-17.001,7.663-17.001,17.583v60.345
L318.046,23.774c-3.518-3.558-7.697-5.474-11.864-5.474c-4.81,0-8.983,1.984-12.507,5.474L5.361,312.087
c-6.917,6.91-7.375,17.994,0,24.357c6.411,7.389,17.454,6.91,24.371,0l276.45-275.793l275.807,278.393
c2.873,2.874,7.054,4.516,12.507,4.516c4.81,0,8.976-1.642,12.507-4.516C613.42,332.613,613.899,320.982,607.003,314.003z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 53
src/assets/custom/menu.svg View File

@@ -1,53 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M491.318,235.318H20.682C9.26,235.318,0,244.577,0,256s9.26,20.682,20.682,20.682h470.636
c11.423,0,20.682-9.259,20.682-20.682C512,244.578,502.741,235.318,491.318,235.318z"/>
</g>
</g>
<g>
<g>
<path d="M491.318,78.439H20.682C9.26,78.439,0,87.699,0,99.121c0,11.422,9.26,20.682,20.682,20.682h470.636
c11.423,0,20.682-9.26,20.682-20.682C512,87.699,502.741,78.439,491.318,78.439z"/>
</g>
</g>
<g>
<g>
<path d="M491.318,392.197H20.682C9.26,392.197,0,401.456,0,412.879s9.26,20.682,20.682,20.682h470.636
c11.423,0,20.682-9.259,20.682-20.682S502.741,392.197,491.318,392.197z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 48
src/assets/custom/placeholder.svg View File

@@ -1,48 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 477 477" style="enable-background:new 0 0 477 477;" xml:space="preserve">
<g>
<g>
<path d="M238.4,0C133,0,47.2,85.8,47.2,191.2c0,12,1.1,24.1,3.4,35.9c0.1,0.7,0.5,2.8,1.3,6.4c2.9,12.9,7.2,25.6,12.8,37.7
c20.6,48.5,65.9,123,165.3,202.8c2.5,2,5.5,3,8.5,3s6-1,8.5-3c99.3-79.8,144.7-154.3,165.3-202.8c5.6-12.1,9.9-24.7,12.8-37.7
c0.8-3.6,1.2-5.7,1.3-6.4c2.2-11.8,3.4-23.9,3.4-35.9C429.6,85.8,343.8,0,238.4,0z M399.6,222.4c0,0.2-0.1,0.4-0.1,0.6
c-0.1,0.5-0.4,2-0.9,4.3c0,0.1,0,0.1,0,0.2c-2.5,11.2-6.2,22.1-11.1,32.6c-0.1,0.1-0.1,0.3-0.2,0.4
c-18.7,44.3-59.7,111.9-148.9,185.6c-89.2-73.7-130.2-141.3-148.9-185.6c-0.1-0.1-0.1-0.3-0.2-0.4c-4.8-10.4-8.5-21.4-11.1-32.6
c0-0.1,0-0.1,0-0.2c-0.6-2.3-0.8-3.8-0.9-4.3c0-0.2-0.1-0.4-0.1-0.7c-2-10.3-3-20.7-3-31.2c0-90.5,73.7-164.2,164.2-164.2
s164.2,73.7,164.2,164.2C402.6,201.7,401.6,212.2,399.6,222.4z"/>
<path d="M238.4,71.9c-66.9,0-121.4,54.5-121.4,121.4s54.5,121.4,121.4,121.4s121.4-54.5,121.4-121.4S305.3,71.9,238.4,71.9z
M238.4,287.7c-52.1,0-94.4-42.4-94.4-94.4s42.4-94.4,94.4-94.4s94.4,42.4,94.4,94.4S290.5,287.7,238.4,287.7z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 52
src/assets/custom/restaurant.svg View File

@@ -1,52 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 489.773 489.773" style="enable-background:new 0 0 489.773 489.773;" xml:space="preserve">
<g id="XMLID_95_">
<path id="XMLID_98_" d="M155.183,305.646c-2.081,0.175-4.157,0.265-6.238,0.265c-5.693,0-11.23-0.826-16.652-2.081L6.834,429.293
c-6.158,6.149-6.158,16.137,0,22.287l32.47,32.478c6.158,6.15,16.135,6.15,22.276,0l150.785-150.757l-27.944-30.15L155.183,305.646
z"/>
<path id="XMLID_97_" d="M485.345,104.649c-5.888-5.885-15.417-5.885-21.304,0l-81.303,81.301c-7.693,7.685-20.154,7.685-27.847,0
c-7.659-7.679-7.659-20.13,0-27.807l80.901-80.884c6.112-6.118,6.112-16.036,0-22.168c-6.141-6.11-16.055-6.11-22.167,0
l-80.868,80.876c-7.693,7.693-20.14,7.693-27.833,0c-7.677-7.676-7.677-20.136,0-27.806l81.286-81.293
c5.904-5.894,5.904-15.441,0-21.343c-5.888-5.895-15.434-5.895-21.338,0l-91.458,91.463
c-21.989,22.003-28.935,52.888-21.816,80.991l61.31,61.314c28.101,7.093,59.001,0.144,80.965-21.841l91.471-91.458
C491.249,120.1,491.249,110.543,485.345,104.649z"/>
<path id="XMLID_96_" d="M41.093,13.791c-3.134-3.135-7.372-4.854-11.724-4.854c-0.926,0-1.857,0.079-2.766,0.231
c-5.295,0.896-9.838,4.295-12.172,9.133c-26.79,55.373-15.594,121.631,27.894,165.121l77.801,77.791
c7.676,7.685,18.055,11.939,28.819,11.939c1.151,0,2.305-0.048,3.456-0.143l45.171-3.855l196.971,212.489
c3.058,3.303,7.342,5.221,11.855,5.31c0.093,0,0.19,0,0.288,0c4.412,0,8.636-1.743,11.771-4.855l33.734-33.741
c3.117-3.11,4.859-7.331,4.859-11.73c0-4.398-1.742-8.622-4.846-11.732L41.093,13.791z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 76
src/assets/custom/share.svg View File

@@ -1,76 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 473.932 473.932" style="enable-background:new 0 0 473.932 473.932;" xml:space="preserve">
<g>
<g>
<path style="fill:#010002;" d="M385.513,301.214c-27.438,0-51.64,13.072-67.452,33.09l-146.66-75.002
c1.92-7.161,3.3-14.56,3.3-22.347c0-8.477-1.639-16.458-3.926-24.224l146.013-74.656c15.725,20.924,40.553,34.6,68.746,34.6
c47.758,0,86.391-38.633,86.391-86.348C471.926,38.655,433.292,0,385.535,0c-47.65,0-86.326,38.655-86.326,86.326
c0,7.809,1.381,15.229,3.322,22.412L155.892,183.74c-15.833-20.039-40.079-33.154-67.56-33.154
c-47.715,0-86.326,38.676-86.326,86.369s38.612,86.348,86.326,86.348c28.236,0,53.043-13.719,68.832-34.664l145.948,74.656
c-2.287,7.744-3.947,15.79-3.947,24.289c0,47.693,38.676,86.348,86.326,86.348c47.758,0,86.391-38.655,86.391-86.348
C471.904,339.848,433.271,301.214,385.513,301.214z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 48
src/assets/custom/shopping-purse-icon.svg View File

@@ -1,48 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<g>
<g>
<g>
<path d="M15.733,20.125c1.104,0,2-0.896,2-2v-7.8C17.733,6.838,20.57,4,24.058,4c3.487,0,6.325,2.838,6.325,6.325v7.8
c0,1.104,0.896,2,2,2c1.104,0,2-0.896,2-2v-7.8C34.383,4.632,29.751,0,24.058,0c-5.692,0-10.324,4.632-10.324,10.325v7.8
C13.733,19.229,14.629,20.125,15.733,20.125z"/>
<path d="M47,15.631H36.383v2.494c0,2.206-1.794,4-4,4c-2.205,0-4-1.794-4-4v-2.494h-8.649v2.494c0,2.206-1.794,4-4,4
s-4-1.794-4-4v-2.494H1c-0.552,0-0.893,0.435-0.762,0.971L7.235,45.1C7.658,46.702,9.343,48,11,48h26
c1.658,0,3.342-1.299,3.767-2.9l6.996-28.498C47.893,16.065,47.553,15.631,47,15.631z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 53
src/assets/custom/vision.svg View File

@@ -1,53 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="511.626px" height="511.626px" viewBox="0 0 511.626 511.626" style="enable-background:new 0 0 511.626 511.626;"
xml:space="preserve">
<g>
<path d="M505.918,236.117c-26.651-43.587-62.485-78.609-107.497-105.065c-45.015-26.457-92.549-39.687-142.608-39.687
c-50.059,0-97.595,13.225-142.61,39.687C68.187,157.508,32.355,192.53,5.708,236.117C1.903,242.778,0,249.345,0,255.818
c0,6.473,1.903,13.04,5.708,19.699c26.647,43.589,62.479,78.614,107.495,105.064c45.015,26.46,92.551,39.68,142.61,39.68
c50.06,0,97.594-13.176,142.608-39.536c45.012-26.361,80.852-61.432,107.497-105.208c3.806-6.659,5.708-13.223,5.708-19.699
C511.626,249.345,509.724,242.778,505.918,236.117z M194.568,158.03c17.034-17.034,37.447-25.554,61.242-25.554
c3.805,0,7.043,1.336,9.709,3.999c2.662,2.664,4,5.901,4,9.707c0,3.809-1.338,7.044-3.994,9.704
c-2.662,2.667-5.902,3.999-9.708,3.999c-16.368,0-30.362,5.808-41.971,17.416c-11.613,11.615-17.416,25.603-17.416,41.971
c0,3.811-1.336,7.044-3.999,9.71c-2.667,2.668-5.901,3.999-9.707,3.999c-3.809,0-7.044-1.334-9.71-3.999
c-2.667-2.666-3.999-5.903-3.999-9.71C169.015,195.482,177.535,175.065,194.568,158.03z M379.867,349.04
c-38.164,23.12-79.514,34.687-124.054,34.687c-44.539,0-85.889-11.56-124.051-34.687s-69.901-54.2-95.215-93.222
c28.931-44.921,65.19-78.518,108.777-100.783c-11.61,19.792-17.417,41.207-17.417,64.236c0,35.216,12.517,65.329,37.544,90.362
s55.151,37.544,90.362,37.544c35.214,0,65.329-12.518,90.362-37.544s37.545-55.146,37.545-90.362
c0-23.029-5.808-44.447-17.419-64.236c43.585,22.265,79.846,55.865,108.776,100.783C449.767,294.84,418.031,325.913,379.867,349.04
z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 0
- 1
src/assets/shapes.svg View File

@@ -1 +0,0 @@
<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

+ 80
- 4
src/global.scss View File

@@ -90,7 +90,6 @@ header, h1, h2, h3, h4, h5 {
padding-top: 10px;
transition: transform 0.3s;
transform: scale(0);
transition-delay: 0.7s;

&.active {
transform: scale(1);
@@ -117,9 +116,8 @@ header, h1, h2, h3, h4, h5 {
display: flex;
justify-content: space-between;
align-items: flex-start;
transition: transform 0.5s;
transition: transform 0.3s;
transform: scale(0);
transition-delay: 0.3s;

&.active {
transform: scale(1);
@@ -164,7 +162,7 @@ header, h1, h2, h3, h4, h5 {
pointer-events: none;
background-color: black;
opacity: 0;
z-index: 1;
z-index: 3;
transition: opacity 0.5s;

&.active {
@@ -282,3 +280,81 @@ header, h1, h2, h3, h4, h5 {
}
}
}

.sort-filter-holder {
background-color: white;
position: fixed;
width: 100%;
z-index: 5;
bottom: 0;
left: 0;
box-shadow: 0px 0px 5px var(--brand-grey);
transition: transform 0.5s;
transform: translateY(50vh);

&.active {
transform: translateY(0);
}

header {
background-color: var(--brand-blue);
color: white;
display: flex;
justify-content: space-between;
padding: 15px;
font-size: 14px;
align-items: center;
position: relative;

button {
background-color: transparent;
border: 1px solid white;
font-size: 10px;
height: 25px;
padding: 0 15px;
color: white;
border-radius: 30px;
}
}

.sort-buttons-holder {
display: flex;
padding: 15px;
flex-wrap: wrap;
justify-content: space-between;
position: relative;

button {
background-color: transparent;
color: var(--brand-dark-grey);
font-size: 10px;
margin-bottom: 30px;

&.active {
color: var(--brand-blue);
.icon-holder {
border-color: var(--brand-blue);
color: var(--brand-blue);
}
}

.icon-holder {
border: 1px solid var(--brand-grey);
color: var(--brand-grey);
width: 50px;
height: 50px;
margin: 0 auto 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
letter-spacing: 0.5px;
font-size: 15px;

ion-icon {
font-size: 24px;
}
}
}
}
}

Write Preview
Loading…
Cancel
Save