kj
/
mall-app
1
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

Cart page UI

master
kj1352 pirms 6 gadiem
vecāks
359e49665e
revīzija
51aa0e6e36
11 mainītis faili ar 700 papildinājumiem un 259 dzēšanām
Dalītais skats
Salīdzināšanas iespējas
Rādīt statistiku Lejupielādēt ielāpa failu Lejupielādēt izmaiņu failu
  1. +94
    -20
      src/app/cart/cart.page.html
  2. +200
    -8
      src/app/cart/cart.page.scss
  3. +125
    -4
      src/app/cart/cart.page.ts
  4. +1
    -1
      src/app/mall-details/mall-details.page.html
  5. +2
    -2
      src/app/malls/malls.page.html
  6. +0
    -1
      src/app/malls/malls.page.ts
  7. +5
    -5
      src/app/mocks/menu-items.ts
  8. +16
    -4
      src/app/outlet-details/outlet-details.page.html
  9. +2
    -0
      src/app/outlet-details/outlet-details.page.scss
  10. +9
    -8
      src/app/outlet-details/outlet-details.page.ts
  11. +246
    -206
      src/global.scss

+ 94
- 20
src/app/cart/cart.page.html Parādīt failu

@@ -7,7 +7,7 @@
</div>

<div class="cart-utilities-holder">
<h5> {{ cart_items.length }} ITEMS </h5>
<h5> {{ cart_items.length }} ITEM(S) </h5>
<ion-button fill="clear" (click)="show_order_details=!show_order_details">
<span *ngIf="!show_order_details"> Show Order Details <ion-icon name="ios-arrow-down"></ion-icon> </span>
<span *ngIf="show_order_details"> Hide Order Details <ion-icon name="ios-arrow-up"></ion-icon> </span>
@@ -16,12 +16,12 @@

<ul class="cart-item-list">
<li class="cart-item" *ngFor="let item of cart_items; let i = index;">
<header> {{ i + 1 }}. {{ item.menu_details.name }}
<ion-button fill="clear" (click)="goToOutlet(item.mall_id, item.outlet_id)"> Change </ion-button>
</header>
<header> {{ i + 1 }}. {{ item.menu_details.name }} </header>
<ul class="breakups" *ngIf="!show_order_details">
<li> <label> {{ item.quantity }} X Rs.{{ item.menu_details.price }} </label> <span class="total"> Rs. {{ item.total_price }} </span> </li>
<li> <label> {{ getPickupTimeFormat(item.pickup_time) }} </label> </li>
<li> <label> {{ item.quantity }} X &#8377; {{ item.menu_details.price }} </label> <span class="total"> &#8377; {{ item.total_price }} </span> </li>
<li>
<label> {{ getPickupTimeFormat(item.pickup_time) }} </label>
</li>
</ul>

<ul class="breakups" *ngIf="show_order_details">
@@ -35,9 +35,12 @@
</li>
<li>
<label> Pickup Time </label>
<div class="time-holder">
<ion-item class="time-holder">
{{ getPickupTimeFormat(item.pickup_time) }}
</div>
<a> Schedule time </a>
<ion-datetime displayFormat="hh:mm a" [(ngModel)]="item.pickup_time"
placeholder="Select Date"></ion-datetime>
</ion-item>
</li>
<li>
<label> Takeaway </label>
@@ -47,32 +50,103 @@
</li>
</ul>

<ion-button fill="outline" shape="round" class="add-on-button"> Add on </ion-button>
<ion-button fill="outline" shape="round" class="add-on-button" (click)="openInstantMenu(item)"> Add on </ion-button>
</li>
</ul>

<div class="cart-utilities-holder">
<h5> PROMOCODE </h5>
<ion-button fill="clear"> Apply </ion-button>
</div>

<div class="total-price-breakup">
<ul class="breakups">
<li> <label> Total after discounts </label> <span> Rs. {{ total_cart_amount }} </span> </li>
<li> <label> Packaging </label> <span> Rs.20 </span> </li>
<li> <label> Total after discounts </label> <span> &#8377; {{ total_cart_amount }} </span> </li>
<li> <label> Promocode </label> <span>
<ion-button fill="clear" *ngIf="!selected_promocode" (click)="show_promocodes = true"> Apply </ion-button>
<ion-button fill="clear" *ngIf="selected_promocode" (click)="removePromocode()">
Remove {{ selected_promocode }}
<ion-icon name="close-circle"></ion-icon>
</ion-button>
</span> </li>
<li> <label> Packaging </label> <span> &#8377; 20 </span> </li>
<li> <label> GST </label> <span> 18% </span> </li>
</ul>

<div class="total-price">
<span> Total </span> <span> Rs. {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }} </span>
<span> Total </span> <span> &#8377; {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }} </span>
</div>
</div>

<div class="cart-utilities-holder">
<h5> Your total savings </h5>
<ion-button fill="clear"> Rs. 0 </ion-button>
<div class="cart-utilities-holder total-savings">
<h5> Your Total Savings </h5>
<ion-button fill="clear"> &#8377; {{ total_savings }} </ion-button>
</div>

<ion-button shape="round" expand="block" class="pay-button"> Pay Now </ion-button>

<div class="common-semi-modal filter-holder with-border" [ngClass]="{'active' : show_promocodes }">
<header>
APPLY PROMOCODE <button (click)="show_promocodes = false; calculateTotalAfterPromo()"> Done </button>
</header>
<ion-list>
<ion-item (click)="selected_promocode = 'SAVE100'">
<ion-radio slot="start" [checked]="selected_promocode === 'SAVE100'"></ion-radio>
<ion-label class="ion-text-wrap">
<div class="heading"> Upto &#8377; 100 Offer </div>
<div class="code"> Promocode: <span> SAVE100 </span> </div>
<p> 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? </p>
<a> Terms & Condition </a>
</ion-label>
</ion-item>
<ion-item (click)="selected_promocode = 'SAVE10PER'">
<ion-radio slot="start" [checked]="selected_promocode === 'SAVE10PER'"></ion-radio>
<ion-label class="ion-text-wrap">
<div class="heading"> Upto &#8377; 10 Percert Offer </div>
<div class="code"> Promocode: <span> SAVE10PER </span> </div>
<p> 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? </p>
<a> Terms & Condition </a>
</ion-label>
</ion-item>
</ion-list>
</div>

<div class="common-semi-modal instant-menu" [ngClass]="{'active' : instant_menu }" *ngIf="temp_outlet_details">
<header>
Add On <button (click)="instant_menu = false;"> Done </button>
</header>
<section class="items-holder">
<div class="item" *ngFor="let item of temp_outlet_details.menu_items"
[ngClass]="{'hide' : !item.is_vegeterian && show_only_veg }">
<div class="stats-holder" *ngIf="show_grid">
<div class="stat"> <ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span> </div>
<div class="stat"> <ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span> </div>
</div>
<div class="image-holder">
<img [src]="item.image_url">
<div class="label-holder">
<div class="category" [ngClass]="{'non-veg' : !item.is_vegeterian, 'veg' : item.is_vegeterian }"></div>
</div>
</div>

<div class="content-holder">
<h5> {{ item.name }} </h5>

<div class="stats-holder" *ngIf="!show_grid">
<div class="stat"> <ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span> </div>
<div class="stat"> <ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span> </div>
</div>

<div class="price">
<span> ₹ {{ calculateDiscount(item.price, item.discount) }} </span>
<button class="cart-button" (click)="addToCart(item)" *ngIf="!checkIfPresentInCart(item.id)">
<ion-icon name="cart"></ion-icon>
</button>
<div class="count-buttons-holder" *ngIf="checkIfPresentInCart(item.id)">
<ion-button (click)="decreaseInstantCartItemCount(item)"> <ion-icon name="remove"></ion-icon> </ion-button>
<div class="count"> {{ getItemCount(item.id) }} </div>
<ion-button (click)="increaseInstantCartItemCount(item)"> <ion-icon name="add"></ion-icon> </ion-button>
</div>
</div>
</div>

</div>
</section>
</div>

</ion-content>

+ 200
- 8
src/app/cart/cart.page.scss Parādīt failu

@@ -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;
}
}
}
}
}

+ 125
- 4
src/app/cart/cart.page.ts Parādīt failu

@@ -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<IMall> = [];
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<IMall>) => {
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);
}

}

+ 1
- 1
src/app/mall-details/mall-details.page.html Parādīt failu

@@ -139,7 +139,7 @@
</figure>
</div>

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


+ 2
- 2
src/app/malls/malls.page.html Parādīt failu

@@ -44,7 +44,7 @@
Food Offers: <strong> {{ mall.offers.length }} </strong>
</div>
<div class="offer">
<ion-icon src="assets/custom/shopping-purse-icon.svg"></ion-icon>
<ion-icon src="assets/custom/shopping-purse-icon.svg"></ion-icon>
Shopping Offers: <strong> {{ mall.offers.length }} </strong>
</div>
</div>
@@ -87,7 +87,7 @@
<a> Know More </a>
</section>

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


+ 0
- 1
src/app/malls/malls.page.ts Parādīt failu

@@ -25,7 +25,6 @@ export class MallsPage implements OnInit {
ionViewDidEnter() {
this.mallService.getAllMalls().then((data: Array<IMall>) => {
this.malls = data;
console.log(this.malls);
});
}



+ 5
- 5
src/app/mocks/menu-items.ts Parādīt failu

@@ -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']
})];



+ 16
- 4
src/app/outlet-details/outlet-details.page.html Parādīt failu

@@ -46,8 +46,8 @@
<div class="menu-card-holder">
<header>
<div>
<button color="default" fill="clear" (click)="togglePopup()"> FILTER </button>
<button color="default" fill="clear" (click)="togglePopup()"> SORT </button>
<button color="default" fill="clear" (click)="show_filter_popup = true"> FILTER </button>
<button color="default" fill="clear" (click)="show_sort_popup = true"> SORT </button>
</div>
<div class="toggle" (click)="show_only_veg = !show_only_veg"> VEG MENU <ion-toggle [(ngModel)]="show_only_veg"></ion-toggle> </div>
</header>
@@ -105,9 +105,9 @@
</div>


<div class="sort-filter-holder" [ngClass]="{'active' : show_sort_popup }">
<div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
<header>
SORT <button (click)="togglePopup()"> Done </button>
SORT <button (click)="show_sort_popup = false"> Done </button>
</header>

<div class="sort-buttons-holder">
@@ -134,4 +134,16 @@
</div>
</div>

<div class="common-semi-modal filter-holder" [ngClass]="{'active' : show_filter_popup }">
<header>
FILTER <button (click)="show_filter_popup = false"> Done </button>
</header>
<ion-list>
<ion-item *ngFor="let tag of outlet_details.tags" (click)="filterByTag(tag)">
<ion-checkbox slot="start" [checked]="selected_tag === tag"></ion-checkbox>
<ion-label> {{ tag }} </ion-label>
</ion-item>
</ion-list>
</div>

</ion-content>

+ 2
- 0
src/app/outlet-details/outlet-details.page.scss Parādīt failu

@@ -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%;


+ 9
- 8
src/app/outlet-details/outlet-details.page.ts Parādīt failu

@@ -24,7 +24,8 @@ export class OutletDetailsPage implements OnInit {
show_sort_popup: boolean = false;
selected_sort: string = null;
cart_items: Array<CartItem> = [];
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<CartItem>) => {
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;
}

}

+ 246
- 206
src/global.scss Parādīt failu

@@ -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);
}
}
}
}

Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt