kj
/
lms-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Profile UI

master
kj1352 5 years ago
parent
d882bc8ecf
commit
f8533437ae
7 changed files with 432 additions and 8 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +101
    -1
      src/app/profile/profile.component.html
  2. +182
    -0
      src/app/profile/profile.component.scss
  3. +14
    -6
      src/app/profile/profile.component.ts
  4. +1
    -0
      src/assets/custom-icons/number-1-medal.svg
  5. +52
    -0
      src/assets/custom-icons/settings.svg
  6. +81
    -0
      src/assets/custom-icons/star-medal.svg
  7. +1
    -1
      src/styles.scss

+ 101
- 1
src/app/profile/profile.component.html View File

@@ -1 +1,101 @@
<p>profile works!</p>
<div class="page">
<header class="nav-header">
<button (click)="back()">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</button>

<button class="settings-button" (click)="back()">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/settings.svg"></svg-icon>
</button>
</header>

<section class="upfold">
<div>
<figure>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
</figure>
<h5> Dwayne The Rock </h5>
<p> 3000 XP </p>
</div>
</section>

<section class="segment-buttons">
<button (click)="selectedSegment='badges'"
[ngClass]="{'active': selectedSegment === 'badges'}"> Badges </button>
<button (click)="selectedSegment='friends'"
[ngClass]="{'active': selectedSegment === 'friends'}"> Friends </button>
<button (click)="selectedSegment='scores'"
[ngClass]="{'active': selectedSegment === 'scores'}"> Scores </button>
</section>

<div class="segment-holder">
<ul class="badge-list" *ngIf="selectedSegment === 'badges'">
<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/star-medal.svg"></svg-icon>
<div class="content">
<label> You're a Star! </label>
<p> 2 Teachers starred your profile </p>
</div>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/number-1-medal.svg"></svg-icon>
<div class="content">
<label> You're a the One! </label>
<p> Topper of 5 Tests </p>
</div>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/star-medal.svg"></svg-icon>
<div class="content">
<label> You're a Star! </label>
<p> 2 Teachers starred your profile </p>
</div>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/number-1-medal.svg"></svg-icon>
<div class="content">
<label> You're a the One! </label>
<p> Topper of 5 Tests </p>
</div>
</li>
</ul>


<ul class="friend-list" *ngIf="selectedSegment === 'friends'">
<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Neil Hudson </label>
<p> 1000XP </p>
</div>
</li>

<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Katty Perry </label>
<p> 1XP </p>
</div>
</li>

<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Selena Gomez </label>
<p> 10XP </p>
</div>
</li>

<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Matt Le Blanc </label>
<p> -19XP </p>
</div>
</li>
</ul>
</div>
</div>

+ 182
- 0
src/app/profile/profile.component.scss View File

@@ -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);
}
}

+ 14
- 6
src/app/profile/profile.component.ts View File

@@ -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();
}

}

+ 1
- 0
src/assets/custom-icons/number-1-medal.svg
File diff suppressed because it is too large
View File


+ 52
- 0
src/assets/custom-icons/settings.svg View File

@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,181c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C331,214.647,297.353,181,256,181z
"/>
</g>
</g>
<g>
<g>
<path d="M512,298.305v-84.609l-69.408-13.667c-3.794-12.612-8.833-24.771-15.103-36.343l38.73-58.096l-59.81-59.81l-58.096,38.73
c-11.572-6.27-23.73-11.309-36.343-15.103L298.305,0h-84.609l-13.667,69.408c-12.612,3.794-24.771,8.833-36.343,15.103
L105.59,45.78l-59.81,59.81l38.73,58.096c-6.27,11.572-11.309,23.73-15.103,36.343L0,213.695v84.609l69.408,13.667
c3.794,12.612,8.833,24.771,15.103,36.343L45.78,406.41l59.81,59.81l58.096-38.73c11.572,6.27,23.73,11.309,36.343,15.103
L213.695,512h84.609l13.667-69.408c12.612-3.794,24.771-8.833,36.343-15.103l58.096,38.73l59.81-59.81l-38.73-58.096
c6.27-11.572,11.309-23.73,15.103-36.343L512,298.305z M256,361c-57.891,0-105-47.109-105-105s47.109-105,105-105
s105,47.109,105,105S313.891,361,256,361z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 81
- 0
src/assets/custom-icons/star-medal.svg View File

@@ -0,0 +1,81 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.76 511.76" style="enable-background:new 0 0 511.76 511.76;" xml:space="preserve">
<polygon style="fill:#E95454;" points="151.352,221.248 39.592,431.808 141.08,422.432 190.2,511.744 301.96,301.184 "/>
<g>
<path style="fill:#ED6362;" d="M164.152,450.432c3.136-6.736-0.144-14.784-6.704-18.272l-6.432-3.424
c-6.432-3.664-8.88-11.808-5.376-18.4c3.552-6.704,11.904-9.264,18.608-5.712l18.176,9.648c5.616,2.976,12.656,0.816,15.552-4.832
l0.448-0.864c3.328-5.328,1.36-12.368-4.176-15.296l-54.368-28.848c-6.624-3.52-9.872-11.536-6.784-18.288
c3.408-7.184,12.016-10.016,18.944-6.336l50.432,26.768c5.616,2.976,12.656,0.816,15.632-4.8l0.288-0.736l0.08-0.16
c3.216-5.888,0.96-13.28-4.976-16.432l-28.288-15.008c-6.624-3.52-9.872-11.536-6.736-18.368
c3.376-7.104,12.016-10.016,18.944-6.336l31.248,16.592c5.84,3.104,12.816,0.512,15.84-5.376c0.048-0.08,0.048-0.08,0.08-0.16
c0.048-0.08,0.048-0.08,0.08-0.16c3.184-5.808,1.424-13.04-4.432-16.128l-33.712-17.888c-6.544-3.472-9.792-11.488-6.704-18.24
c3.408-7.184,12.016-10.016,18.944-6.336l83.168,44.144l-111.76,210.56l-30.8-55.984
C161.352,454.416,163.08,452.752,164.152,450.432z"/>
<polygon style="fill:#ED6362;" points="360.408,221.248 472.168,431.808 370.68,422.432 321.56,511.744 209.8,301.184 "/>
</g>
<path style="fill:#E95454;" d="M347.608,450.432c-3.136-6.736,0.144-14.784,6.704-18.272l6.432-3.424
c6.432-3.664,8.88-11.808,5.376-18.4c-3.552-6.704-11.904-9.264-18.608-5.712l-18.176,9.648c-5.616,2.976-12.656,0.816-15.552-4.832
l-0.448-0.864c-3.328-5.328-1.36-12.368,4.176-15.296l54.384-28.864c6.624-3.52,9.872-11.536,6.784-18.288
c-3.408-7.184-12.016-10.016-18.944-6.336l-50.432,26.768c-5.616,2.976-12.656,0.816-15.632-4.8l-0.288-0.736l-0.08-0.16
c-3.216-5.888-0.96-13.28,4.976-16.432l28.288-15.008c6.624-3.52,9.872-11.536,6.736-18.368
c-3.376-7.104-12.016-10.016-18.944-6.336l-31.28,16.624c-5.84,3.104-12.816,0.512-15.84-5.376c-0.048-0.08-0.048-0.08-0.08-0.16
c-0.048-0.08-0.048-0.08-0.08-0.16c-3.184-5.808-1.424-13.04,4.432-16.128l33.712-17.888c6.544-3.472,9.792-11.488,6.704-18.24
c-3.408-7.184-12.016-10.016-18.944-6.336L209.816,301.2l111.76,210.56l30.8-55.984C350.408,454.416,348.68,452.752,347.608,450.432
z"/>
<circle style="fill:#FFCC5B;" cx="255.88" cy="186.736" r="186.736"/>
<path style="fill:#FDBC4B;" d="M281.208,165.312H162.872c-9.2,0-16.752-7.552-16.752-16.752l0.128-1.152v-0.256
c-0.128-9.712,7.792-17.648,17.52-17.648h82.016c10.864,0,20.464-8.048,21.104-18.928C267.4,99.2,258.328,89.6,246.936,89.6h-86.88
c-9.584,0-16.752-8.048-16.624-17.648c0-0.128,0-0.128,0-0.256s0-0.128,0-0.256c-0.128-9.584,7.024-17.648,16.624-17.648h90.912
c10.736,0,20.336-8.048,20.976-18.8c0.512-11.504-8.56-20.976-19.952-20.976h-66.576C117.528,42,69.688,108.752,69.688,186.736
s47.84,144.72,115.744,172.672h84.528c10.736,0,20.336-8.048,20.976-18.8c0.512-11.504-8.56-20.96-19.952-20.96l-96.16-0.016
c-11.344,0-20.48-9.488-19.872-20.976c0.56-10.752,10.224-18.832,20.992-18.832h37.28c10.72-0.304,19.376-9.088,19.376-19.888
c0-10.992-8.944-19.952-19.952-19.952h-56.512c-9.2,0-16.752-7.536-16.624-16.752v-1.408c-0.64-9.072,6.656-16.752,15.728-16.752
h124.816c10.864,0,20.464-8.048,21.104-18.8C301.672,174.784,292.584,165.312,281.208,165.312z"/>
<path style="fill:#FFDB70;" d="M255.88,320.016c-73.504,0-133.296-59.808-133.296-133.296S182.376,53.44,255.88,53.44
s133.296,59.808,133.296,133.296S329.384,320.016,255.88,320.016z"/>
<path style="opacity:0.2;fill:#FFFFFF;enable-background:new ;" d="M389.176,186.736c0-70.912-55.712-128.912-125.648-132.912
h-12.416c-8.192,0-15.504,6.144-16,14.336c-0.384,8.768,6.528,16,15.216,16l73.344,0.016c8.656,0,15.616,7.232,15.152,16
c-0.432,8.208-7.792,14.368-16.016,14.368h-28.432c-8.176,0.24-14.784,6.928-14.784,15.168c0,8.384,6.832,15.216,15.216,15.216
h43.104c7.024,0,12.768,5.76,12.672,12.768v1.056c0.48,6.928-5.072,12.768-12,12.768H243.4c-8.288,0-15.6,6.144-16.096,14.336
c-0.384,8.768,6.528,16,15.216,16h90.24c7.024,0,12.768,5.76,12.768,12.768l-0.096,0.88v0.192
c0.096,7.408-5.952,13.456-13.36,13.456h-62.56c-8.288,0-15.6,6.144-16.096,14.432c-0.384,8.672,6.528,16,15.216,16h66.256
c7.312,0,12.768,6.144,12.672,13.456c0,0.096,0,0.096,0,0.192c0,0.096,0,0.096,0,0.192c0.096,7.312-5.36,13.456-12.672,13.456
H265.56c-8.192,0-15.504,6.144-16,14.336c-0.384,8.784,6.528,16,15.216,16h18.288C343.592,304.608,389.176,250.896,389.176,186.736z
"/>
<path style="fill:#EC9922;" d="M348.936,157.216h-64.832l-20.048-61.664c-2.576-7.92-13.792-7.92-16.368,0l-20.032,61.664h-64.832
c-8.336,0-11.808,10.672-5.056,15.568l52.448,38.112l-20.032,61.664c-2.576,7.92,6.496,14.512,13.248,9.616l52.448-38.112
l52.448,38.112c6.752,4.896,15.824-1.696,13.248-9.616l-20.032-61.664l52.448-38.112
C360.728,167.888,357.272,157.216,348.936,157.216z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 1
- 1
src/styles.scss View File

@@ -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 {