{{ cart_items.length }} ITEMS
+{{ cart_items.length }} ITEM(S)
-
-
{{ i + 1 }}. {{ item.menu_details.name }} - +Change -{{ i + 1 }}. {{ item.menu_details.name }} -
-
- Rs. {{ item.total_price }} -
- +
- ₹ {{ item.total_price }} +
- + +
-
@@ -35,9 +35,12 @@
-
- ++ Schedule time +
{{ getPickupTimeFormat(item.pickup_time) }} - + - @@ -47,32 +50,103 @@
- Apply
-
-
PROMOCODE
--
-
- Rs. {{ total_cart_amount }} -
- Rs.20 +
- ₹ {{ total_cart_amount }} +
-
+
Apply ++ Remove {{ selected_promocode }} + ++
+ - ₹ 20
- 18%
- Total Rs. {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }}
+ Total ₹ {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }}
- Rs. 0
+ Pay Now
+ = [];
total_cart_amount: number = 0;
- total_discount: number = 0;
+ show_promocodes: boolean = false;
+ selected_promocode: string = '';
+ total_savings: number = 0;
+ temp_outlet_details: IOutlet;
+ instant_menu: boolean = false;
+ mall_details: IMall;
+ outlet_details: IOutlet;
+ new_pickup_time: Date;
constructor(
private location: Location,
@@ -29,6 +37,15 @@ export class CartPage implements OnInit {
ngOnInit() {}
ionViewDidEnter() {
+ document.querySelector('.menu-icon-holder').classList.add('hide');
+ this.refresh();
+ }
+
+ refresh() {
+ this.show_order_details = false;
+ this.cart_items = [];
+ this.all_malls= [];
+ this.total_cart_amount = 0;
this.mallService.getAllMalls().then((malls: Array) => {
this.all_malls = malls;
@@ -46,11 +63,23 @@ export class CartPage implements OnInit {
this.total_cart_amount += this.cart_items[i].total_price;
}
});
+ }
+
+ openInstantMenu(item: any) {
+ this.instant_menu = true;
+ this.mallService.getMallByID(item.mall_id).then((data: IMall) => {
+ this.mall_details = data;
+ this.outlet_details = this.mall_details.outlets.find((outlet) => outlet.id === item.outlet_id);
+ this.temp_outlet_details = JSON.parse(JSON.stringify(this.outlet_details));
+ });
+ }
- }
+ ngOnDestroy() {
+ document.querySelector('.menu-icon-holder').classList.remove('hide');
+ }
increaseCartItemCount(item: any) {
- let i: number, cart_items;
+ let i: number, cart_items: any;
for (i = 0; i < this.cart_items.length; i += 1) {
if (this.cart_items[i].menu_item === item.menu_item) {
this.cart_items[i].quantity += 1;
@@ -62,10 +91,12 @@ export class CartPage implements OnInit {
for (i = 0; i < cart_items.length; i += 1) {
delete cart_items[i]['menu_details'];
}
+ this.calculateTotalAfterPromo();
this.cartService.updateCartItems(cart_items);
}
decreaseCartItemCount(item: any) {
+ console.log(item);
let i: number, cart_items;
for (i = 0; i < this.cart_items.length; i += 1) {
if (this.cart_items[i].menu_item === item.menu_item) {
@@ -81,7 +112,7 @@ export class CartPage implements OnInit {
for (i = 0; i < cart_items.length; i += 1) {
delete cart_items[i]['menu_details'];
}
- console.log(cart_items);
+ this.calculateTotalAfterPromo();
this.cartService.updateCartItems(cart_items);
}
@@ -101,4 +132,94 @@ export class CartPage implements OnInit {
return price - (price * discount / 100);
}
+ calculateTotalAfterPromo() {
+ switch(this.selected_promocode) {
+ case 'SAVE100':
+ if (this.total_cart_amount > 100) {
+ this.total_cart_amount = this.total_cart_amount - 100;
+ this.total_savings = 100;
+ }
+ break;
+ case 'SAVE10PER': this.total_cart_amount = this.total_cart_amount - ((this.total_cart_amount * 10) / 100);
+ this.total_savings = (this.total_cart_amount * 10) / 100;
+ break;
+ }
+ }
+
+ removePromocode() {
+ this.total_savings = 0;
+ this.total_cart_amount = 0;
+ this.selected_promocode = '';
+ let i: number;
+
+ for (i = 0; i < this.cart_items.length; i += 1) {
+ let mall = this.all_malls.find(mall => mall.id === this.cart_items[i].mall_id);
+ let outlet = mall.outlets.find(outlet => outlet.id === this.cart_items[i].outlet_id);
+ this.cart_items[i].menu_details = outlet.menu_items.find(item => item.id === this.cart_items[i].menu_item);
+ this.total_cart_amount += this.cart_items[i].total_price;
+ }
+ }
+
+ checkIfPresentInCart(id: string) {
+ let i: number;
+ for (i = 0; i < this.cart_items.length; i += 1) {
+ if (this.cart_items[i].menu_item === id) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ getItemCount(id: string) {
+ let i: number;
+ for (i = 0; i < this.cart_items.length; i += 1) {
+ if (this.cart_items[i].menu_item === id) {
+ return this.cart_items[i].quantity;
+ }
+ }
+ return 0;
+ }
+
+
+ addToCart(item: any) {
+ this.cart_items.push({
+ menu_item: item.id,
+ quantity: 1,
+ pickup_time: new Date(new Date().setMinutes(new Date().getMinutes() + item.wait_duration)),
+ outlet_id: this.outlet_details.id,
+ mall_id: this.mall_details.id,
+ take_away: true,
+ total_price: this.calculateDiscount(item.price, item.discount)
+ });
+
+ this.cartService.updateCartItems(this.cart_items).then(() => {
+ this.refresh();
+ });
+ }
+
+ decreaseInstantCartItemCount(item: any) {
+ let i: number;
+ for (i = 0; i < this.cart_items.length; i += 1) {
+ if (this.cart_items[i].menu_item === item.id) {
+ this.cart_items[i].quantity -= 1;
+ this.cart_items[i].total_price = this.calculateDiscount(item.price, item.discount) * this.cart_items[i].quantity;
+ if (this.cart_items[i].quantity === 0) {
+ this.cart_items.splice(i, 1);
+ }
+ }
+ }
+ this.cartService.updateCartItems(this.cart_items);
+ }
+
+ increaseInstantCartItemCount(item: any) {
+ let i: number;
+ for (i = 0; i < this.cart_items.length; i += 1) {
+ if (this.cart_items[i].menu_item === item.id) {
+ this.cart_items[i].quantity += 1;
+ this.cart_items[i].total_price = this.calculateDiscount(item.price, item.discount) * this.cart_items[i].quantity;
+ }
+ }
+ this.cartService.updateCartItems(this.cart_items);
+ }
+
}
diff --git a/src/app/mall-details/mall-details.page.html b/src/app/mall-details/mall-details.page.html
index 7d87832..95c12bf 100644
--- a/src/app/mall-details/mall-details.page.html
+++ b/src/app/mall-details/mall-details.page.html
@@ -139,7 +139,7 @@
- Your total savings
-
+ ₹ {{ total_savings }}
Your Total Savings
+
+
+ APPLY PROMOCODE
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Upto ₹ 100 Offer
+ Promocode: SAVE100
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, aliquid quod omnis sed voluptatem, eos sapiente quaerat, consequatur neque beatae architecto commodi! Debitis, qui eum iure perspiciatis aperiam cumque voluptatum?
+ Terms & Condition + Upto ₹ 10 Percert Offer
+ Promocode: SAVE10PER
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, aliquid quod omnis sed voluptatem, eos sapiente quaerat, consequatur neque beatae architecto commodi! Debitis, qui eum iure perspiciatis aperiam cumque voluptatum?
+ Terms & Condition +
+
+ Add On
+
+
+
+
+
diff --git a/src/app/cart/cart.page.scss b/src/app/cart/cart.page.scss
index 062f3ef..94cf218 100644
--- a/src/app/cart/cart.page.scss
+++ b/src/app/cart/cart.page.scss
@@ -55,16 +55,23 @@
width: 90%;
margin: 0 auto;
+ &.total-savings {
+ h5 {
+ color: var(--brand-blue);
+ }
+ }
+
h5 {
color: var(--brand-dark-grey);
- font-size: 12px;
+ font-size: 14px;
margin: 0;
}
ion-button {
--padding-end: 0;
--color: var(--brand-blue);
- font-size: 10px;
+ font-size: 12px;
+ letter-spacing: 0;
margin: 0;
span,ion-icon {
@@ -86,12 +93,13 @@ ul {
border-bottom: 1px solid #efefef;
.cart-item {
- margin-bottom: 20px;
border-bottom: 1px solid #efefef;
- padding-bottom: 20px;
+ padding-bottom: 15px;
+ margin-bottom: 10px;
&:last-child {
border-bottom: 0;
+ margin-bottom: 0;
}
}
@@ -119,18 +127,34 @@ ul {
font-size: 10px;
margin: 0;
height: 25px;
+ margin-top: 10px;
}
}
.breakups {
color: var(--brand-dark-grey);
- font-size: 10px;
+ font-size: 12px;
+ font-weight: 500;
li {
display: flex;
justify-content: space-between;
align-items: center;
- margin: 10px auto;
+ margin: 1px auto;
+ }
+
+ ion-button {
+ --padding-end: 0;
+ --color: var(--brand-blue);
+ text-transform: capitalize;
+ font-size: 12px;
+ margin: 0;
+
+ ion-icon {
+ color: var(--brand-dark-grey);
+ margin-left: 5px;
+ font-size: 16px;
+ }
}
.total {
@@ -163,10 +187,28 @@ ul {
}
.time-holder {
- font-size: 10px;
+ font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
+ --border-width: 0;
+ position: relative;
+ --color: var(--brand-dark-grey);
+ font-weight: 500;
+ position: relative;
+ right: -30px;
+
+ a {
+ margin: 0 5px;
+ }
+
+ ion-datetime {
+ opacity: 0;
+ width: 0;
+ padding: 0;
+ height: 0;
+ overflow: hidden;
+ }
a {
text-decoration: underline;
@@ -177,9 +219,9 @@ ul {
.total-price-breakup {
width: 90%;
margin: 0 auto;
+ padding-top: 7px;
ul {
- border-top: 1px solid #efefef;
padding: 5px 0;
}
@@ -202,3 +244,153 @@ ul {
margin: 10px auto;
font-size: 12px;
}
+
+.instant-menu {
+ .items-holder {
+ padding: 17px;
+ width: 100%;
+ overflow-x: auto;
+ white-space: nowrap;
+
+ .item {
+ overflow: hidden;
+ width: 45%;
+ display: inline-block;
+ position: relative;
+ box-shadow: 0px 0px 5px rgba(#000000, 0.2);
+ padding: 10px;
+ border-radius: 10px;
+ margin-right: 5vw;
+
+ &.hide {
+ display: none;
+ }
+
+ .stats-holder {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ font-size: 12px;
+ color: var(--brand-grey);
+ font-weight: 500;
+ padding-bottom: 10px;
+
+ ion-icon {
+ font-size: 14px;
+ float: left;
+ position: relative;
+ top: 1px;
+ margin-right: 3px;
+ }
+ }
+
+ .image-holder {
+ position: relative;
+
+ img {
+ border-radius: 5px;
+ height: 80px;
+ width: 100%;
+ object-fit: cover;
+ }
+
+ .category {
+ background-color: white;
+ border: 1px solid var(--brand-dark-grey);
+ border-radius: 2px;
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ left: 3px;
+ bottom: 7px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &::before {
+ content: '';
+ width: 8px;
+ height: 8px;
+ background-color: var(--brand-grey);
+ border-radius: 50%;
+ }
+
+ &.veg {
+ border-color: var(--ion-color-success);
+
+ &::before {
+ background-color: var(--ion-color-success);
+ }
+ }
+
+ &.non-veg {
+ border-color: var(--ion-color-danger);
+
+ &::before {
+ background-color: var(--ion-color-danger);
+ }
+ }
+ }
+ }
+
+ h5 {
+ font-size: 14px;
+ color: var(--brand-dark-grey);
+ font-weight: bold;
+ letter-spacing: 0.5px;
+ margin: 10px 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .price {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0px;
+ justify-content: space-between;
+
+ span {
+ color: var(--brand-dark-grey);
+ font-size: 14px;
+ font-weight: 700;
+ width: 40%;
+ }
+
+ .cart-button {
+ background-color: var(--brand-blue);
+ color: white;
+ font-size: 12px;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ }
+
+ .count-buttons-holder {
+ display: flex;
+ width: 60%;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #efefef;
+
+ ion-button {
+ margin: 0;
+ width: 30px;
+ height: 30px;
+ --padding-start: 0;
+ --padding-end: 0;
+ --padding-top: 0;
+ --padding-bottom: 0;
+ font-size: 10px;
+ --background: var(--brand-blue);
+ }
+
+ .count {
+ color: var(--brand-dark-grey);
+ font-size: 12px;
+ }
+ }
+ }
+ }
+}
diff --git a/src/app/cart/cart.page.ts b/src/app/cart/cart.page.ts
index fd5e47e..09cf9f1 100644
--- a/src/app/cart/cart.page.ts
+++ b/src/app/cart/cart.page.ts
@@ -6,6 +6,7 @@ import { MallService } from '../services/mall.service';
import { IMall } from '../models/mall';
import * as moment from 'moment';
import { Router } from '@angular/router';
+import { IOutlet } from '../models/outlet';
@Component({
selector: 'app-cart',
@@ -17,7 +18,14 @@ export class CartPage implements OnInit {
cart_items: any = [];
all_malls: Array
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ +
+
+
+
+ ₹ {{ calculateDiscount(item.price, item.discount) }}
+
+
+
+
+
Sort / Filter
diff --git a/src/app/malls/malls.page.html b/src/app/malls/malls.page.html
index 69c4445..d25653a 100644
--- a/src/app/malls/malls.page.html
+++ b/src/app/malls/malls.page.html
@@ -44,7 +44,7 @@
Food Offers: {{ mall.offers.length }}
@@ -87,7 +87,7 @@
Know More
-
-
+
Sort / Filter
diff --git a/src/app/malls/malls.page.ts b/src/app/malls/malls.page.ts
index 8787c42..fdfa646 100644
--- a/src/app/malls/malls.page.ts
+++ b/src/app/malls/malls.page.ts
@@ -25,7 +25,6 @@ export class MallsPage implements OnInit {
ionViewDidEnter() {
this.mallService.getAllMalls().then((data: Array) => {
this.malls = data;
- console.log(this.malls);
});
}
diff --git a/src/app/mocks/menu-items.ts b/src/app/mocks/menu-items.ts
index 34a4dae..aabf6a5 100644
--- a/src/app/mocks/menu-items.ts
+++ b/src/app/mocks/menu-items.ts
@@ -7,7 +7,7 @@ export const MENU_ITEMS_1 = [new MenuItem({
description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
is_vegeterian: true,
wait_duration: 10,
- price: 90,
+ price: 120,
discount: 10,
rating: 4,
tags: ['burger', 'breakfast']
@@ -17,10 +17,10 @@ export const MENU_ITEMS_1 = [new MenuItem({
image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship McChicken tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. Chicken Tikka burger recipe.',
is_vegeterian: false,
- wait_duration: 10,
- price: 90,
- discount: 10,
- rating: 4,
+ wait_duration: 20,
+ price: 180,
+ discount: 5,
+ rating: 4.5,
tags: ['burger', 'spicy', 'chicken']
})];
diff --git a/src/app/outlet-details/outlet-details.page.html b/src/app/outlet-details/outlet-details.page.html
index 3b62010..8995806 100644
--- a/src/app/outlet-details/outlet-details.page.html
+++ b/src/app/outlet-details/outlet-details.page.html
@@ -46,8 +46,8 @@
-
+
- SORT
+ SORT
+ = [];
- show_grid: boolean = false;
+ show_grid: boolean = true;
+ show_filter_popup: boolean = false;
constructor(
private route: ActivatedRoute,
@@ -34,20 +35,24 @@ export class OutletDetailsPage implements OnInit {
) { }
ngOnInit() {
- let mall_id = this.route.snapshot.paramMap.get('mall_id');
+
+ }
+
+ ionViewDidEnter() {
+ let mall_id = this.route.snapshot.paramMap.get('mall_id');
let outlet_id = this.route.snapshot.paramMap.get('outlet_id');
this.cartService.getAllCartItems().then((data: Array) => {
this.cart_items = data;
- console.log(data);
});
this.mallService.getMallByID(mall_id).then((data: IMall) => {
this.mall_details = data;
this.outlet_details = this.mall_details.outlets.find((outlet) => outlet.id === outlet_id);
this.temp_outlet_details = JSON.parse(JSON.stringify(this.outlet_details));
+ console.log(this.temp_outlet_details);
});
- }
+ }
back() {
this.location.back();
@@ -177,8 +182,4 @@ export class OutletDetailsPage implements OnInit {
}
}
- togglePopup() {
- this.show_sort_popup = !this.show_sort_popup;
- }
-
}
diff --git a/src/global.scss b/src/global.scss
index 442a0ae..2c992a5 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -8,236 +8,276 @@
* For more information on global stylesheets, visit the documentation:
* https://ionicframework.com/docs/layout/global-stylesheets
*/
-
/* Core CSS required for Ionic components to work properly */
-@import "~@ionic/angular/css/core.css";
-
-/* Basic CSS for apps built with Ionic */
+@import "~@ionic/angular/css/core.css"; /* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
-@import '~@ionic/angular/css/display.css';
-
-/* Optional CSS utils that can be commented out */
+@import '~@ionic/angular/css/display.css'; /* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
-
-
ion-content {
- --padding-bottom: 30px;
+ --padding-bottom: 30px;
}
-
-ion-button, button, a, p, div, input {
- font-family: 'Roboto', sans-serif;
- text-transform: none;
- outline: none;
+a,
+button,
+div,
+input,
+ion-button,
+p {
+ font-family: 'Roboto', sans-serif;
+ text-transform: none;
+ outline: none;
}
-
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
margin: 0;
}
-
figure {
- margin: 0;
+ margin: 0;
}
-
* {
- font-family: 'M PLUS Rounded 1c', sans-serif;
- margin: 0;
+ font-family: 'M PLUS Rounded 1c', sans-serif;
+ margin: 0;
}
-
.results-utilities-holder {
- display: flex;
- width: 100%;
- margin: 10px auto 0;
- justify-content: space-between;
- align-items: center;
- font-weight: bold;
-
- &.no-padding {
- margin: 0 auto;
- }
-
- h5 {
- margin: 0 0 0 10px;
- color: var(--brand-dark-grey);
- font-size: 10px;
- }
-
- ion-button {
- margin: 0;
- font-size: 10px;
- padding: 0;
- }
+ display: flex;
+ width: 100%;
+ margin: 10px auto 0;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: bold;
+ &.no-padding {
+ margin: 0 auto;
+ }
+ h5 {
+ margin: 0 0 0 10px;
+ color: var(--brand-dark-grey);
+ font-size: 10px;
+ }
+ ion-button {
+ margin: 0;
+ font-size: 10px;
+ padding: 0;
+ }
}
-
.result-list ion-item {
- margin: 0 0 20px;
-
- ion-label {
- padding: 0;
- margin: 0;
- }
-
- img {
- align-self: flex-start;
- width: 70px;
- height: 70px;
- object-fit: cover;
- margin-right: 15px;
- }
-
- h3 {
- margin: 0;
- color: var(--brand-dark-grey);
- font-weight: 500;
- font-size: 14px;
- letter-spacing: 0.5px;
- text-overflow: ellipsis;
- display: flex;
- justify-content: space-between;
-
- ion-icon {
- color: var(--brand-grey);
- font-size: 16px;
-
- &.active {
- color: var(--brand-blue);
- }
- }
- }
-
- .description {
- font-size: 10px;
- color: var(--brand-grey);
- }
-
- .offers-holder {
- display: flex;
- justify-content: space-between;
- color: var(--brand-yellow);
- letter-spacing: 0.5px;
- border-bottom: 1px solid #efefef;
- padding: 0 0 7px;
- margin-bottom: 7px;
+ margin: 0 0 20px;
+ ion-label {
+ padding: 0;
+ margin: 0;
+ }
+ img {
+ align-self: flex-start;
+ width: 70px;
+ height: 70px;
+ object-fit: cover;
+ margin-right: 15px;
+ }
+ h3 {
+ margin: 0;
+ color: var(--brand-dark-grey);
+ font-weight: 500;
+ font-size: 14px;
+ letter-spacing: 0.5px;
+ text-overflow: ellipsis;
+ display: flex;
+ justify-content: space-between;
+ ion-icon {
+ color: var(--brand-grey);
+ font-size: 16px;
+ &.active {
+ color: var(--brand-blue);
+ }
+ }
+ }
+ .description {
+ font-size: 10px;
+ color: var(--brand-grey);
+ }
+ .offers-holder {
+ display: flex;
+ justify-content: space-between;
+ color: var(--brand-yellow);
+ letter-spacing: 0.5px;
+ border-bottom: 1px solid #efefef;
+ padding: 0 0 7px;
+ margin-bottom: 7px;
align-items: center;
-
ion-icon {
color: var(--brand-grey);
}
-
- .offer {
- font-size: 11px;
- width: 50%;
- }
- }
-
- .utilities-holder {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .container {
- display: flex;
- width: 40%;
- justify-content: space-between;
-
- .utility {
- width: 50%;
- font-size: 10px;
- color: var(--brand-grey);
- font-weight: bold;
- }
-
- .utility-button {
- text-align: right;
- width: 50%;
- background-color: transparent;
- border: 0;
- font-size: 16px;
- color: var(--brand-grey);
- }
- }
- }
+ .offer {
+ font-size: 11px;
+ width: 50%;
+ }
+ }
+ .utilities-holder {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .container {
+ display: flex;
+ width: 40%;
+ justify-content: space-between;
+
+ &:last-child {
+ justify-content: flex-end;
+ }
+
+ .utility {
+ width: 50%;
+ font-size: 10px;
+ color: var(--brand-grey);
+ font-weight: bold;
+ }
+ .utility-button {
+ text-align: right;
+ background-color: transparent;
+ border: 0;
+ font-size: 16px;
+ color: var(--brand-grey);
+ }
+ }
+ }
}
-
-.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;
- }
- }
- }
- }
+.common-semi-modal {
+ background-color: white;
+ position: fixed;
+ width: 100%;
+ z-index: 5;
+ bottom: 0;
+ left: 0;
+ box-shadow: 0 0 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;
+ letter-spacing: 1px;
+ }
+ }
+ &.sort-holder {
+ .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;
+ }
+ }
+ }
+ }
+ }
+ &.filter-holder {
+ height: 80vh;
+ overflow-y: auto;
+ transform: translateY(80vh);
+ &.active {
+ transform: translateY(0);
+ }
+ &.with-border {
+ ion-item {
+ border-bottom: 1px solid #efefef;
+ --padding-start: 20px;
+ --padding-end: 20px;
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+ }
+ }
+ ion-list {
+ ion-item {
+ --inner-border-width: 0;
+ --color: var(--brand-dark-grey);
+ font-size: 14px;
+
+ ion-label {
+ padding-left: 20px;
+ letter-spacing: 0.5px;
+ font-weight: 500;
+ text-transform: capitalize;
+ .heading {
+ font-size: 14px;
+ font-weight: 500;
+ }
+ .code {
+ font-size: 12px;
+ margin: 3px 0;
+ span {
+ color: var(--brand-blue);
+ font-weight: 600;
+ }
+ }
+ a,
+ p {
+ color: var(--brand-grey);
+ font-size: 12px;
+ line-height: 1.5;
+ }
+ a {
+ text-decoration: underline;
+ }
+ }
+ }
+ ion-checkbox {
+ --background-checked: var(--brand-blue);
+ --border-color: var(--brand-blue);
+ --size: 16px;
+ }
+ ion-radio {
+ align-self: flex-start;
+ --color-checked: var(--brand-blue);
+ transform: scale(0.7);
+ }
+ }
+ }
}
+
+ FILTER
+
+
+
+ {{ tag }}
+
+
+
+
diff --git a/src/app/outlet-details/outlet-details.page.scss b/src/app/outlet-details/outlet-details.page.scss
index cbd13b1..c2d4e1d 100644
--- a/src/app/outlet-details/outlet-details.page.scss
+++ b/src/app/outlet-details/outlet-details.page.scss
@@ -282,11 +282,13 @@
&.list-mode {
flex-direction: column;
+ padding-bottom: 15px;
.item {
width: 100%;
display: flex;
justify-content: space-between;
+ margin-bottom: 15px;
.stats-holder {
width: 65%;
diff --git a/src/app/outlet-details/outlet-details.page.ts b/src/app/outlet-details/outlet-details.page.ts
index 5195408..18851cd 100644
--- a/src/app/outlet-details/outlet-details.page.ts
+++ b/src/app/outlet-details/outlet-details.page.ts
@@ -24,7 +24,8 @@ export class OutletDetailsPage implements OnInit {
show_sort_popup: boolean = false;
selected_sort: string = null;
cart_items: Array