From cd2de5fe9ebcd3be1c23ec1fbdb26c16ffd75217 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Wed, 2 Oct 2019 17:29:27 +0530 Subject: [PATCH] Basic profile page completion - partial commit --- src/app/cart/cart.page.scss | 2 + src/app/profile/profile.page.html | 50 +++++++-- src/app/profile/profile.page.scss | 166 +++++++++++++++++++++++------- src/app/profile/profile.page.ts | 1 + src/assets/custom/dinner.svg | 1 + src/assets/custom/hotel-bell.svg | 56 ++++++++++ src/assets/custom/logout.svg | 1 + src/assets/custom/profit.svg | 15 +++ 8 files changed, 247 insertions(+), 45 deletions(-) create mode 100644 src/assets/custom/dinner.svg create mode 100644 src/assets/custom/hotel-bell.svg create mode 100644 src/assets/custom/logout.svg create mode 100644 src/assets/custom/profit.svg diff --git a/src/app/cart/cart.page.scss b/src/app/cart/cart.page.scss index bfc1708..062f3ef 100644 --- a/src/app/cart/cart.page.scss +++ b/src/app/cart/cart.page.scss @@ -58,6 +58,7 @@ h5 { color: var(--brand-dark-grey); font-size: 12px; + margin: 0; } ion-button { @@ -67,6 +68,7 @@ margin: 0; span,ion-icon { + display: inline-block; vertical-align: middle; } } diff --git a/src/app/profile/profile.page.html b/src/app/profile/profile.page.html index 5a491b7..58c416e 100644 --- a/src/app/profile/profile.page.html +++ b/src/app/profile/profile.page.html @@ -1,20 +1,13 @@ -
-
- -

Profile

-
-
-
-

Mr. Christian Carry +

Mr. Christian Carry Edit -
+
  • +91 0909239302
  • christian.carry22232@gmail.com
    • @@ -23,8 +16,45 @@
Nagarbhavi, Bengaluru KA
- +
+
+
+
+ +
+ MY ORDERS +
+
+
+ +
+ REFER & EARN +
+
+
+ +
+ NOTIFICATION +
+
+
+ +
+ LOGOUT +
+
+ +
+
{{ selected_tab }}
+ + SORT / FILTER + +
+ diff --git a/src/app/profile/profile.page.scss b/src/app/profile/profile.page.scss index 0117ee9..8349c57 100644 --- a/src/app/profile/profile.page.scss +++ b/src/app/profile/profile.page.scss @@ -1,55 +1,151 @@ -.header-bar { +.profile { 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; + color: white; padding: 15px; - height: 75px; - z-index: 3; - top: 0; - left: 0; - width: 100%; - position: sticky; - .heading-holder { + .profile-details-holder { display: flex; - align-items: center; + align-items: stretch; + justify-content: space-between; + border-bottom: 1px solid var(--brand-blue); + padding-bottom: 15px; + + .profile-image { + width: 40px; + height: 40px; + border-radius: 50%; + background-color: white; + } + + h5 { + margin: 0 auto; + font-size: 14px; + display: flex; + align-items: center; + justify-content: space-between; + + ion-button { + margin: 0; + font-size: 10px; + } + } + + .contact { + padding: 0; + margin: 10px 0 0; + font-size: 10px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 90%; + + li { + width: 48%; + } + + li:first-child { + list-style: none; + } + } + + .content { + width: calc(100% - 55px); + } } - button, a { - background-color: white; - color: var(--brand-blue); - font-size: 18px; - padding: 5px; - border-radius: 50%; - height: 30px; - width: 30px; + .location-details { display: flex; - justify-content: center; + width: 100%; + justify-content: space-between; align-items: center; + padding-top: 15px; + font-size: 12px; + + ion-button { + margin: 0; + --padding-top: 0; + --padding-bottom: 0; + --padding-start: 0; + --padding-end: 0; + width: 30px; + height: 30px; + border-radius: 50%; + font-size: 12px; + --color: var(--brand-blue); + --border-radius: 50%; + --background: white; + } + } +} + +.tabs-holder { + display: flex; + align-items: stretch; + padding: 10px 0; + + .tab { + width: 25%; &.active { - color: white; - background-color: var(--brand-blue); + figure { + border-color: var(--brand-blue); + background-color: transparent; + } + span { + color: var(--brand-blue); + } } } - h3 { - font-size: 16px; - color: white; - letter-spacing: 0.5px; - margin-left: 10px; - font-weight: 600; + figure { + margin: 10px auto; + padding: 10px; + background-color: #efefef; + border: 2px solid #efefef; + width: 50px; + height: 50px; + border-radius: 50%; + transition: border-color 0.3s; + + img { + display: block; + width: 100%; + height: 100%; + } + } + + span { + display: block; + text-align: center; + font-size: 10px; + color: var(--brand-dark-grey); + font-weight: 500; + transition: color 0.4s; } } -.profile { - background-image: url('../../assets/custom/background-5.svg'); - background-size: cover; - background-repeat: no-repeat; - background-position: left top; - color: white; +.tab-utilities-holder { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0 15px; + margin: 0 auto; + background-color: #efefef; + + h5 { + color: var(--brand-dark-grey); + font-size: 12px; + margin: 0; + } + + ion-button { + --padding-end: 0; + --color: var(--brand-blue); + font-size: 10px; + margin: 0; + } } diff --git a/src/app/profile/profile.page.ts b/src/app/profile/profile.page.ts index ab841ef..6d1e3ae 100644 --- a/src/app/profile/profile.page.ts +++ b/src/app/profile/profile.page.ts @@ -7,6 +7,7 @@ import { Location } from '@angular/common'; styleUrls: ['./profile.page.scss'], }) export class ProfilePage implements OnInit { + selected_tab: string = 'MY ORDERS'; constructor( private location: Location diff --git a/src/assets/custom/dinner.svg b/src/assets/custom/dinner.svg new file mode 100644 index 0000000..32dc63f --- /dev/null +++ b/src/assets/custom/dinner.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/custom/hotel-bell.svg b/src/assets/custom/hotel-bell.svg new file mode 100644 index 0000000..0a2e2d7 --- /dev/null +++ b/src/assets/custom/hotel-bell.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom/logout.svg b/src/assets/custom/logout.svg new file mode 100644 index 0000000..8c5e594 --- /dev/null +++ b/src/assets/custom/logout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/custom/profit.svg b/src/assets/custom/profit.svg new file mode 100644 index 0000000..d744c2a --- /dev/null +++ b/src/assets/custom/profit.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file