From 7883bc0984e9674b31ba2bc3802c9df65edbda59 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Wed, 2 Oct 2019 13:07:04 +0530 Subject: [PATCH] Partial commit --- src/app/app-routing.module.ts | 1 + src/app/app.component.html | 7 +- src/app/app.component.scss | 149 ++++++++++++++++++++++++++- src/app/cart/cart.page.ts | 1 - src/app/profile/profile.module.ts | 26 +++++ src/app/profile/profile.page.html | 30 ++++++ src/app/profile/profile.page.scss | 55 ++++++++++ src/app/profile/profile.page.spec.ts | 27 +++++ src/app/profile/profile.page.ts | 22 ++++ src/global.scss | 129 +---------------------- src/index.html | 2 +- 11 files changed, 314 insertions(+), 135 deletions(-) create mode 100644 src/app/profile/profile.module.ts create mode 100644 src/app/profile/profile.page.html create mode 100644 src/app/profile/profile.page.scss create mode 100644 src/app/profile/profile.page.spec.ts create mode 100644 src/app/profile/profile.page.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 679e028..a6de6eb 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,6 +9,7 @@ const routes: Routes = [ { path: 'mall-details', loadChildren: './mall-details/mall-details.module#MallDetailsPageModule' }, { path: 'outlet-details', loadChildren: './outlet-details/outlet-details.module#OutletDetailsPageModule' }, { path: 'cart', loadChildren: './cart/cart.module#CartPageModule' }, + { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' }, ]; @NgModule({ diff --git a/src/app/app.component.html b/src/app/app.component.html index 21344f3..9523830 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -15,18 +15,23 @@
-
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index a3596b7..bb5568d 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,6 +1,147 @@ // App Styles // ---------------------------------------------------------------------------- -// Put style rules here that you want to apply to the entire application. These -// styles are for the entire app and not just one component. Additionally, this -// file can hold Sass mixins, functions, and placeholder classes to be imported -// and used throughout the application. \ No newline at end of file +// Put style rules here that you want to apply to the entire application. These +// styles are for the entire app and not just one component. Additionally, this +// file can hold Sass mixins, functions, and placeholder classes to be imported +// and used throughout the application. + +.menu-icon-holder { + background-color: #005cbe; + color: white; + position: fixed; + top: 0; + box-shadow: 0px 0px 5px var(--brand-blue); + width: 100px; + height: 100px; + text-align: center; + left: calc((100% - 100px)/2); + border-radius: 50%; + padding-top: 7px; + z-index: 1; + transition: transform 0.5s; + transform: translateY(calc(100vh - 40px)); + opacity: 0.7; + + &.hide { + display: none; + } + + &.inactive { + transform: translateY(100vh); + } + + ion-icon { + font-size: 30px; + } +} + +.close-icon-holder { + background-color: white; + width: 70%; + position: fixed; + left: calc((100% - 70%) / 2); + height: 100px; + border-radius: 50%; + color: var(--brand-blue); + text-align: center; + z-index: 5; + bottom: -60px; + padding-top: 10px; + transition: transform 0.3s; + transform: scale(0); + + &.active { + transform: scale(1); + } + + ion-icon { + font-size: 25px; + } +} + +.menu-items-holder { + background-image: url('../assets/custom/background-5.svg'); + background-size: cover; + background-repeat: no-repeat; + background-position: left top; + border-radius: 50%; + position: fixed; + left: calc((100% - 150%) / 2); + bottom: -150px; + z-index: 4; + height: 300px; + width: 150%; + padding: 20px 30%; + display: flex; + justify-content: space-between; + align-items: flex-start; + transition: transform 0.3s; + transform: scale(0); + + &.active { + transform: scale(1); + } + + button { + background-color: white; + height: 50px; + width: 50px; + border-radius: 50%; + font-size: 20px; + position: relative; + + span { + position: absolute; + bottom: -15px; + text-align: center; + display: block; + color: white; + letter-spacing: 0.5px; + font-weight: bold; + font-size: 10px; + width: 100%; + left: 0; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + &:first-child { + transform: translateY(40px); + } + + &:nth-child(2) { + transform: translateY(20px); + } + + &:nth-child(3) { + transform: translateY(10px); + } + + &:last-child { + transform: translateY(40px); + } + + &:nth-child(4) { + transform: translateY(20px); + } + } +} + +.overlay { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + pointer-events: none; + background-color: black; + opacity: 0; + z-index: 3; + transition: opacity 0.5s; + + &.active { + pointer-events: all; + opacity: 0.5; + } +} diff --git a/src/app/cart/cart.page.ts b/src/app/cart/cart.page.ts index 9201dc5..fd5e47e 100644 --- a/src/app/cart/cart.page.ts +++ b/src/app/cart/cart.page.ts @@ -6,7 +6,6 @@ import { MallService } from '../services/mall.service'; import { IMall } from '../models/mall'; import * as moment from 'moment'; import { Router } from '@angular/router'; -import MenuItem from '../models/menu-item'; @Component({ selector: 'app-cart', diff --git a/src/app/profile/profile.module.ts b/src/app/profile/profile.module.ts new file mode 100644 index 0000000..2417f67 --- /dev/null +++ b/src/app/profile/profile.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { Routes, RouterModule } from '@angular/router'; + +import { IonicModule } from '@ionic/angular'; + +import { ProfilePage } from './profile.page'; + +const routes: Routes = [ + { + path: '', + component: ProfilePage + } +]; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + RouterModule.forChild(routes) + ], + declarations: [ProfilePage] +}) +export class ProfilePageModule {} diff --git a/src/app/profile/profile.page.html b/src/app/profile/profile.page.html new file mode 100644 index 0000000..5a491b7 --- /dev/null +++ b/src/app/profile/profile.page.html @@ -0,0 +1,30 @@ + +
+
+ +

Profile

+
+
+ +
+
+
+ +
+
+

Mr. Christian Carry + Edit +

+
    +
  • +91 0909239302
    • +
  • christian.carry22232@gmail.com
    • +
+
+
+
+
Nagarbhavi, Bengaluru KA
+ +
+
+ + diff --git a/src/app/profile/profile.page.scss b/src/app/profile/profile.page.scss new file mode 100644 index 0000000..0117ee9 --- /dev/null +++ b/src/app/profile/profile.page.scss @@ -0,0 +1,55 @@ +.header-bar { + background-image: url('../../assets/custom/background-5.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: 3; + top: 0; + left: 0; + width: 100%; + position: sticky; + + .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; + } +} + +.profile { + background-image: url('../../assets/custom/background-5.svg'); + background-size: cover; + background-repeat: no-repeat; + background-position: left top; + color: white; +} diff --git a/src/app/profile/profile.page.spec.ts b/src/app/profile/profile.page.spec.ts new file mode 100644 index 0000000..6f05c1a --- /dev/null +++ b/src/app/profile/profile.page.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfilePage } from './profile.page'; + +describe('ProfilePage', () => { + let component: ProfilePage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ProfilePage ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProfilePage); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/profile/profile.page.ts b/src/app/profile/profile.page.ts new file mode 100644 index 0000000..ab841ef --- /dev/null +++ b/src/app/profile/profile.page.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; + +@Component({ + selector: 'app-profile', + templateUrl: './profile.page.html', + styleUrls: ['./profile.page.scss'], +}) +export class ProfilePage implements OnInit { + + constructor( + private location: Location + ) { } + + ngOnInit() { + } + + back() { + this.location.back(); + } + +} diff --git a/src/global.scss b/src/global.scss index 7a28936..62affed 100644 --- a/src/global.scss +++ b/src/global.scss @@ -40,138 +40,11 @@ figure { margin: 0; } -header, h1, h2, h3, h4, h5 { +* { font-family: 'M PLUS Rounded 1c', sans-serif; margin: 0; } -// Hamburger menu - -.menu-icon-holder { - background-color: #005cbe; - color: white; - position: fixed; - bottom: -60px; - box-shadow: 0px 0px 5px var(--brand-blue); - width: 100px; - height: 100px; - text-align: center; - left: calc((100% - 100px)/2); - border-radius: 50%; - padding-top: 7px; - z-index: 1; - transition: transform 0.5s; - transform: translateY(0); - opacity: 0.7; - - &.hide { - display: none; - } - - &.inactive { - transform: translateY(100px); - } - - ion-icon { - font-size: 30px; - } -} - -.close-icon-holder { - background-color: white; - width: 70%; - position: fixed; - left: calc((100% - 70%) / 2); - height: 100px; - border-radius: 50%; - color: var(--brand-blue); - text-align: center; - z-index: 5; - bottom: -60px; - padding-top: 10px; - transition: transform 0.3s; - transform: scale(0); - - &.active { - transform: scale(1); - } - - ion-icon { - font-size: 25px; - } -} - -.menu-items-holder { - background-image: url('assets/custom/background-5.svg'); - background-size: cover; - background-repeat: no-repeat; - background-position: left top; - border-radius: 50%; - position: fixed; - left: calc((100% - 150%) / 2); - bottom: -150px; - z-index: 4; - height: 300px; - width: 150%; - padding: 20px 30%; - display: flex; - justify-content: space-between; - align-items: flex-start; - transition: transform 0.3s; - transform: scale(0); - - &.active { - transform: scale(1); - } - - button { - background-color: white; - height: 50px; - width: 50px; - border-radius: 50%; - font-size: 20px; - position: relative; - - &:first-child { - transform: translateY(40px); - } - - &:nth-child(2) { - transform: translateY(20px); - } - - &:nth-child(3) { - transform: translateY(10px); - } - - &:last-child { - transform: translateY(40px); - } - - &:nth-child(4) { - transform: translateY(20px); - } - } -} - -.overlay { - position: fixed; - top: 0; - left: 0; - height: 100vh; - width: 100vw; - pointer-events: none; - background-color: black; - opacity: 0; - z-index: 3; - transition: opacity 0.5s; - - &.active { - pointer-events: all; - opacity: 0.5; - } -} - .results-utilities-holder { display: flex; width: 100%; diff --git a/src/index.html b/src/index.html index fa5e595..120c11d 100644 --- a/src/index.html +++ b/src/index.html @@ -18,7 +18,7 @@ - +