From 4329acfee608d9de0fb9e6e1b7ad64b64465420d Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 5 Feb 2021 19:45:29 +0530 Subject: [PATCH] Adding Back button to fan pages --- src/app/booking/booking.page.html | 2 ++ src/app/booking/booking.page.scss | 20 +++++++++++++++++ src/app/booking/booking.page.ts | 8 ++++++- src/app/collections/collections.page.html | 2 ++ src/app/collections/collections.page.scss | 26 ++++++++++++++++++++--- src/app/collections/collections.page.ts | 9 +++++++- src/app/quiz/quiz.page.html | 2 ++ src/app/quiz/quiz.page.scss | 20 +++++++++++++++++ src/app/shop/shop.page.html | 3 +++ src/app/shop/shop.page.scss | 21 ++++++++++++++++++ src/app/shop/shop.page.ts | 9 +++++++- 11 files changed, 116 insertions(+), 6 deletions(-) diff --git a/src/app/booking/booking.page.html b/src/app/booking/booking.page.html index 50702ac..40bd174 100644 --- a/src/app/booking/booking.page.html +++ b/src/app/booking/booking.page.html @@ -1,4 +1,6 @@ + +

# Booking

diff --git a/src/app/booking/booking.page.scss b/src/app/booking/booking.page.scss index 28dc86c..a43a3d8 100644 --- a/src/app/booking/booking.page.scss +++ b/src/app/booking/booking.page.scss @@ -4,6 +4,26 @@ margin-bottom: 2.3rem; } +.back-button { + position: fixed; + top: 10px; + right: 10px; + width: 40px; + height: 40px; + background: rgba(white, 0.5); + border: 0px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 3; + + ion-icon { + color: white; + font-size: 20px; + } +} + .main-header { background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%); -webkit-background-clip: text; diff --git a/src/app/booking/booking.page.ts b/src/app/booking/booking.page.ts index 6400c32..934a694 100644 --- a/src/app/booking/booking.page.ts +++ b/src/app/booking/booking.page.ts @@ -4,6 +4,7 @@ import * as faker from 'faker'; import * as moment from 'moment'; import { Router } from '@angular/router'; import { ChatPage } from '../chat/chat.page'; +import { Location } from '@angular/common'; @Component({ selector: 'app-booking', @@ -79,9 +80,14 @@ export class BookingPage implements OnInit { constructor( private router: Router, - private modalController: ModalController + private modalController: ModalController, + private location: Location ) { } + back() { + this.location.back(); + } + getFormattedDateTime(dateTime: Date) { return moment(dateTime).format('DD MMM'); } diff --git a/src/app/collections/collections.page.html b/src/app/collections/collections.page.html index 5eebf02..6024f75 100644 --- a/src/app/collections/collections.page.html +++ b/src/app/collections/collections.page.html @@ -1,5 +1,7 @@ + + diff --git a/src/app/collections/collections.page.scss b/src/app/collections/collections.page.scss index da82ac8..ecedd91 100644 --- a/src/app/collections/collections.page.scss +++ b/src/app/collections/collections.page.scss @@ -1,7 +1,7 @@ @import '../colors'; .collections { - height: calc(100vh - 56px); + height: 100vh; background-image: url('../../assets/collections/museum_background.png'); background-position: center; background-size: 100% 100%; @@ -105,7 +105,7 @@ ion-slides { border-radius: 7px; overflow: hidden; padding: 15px; - top: 60vh; + top: 65vh; box-shadow: 0px 0px 5px inset dimgray; h5 { @@ -126,7 +126,7 @@ ion-slides { img { position: absolute; left: 40vw; - bottom: 50vh; + bottom: 42.5vh; object-fit: contain; object-position: bottom; @@ -157,4 +157,24 @@ ion-slides { opacity: 1; transform: translateY(0vh); } +} + +.back-button { + position: fixed; + top: 15px; + right: 15px; + width: 40px; + height: 40px; + background: rgba(white, 0.5); + border: 0px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 3; + + ion-icon { + color: white; + font-size: 20px; + } } \ No newline at end of file diff --git a/src/app/collections/collections.page.ts b/src/app/collections/collections.page.ts index 517cf6a..4c9702a 100644 --- a/src/app/collections/collections.page.ts +++ b/src/app/collections/collections.page.ts @@ -1,5 +1,6 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { IonSlides } from '@ionic/angular'; +import { Location } from '@angular/common'; @Component({ selector: 'app-collections', @@ -29,7 +30,13 @@ export class CollectionsPage implements OnInit { showGrid: boolean = false; - constructor() { } + constructor( + private location: Location + ) { } + + back() { + this.location.back(); + } ngOnInit() { this.collections = [{ diff --git a/src/app/quiz/quiz.page.html b/src/app/quiz/quiz.page.html index e3ec719..7a80cc4 100644 --- a/src/app/quiz/quiz.page.html +++ b/src/app/quiz/quiz.page.html @@ -1,6 +1,8 @@ + +

{{ secondsPerQuestion }}

diff --git a/src/app/quiz/quiz.page.scss b/src/app/quiz/quiz.page.scss index b085fd3..7f1e4da 100644 --- a/src/app/quiz/quiz.page.scss +++ b/src/app/quiz/quiz.page.scss @@ -12,6 +12,26 @@ background-position: top; } +.back-button { + position: fixed; + top: 10px; + right: 10px; + width: 40px; + height: 40px; + background: rgba(white, 0.5); + border: 0px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 3; + + ion-icon { + color: white; + font-size: 20px; + } +} + .visual-timer { display: flex; width: 80%; diff --git a/src/app/shop/shop.page.html b/src/app/shop/shop.page.html index d1cde54..502b688 100644 --- a/src/app/shop/shop.page.html +++ b/src/app/shop/shop.page.html @@ -1,4 +1,7 @@ + + +
Just for you
diff --git a/src/app/shop/shop.page.scss b/src/app/shop/shop.page.scss index afcd798..121b4cd 100644 --- a/src/app/shop/shop.page.scss +++ b/src/app/shop/shop.page.scss @@ -1,5 +1,26 @@ @import '../colors'; + +.back-button { + position: fixed; + top: 10px; + right: 10px; + width: 40px; + height: 40px; + background: rgba(white, 0.5); + border: 0px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 3; + + ion-icon { + color: white; + font-size: 20px; + } +} + .upfold { height: 50vh; background-color: rgba($blue-grey, 0.1); diff --git a/src/app/shop/shop.page.ts b/src/app/shop/shop.page.ts index 27a8048..36a5213 100644 --- a/src/app/shop/shop.page.ts +++ b/src/app/shop/shop.page.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; @Component({ selector: 'app-shop', @@ -12,7 +13,13 @@ export class ShopPage implements OnInit { image: string }> = []; - constructor() { } + constructor( + private location: Location + ) { } + + back() { + this.location.back(); + } ngOnInit() {