From 51aa0e6e36a3b472e0e2b64b23c328c79a81e548 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Sat, 19 Oct 2019 21:44:45 +0530 Subject: [PATCH] Cart page UI --- src/app/cart/cart.page.html | 114 ++++- src/app/cart/cart.page.scss | 208 +++++++- src/app/cart/cart.page.ts | 129 ++++- src/app/mall-details/mall-details.page.html | 2 +- src/app/malls/malls.page.html | 4 +- src/app/malls/malls.page.ts | 1 - src/app/mocks/menu-items.ts | 10 +- .../outlet-details/outlet-details.page.html | 20 +- .../outlet-details/outlet-details.page.scss | 2 + src/app/outlet-details/outlet-details.page.ts | 17 +- src/global.scss | 452 ++++++++++-------- 11 files changed, 700 insertions(+), 259 deletions(-) diff --git a/src/app/cart/cart.page.html b/src/app/cart/cart.page.html index fdabcf0..94b3476 100644 --- a/src/app/cart/cart.page.html +++ b/src/app/cart/cart.page.html @@ -7,7 +7,7 @@
-
{{ cart_items.length }} ITEMS
+
{{ cart_items.length }} ITEM(S)
Show Order Details Hide Order Details @@ -16,12 +16,12 @@
  • -
    {{ i + 1 }}. {{ item.menu_details.name }} - Change -
    +
    {{ i + 1 }}. {{ item.menu_details.name }}
      -
    • Rs. {{ item.total_price }}
      • -
      • +
    • ₹ {{ item.total_price }}
      • +
    • + +
      @@ -35,9 +35,12 @@
    • -
      + {{ getPickupTimeFormat(item.pickup_time) }} -
      + Schedule time + +
    • @@ -47,32 +50,103 @@
    - Add on + Add on
-
-
PROMOCODE
- Apply -
-
    -
  • 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) }}
-
-
Your total savings
- Rs. 0 +
+
Your Total Savings
+ ₹ {{ total_savings }}
Pay Now +
+
+ 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 +
+
+
+
+
{{ item.wait_duration }} min
+
{{ item.rating }}
+
+
+ +
+
+
+
+ +
+
{{ item.name }}
+ +
+
{{ item.wait_duration }} min
+
{{ item.rating }}
+
+ +
+ ₹ {{ calculateDiscount(item.price, item.discount) }} + +
+ +
{{ getItemCount(item.id) }}
+ +
+
+
+ +
+
+
+ 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 = []; 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 @@
-
+
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 }}
- + Shopping 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 @@
- - + +
VEG MENU
@@ -105,9 +105,9 @@
-
+
- SORT + SORT
@@ -134,4 +134,16 @@
+
+
+ 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 = []; - 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); + } + } + } }