From f8533437ae4133944a368163f23644de25b646d0 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 11 Jun 2020 12:27:35 +0530 Subject: [PATCH] Profile UI --- src/app/profile/profile.component.html | 102 +++++++++++- src/app/profile/profile.component.scss | 182 +++++++++++++++++++++ src/app/profile/profile.component.ts | 20 ++- src/assets/custom-icons/number-1-medal.svg | 1 + src/assets/custom-icons/settings.svg | 52 ++++++ src/assets/custom-icons/star-medal.svg | 81 +++++++++ src/styles.scss | 2 +- 7 files changed, 432 insertions(+), 8 deletions(-) create mode 100644 src/assets/custom-icons/number-1-medal.svg create mode 100644 src/assets/custom-icons/settings.svg create mode 100644 src/assets/custom-icons/star-medal.svg diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html index 9df0576..979f8f0 100644 --- a/src/app/profile/profile.component.html +++ b/src/app/profile/profile.component.html @@ -1 +1,101 @@ -

profile works!

+
+
+ + + +
+ +
+
+
+ +
+
Dwayne The Rock
+

3000 XP

+
+
+ +
+ + + +
+ +
+
    +
  • + +
    + +

    2 Teachers starred your profile

    +
    +
    • + +
  • + +
    + +

    Topper of 5 Tests

    +
    +
    • + +
  • + +
    + +

    2 Teachers starred your profile

    +
    +
    • + +
  • + +
    + +

    Topper of 5 Tests

    +
    +
    • +
+ + +
    +
  • + +
    + +

    1000XP

    +
    +
    • + +
  • + +
    + +

    1XP

    +
    +
    • + +
  • + +
    + +

    10XP

    +
    +
    • + +
  • + +
    + +

    -19XP

    +
    +
    • +
+
+
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss index e69de29..7a4436d 100644 --- a/src/app/profile/profile.component.scss +++ b/src/app/profile/profile.component.scss @@ -0,0 +1,182 @@ +.page { + height: 100vh; + overflow: auto; + background-color: var(--ash-black); +} + + +.nav-header { + background-color: var(--ash-black); + display: flex; + align-items: center; + padding: 0 5%; + height: 60px; + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: 1; + + button { + border: 0px; + background-color: transparent; + .icon { + width: 16px; + height: 16px; + fill: var(--light-grey); + } + + &.settings-button { + margin-left: auto; + + .icon { + width: 20px; + height: 20px; + } + } + } +} + +.upfold { + padding: 0 0 20px; + width: 100%; + text-align: center; + + figure { + width: 100px; + height: 100px; + margin: 0 auto 10px; + border-radius: 50%; + overflow: hidden; + border: 5px solid var(--dark-grey); + display: block; + + img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: top; + display: block; + } + } + + h5 { + font-weight: 500; + font-size: 16px; + color: white; + } + + p { + font-size: 14px; + color: var(--light-grey); + } +} + +.segment-buttons { + display: flex; + align-items: stretch; + height: 35px; + border-radius: 7px; + overflow: hidden; + width: 90%; + margin: 0 auto 20px; + background-color: var(--dark-grey); + + button { + flex-grow: 1; + border-radius: 7px; + background-color: transparent; + color: white; + font-size: 13px; + border: 0px; + + &.active { + background-color: white; + color: var(--teal); + font-weight: 500; + } + } +} + + +.badge-list { + list-style: none; + width: 90%; + margin: 0 auto; + background-color: white; + border-radius: 10px; + padding: 0px 10px; + + li { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + padding: 15px 10px; + border-bottom: 1px solid #f3f3f3; + } + + .icon { + width: 40px; + height: 40px; + } + + .content { + width: calc(100% - 60px); + } + + label { + display: block; + font-size: 16px; + color: var(--ash-black); + font-weight: 500; + } + + p { + font-size: 14px; + color: var(--light-grey); + } +} + + +.friend-list { + list-style: none; + width: 90%; + margin: 0 auto; + background-color: white; + border-radius: 10px; + padding: 0px 10px; + + li { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + padding: 15px 10px; + border-bottom: 1px solid #f3f3f3; + } + + img { + width: 50px; + height: 50px; + border-radius: 50px; + overflow: hidden; + object-fit: cover; + object-position: top; + } + + .content { + width: calc(100% - 70px); + } + + label { + display: block; + font-size: 16px; + color: var(--ash-black); + font-weight: 500; + } + + p { + font-size: 14px; + color: var(--light-grey); + } +} diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts index 29ea4ff..ddd21eb 100644 --- a/src/app/profile/profile.component.ts +++ b/src/app/profile/profile.component.ts @@ -1,15 +1,23 @@ import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; @Component({ - selector: 'app-profile', - templateUrl: './profile.component.html', - styleUrls: ['./profile.component.scss'] + selector: 'app-profile', + templateUrl: './profile.component.html', + styleUrls: ['./profile.component.scss'] }) export class ProfileComponent implements OnInit { + selectedSegment: string = 'badges'; - constructor() { } + constructor( + private location: Location + ) { } - ngOnInit(): void { - } + ngOnInit(): void { + } + + back() { + this.location.back(); + } } diff --git a/src/assets/custom-icons/number-1-medal.svg b/src/assets/custom-icons/number-1-medal.svg new file mode 100644 index 0000000..8852f60 --- /dev/null +++ b/src/assets/custom-icons/number-1-medal.svg @@ -0,0 +1 @@ + diff --git a/src/assets/custom-icons/settings.svg b/src/assets/custom-icons/settings.svg new file mode 100644 index 0000000..196bf8e --- /dev/null +++ b/src/assets/custom-icons/settings.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/star-medal.svg b/src/assets/custom-icons/star-medal.svg new file mode 100644 index 0000000..d8be50c --- /dev/null +++ b/src/assets/custom-icons/star-medal.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles.scss b/src/styles.scss index fd8f92f..9f94107 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,9 +5,9 @@ margin: 0; padding: 0; box-sizing: border-box; - line-height: 1.7; letter-spacing: 0.5px; outline: none; + line-height: 1.4; } :root {