From f2780fdc2678597cd19699256ebd5b94ef6fb051 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 13 Aug 2019 12:13:50 +0530 Subject: [PATCH] Mall details page added --- src/app/mall-details/mall-details.page.html | 118 ++++++++++++++- src/app/mall-details/mall-details.page.scss | 157 +++++++++++++++++++- src/app/mall-details/mall-details.page.ts | 31 +++- src/app/malls/malls.page.html | 8 +- src/app/malls/malls.page.scss | 110 -------------- src/app/services/mall.service.ts | 36 ++++- src/global.scss | 110 ++++++++++++++ 7 files changed, 446 insertions(+), 124 deletions(-) diff --git a/src/app/mall-details/mall-details.page.html b/src/app/mall-details/mall-details.page.html index 79e7512..4f6dadd 100644 --- a/src/app/mall-details/mall-details.page.html +++ b/src/app/mall-details/mall-details.page.html @@ -1,17 +1,39 @@ - + +
+
+ +

{{ mall_details.name }}

+
+
+
{{ mall_details.rating }}
+
{{ mall_details.distance }} km
+
+
+ + + + + +
+
+
- +
- +
- + + +
@@ -27,9 +49,93 @@
+ (click)="selected_tab = 'food'"> FOOD OUTLETS + (click)="selected_tab = 'shopping'"> SHOPS +
+ +
+
{{ mall_details.outlets.length }} OUTLETS
+ SORT / FILTER +
+ + + + + +

+ {{ outlet.name }} +
+ {{ outlet.rating }} +
+ +

+

+ {{ outlet.description }} + +

+
+
+ Food + Shopping + Offers: {{ outlet.offers.length }} +
+
+ + + + + + + + +

+ {{ outlet.name }} +
+ {{ outlet.rating }} +
+ +

+

+ {{ outlet.description }} + +

+
+
+ Food + Shopping + Offers: {{ outlet.offers.length }} +
+
+ + + + + + diff --git a/src/app/mall-details/mall-details.page.scss b/src/app/mall-details/mall-details.page.scss index 622f00b..68da460 100644 --- a/src/app/mall-details/mall-details.page.scss +++ b/src/app/mall-details/mall-details.page.scss @@ -1,3 +1,84 @@ +.header-bar { + background-image: url('../../assets/custom/background-2.svg'); + background-size: cover; + background-repeat: no-repeat; + background-position: left top; + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px; + height: 75px; + z-index: 2; + pointer-events: none; + opacity: 0; + top: 0; + left: 0; + width: 100%; + position: fixed; + transition: opacity 0.5s; + box-shadow: 0px 3px 5px var(--brand-grey); + + &.active { + opacity: 1; + pointer-events: all; + } + + + .heading-holder { + display: flex; + align-items: center; + } + + button, a { + background-color: white; + color: var(--brand-blue); + font-size: 18px; + padding: 5px; + border-radius: 50%; + height: 30px; + width: 30px; + display: flex; + justify-content: center; + align-items: center; + + &.active { + color: white; + background-color: var(--brand-blue); + } + } + + h3 { + font-size: 16px; + color: white; + letter-spacing: 0.5px; + margin-left: 10px; + font-weight: 600; + } + + .stats-holder { + font-size: 10px; + color: white; + display: flex; + align-items: center; + + .stat { + margin-left: 10px; + } + } + + .utilities-buttons-holder { + position: absolute; + right: 15px; + bottom: -15px; + display: flex; + align-items: center; + button, a { + margin-left: 10px; + box-shadow: 0px 3px 5px var(--brand-grey); + } + } +} + .upfold-holder { position: relative; height: 45vh; @@ -17,9 +98,15 @@ left: 86%; bottom: 30px; width: auto; + + a { + display: flex; + justify-content: center; + align-items: center; + } } - button { + button, a { background-color: white; color: var(--brand-blue); font-size: 18px; @@ -135,3 +222,71 @@ } } } + +.result-list { + ion-item { + display: none; + + &.show { + display: block; + } + + h3 .rating-holder { + font-size: 9px; + margin-left: auto; + align-self: flex-start; + display: flex; + align-items: flex-end; + margin-right: 10px; + + ion-icon { + font-size: 12px; + margin-right: 3px; + } + } + + .offers-holder { + border-bottom: 0; + border-top: 1px solid #efefef; + + .offer { + ion-icon { + color: var(--brand-grey); + transform: scale(1.1); + } + } + } + + .description { + margin: 5px 0; + .share-button { + float: right; + font-size: 14px; + background-color: transparent; + border: 0px; + color: var(--brand-dark-grey); + padding: 0; + } + } + } +} + +.advertisement-slots { + white-space: nowrap; + width: 100%; + overflow-x: auto; + + figure { + margin: 0; + display: inline-block; + width: 100px; + height: 100px; + margin: 0 5px; + + img { + object-fit: cover; + width: 100%; + height: 100%; + } + } +} diff --git a/src/app/mall-details/mall-details.page.ts b/src/app/mall-details/mall-details.page.ts index 34f46a5..f7614ff 100644 --- a/src/app/mall-details/mall-details.page.ts +++ b/src/app/mall-details/mall-details.page.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Mall, MallService } from '../services/mall.service'; +import { Location } from '@angular/common'; @Component({ selector: 'app-mall-details', @@ -10,11 +11,13 @@ import { Mall, MallService } from '../services/mall.service'; export class MallDetailsPage implements OnInit { mall_details: Mall; selected_tab: string = 'food'; + show_top_bar: boolean = false; constructor( private mallService: MallService, private route: ActivatedRoute, - private router: Router + private router: Router, + private location: Location ) { } ngOnInit() { @@ -25,4 +28,30 @@ export class MallDetailsPage implements OnInit { }); } + refresh() { + let mall_id = this.route.snapshot.paramMap.get('mall_id'); + + this.mallService.getMallByID(mall_id).then((data: Mall) => { + this.mall_details = data; + }); + } + + back() { + this.location.back(); + } + + toggleBookmark(mall_details: Mall) { + mall_details.is_bookmarked = !mall_details.is_bookmarked; + this.mallService.updateMallDetails(mall_details).then(() => this.refresh()); + } + + + onScroll(event: any) { + if (event.detail.scrollTop > 100) { + this.show_top_bar = true; + } else { + this.show_top_bar = false; + } + } + } diff --git a/src/app/malls/malls.page.html b/src/app/malls/malls.page.html index 72fa9fe..7463ae1 100644 --- a/src/app/malls/malls.page.html +++ b/src/app/malls/malls.page.html @@ -15,11 +15,11 @@
-
15 MALLS
+
{{ malls.length }} MALLS
SORT / FILTER
- + @@ -69,7 +69,7 @@ Know More - + @@ -116,7 +116,7 @@ - + diff --git a/src/app/malls/malls.page.scss b/src/app/malls/malls.page.scss index 7474ac2..d87a046 100644 --- a/src/app/malls/malls.page.scss +++ b/src/app/malls/malls.page.scss @@ -62,116 +62,6 @@ } } -.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-grey); - font-size: 10px; - } - - ion-button { - margin: 0; - font-size: 10px; - padding: 0; - } -} - -.malls-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: 12px; - color: var(--brand-grey); - } - - .offers-holder { - display: flex; - justify-content: space-between; - color: var(--brand-yellow); - letter-spacing: 0.5px; - border-bottom: 1px solid var(--brand-grey); - padding: 7px 0; - margin-bottom: 7px; - - .offer { - font-size: 10px; - 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); - } - } - } -} - .advertisement { height: 150px; background-image: url('../../assets/custom/background-2.svg'); diff --git a/src/app/services/mall.service.ts b/src/app/services/mall.service.ts index 32a94bf..12e7b49 100644 --- a/src/app/services/mall.service.ts +++ b/src/app/services/mall.service.ts @@ -10,8 +10,9 @@ type Outlet = { id: string, image_url?: string, name: string, - type: string, + description: string, offers: Array, + is_food_outlet: boolean, is_bookmarked: boolean, rating: number, }; @@ -44,7 +45,29 @@ export class MallService { is_archived: false, image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', - outlets: [], + outlets: [{ + id: '0001', + image_url: 'https://images.markets.businessinsider.com/image/5a74835585cdd489228b47be-900/shutterstock643079686.jpg', + name: 'McDonalds', + description: 'Veg / Non-Veg Food Restaurant', + offers: [{ + name: 'McDonalds Offer', + description: 'Get 25% offer on you first meal', + coupon_code: 'MCD25F', + }], + is_food_outlet: true, + is_bookmarked: false, + rating: 3.5, + }, { + id: '0002', + image_url: 'https://pbs.twimg.com/profile_images/354890582/symbol.jpg', + name: 'Shopper\'s stop', + description: 'Clothing store', + offers: [], + is_food_outlet: false, + is_bookmarked: true, + rating: 4.8, + }], offer_collection: [{ name: 'Food', offers: [{ @@ -116,4 +139,13 @@ export class MallService { public async getMallByID(id: string) { return this.malls.find((mall) => mall.id === id); } + + public async updateMallDetails(mall_details: Mall) { + for (let i = 0; i < this.malls.length; i += 1) { + if (this.malls[i].id === mall_details.id) { + this.malls[i] = mall_details; + } + } + return this.malls; + } } diff --git a/src/global.scss b/src/global.scss index 0ff3f1c..0f71054 100644 --- a/src/global.scss +++ b/src/global.scss @@ -168,3 +168,113 @@ header, h1, h2, h3, h4, h5 { opacity: 0.5; } } + +.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-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: 7px 0; + margin-bottom: 7px; + + .offer { + font-size: 10px; + 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); + } + } + } +}