Skip to content

P
PERFORMA_REPLICA
Commit b49904bd by Muhammad Usman
Options

register page refer code options fixed

parent 701aa5ac
Showing with 483 additions and 24 deletions
frontend/angular/src/app/components/my-career-web/auth/register/register.component.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div class="was-referred form-group"> <div class="was-referred form-group">
<span>Were you referred by another member?</span> <span>Were you referred by another member?</span>
<div class="mt-sm-top"> <div class="mt-sm-top" style="white-space: nowrap;">
<p-radioButton label="Yes" [value]="true" name="was_referred" [(ngModel)]="registerForm.was_referred"> <p-radioButton label="Yes" [value]="true" name="was_referred" [(ngModel)]="registerForm.was_referred">
</p-radioButton> </p-radioButton>
<p-radioButton label="No" [value]="false" name="was_referred" [(ngModel)]="registerForm.was_referred" [ngStyle]="{'margin-left': '15px'}"> <p-radioButton label="No" [value]="false" name="was_referred" [(ngModel)]="registerForm.was_referred" [ngStyle]="{'margin-left': '15px'}">
......
frontend/angular/src/app/components/my-career-web/base/base.component.ts
import { OnDestroy } from '@angular/core'; import { HostListener, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
export class BaseComponent implements OnDestroy { export class BaseComponent implements OnInit, OnDestroy {
isEditMode = false; isEditMode = false;
isLoading = false; isLoading = false;
isMobileView = false;
resizeTimeout = 500;
protected componentInView = new Subject(); protected componentInView = new Subject();
ngOnDestroy(): void { @HostListener('window:resize')
this.componentInView.next(); onWindowResize() {
this.componentInView.complete(); //debounce resize, wait for resize to finish before doing stuff
} if (this.resizeTimeout) {
clearTimeout(this.resizeTimeout);
}
this.resizeTimeout = setTimeout((() => {
this.isMobileView = document.body.getBoundingClientRect().width <= 600;
}), 500);
}
ngOnInit(): void {
this.isMobileView = document.body.getBoundingClientRect().width <= 600;
}
ngOnDestroy(): void {
this.componentInView.next();
this.componentInView.complete();
}
} }
frontend/angular/src/app/components/my-career-web/dashboard/dashboard.module.ts
...@@ -4,6 +4,9 @@ import { McSharedModule } from '../mc-shared/mc-shared.module'; ...@@ -4,6 +4,9 @@ import { McSharedModule } from '../mc-shared/mc-shared.module';
import { DashboardRouting } from './dashboard.routing'; import { DashboardRouting } from './dashboard.routing';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component';
import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component';
import { RightSidebarComponent } from './right-sidebar/right-sidebar.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -11,7 +14,13 @@ import { DashboardComponent } from './dashboard/dashboard.component'; ...@@ -11,7 +14,13 @@ import { DashboardComponent } from './dashboard/dashboard.component';
McSharedModule, McSharedModule,
DashboardRouting DashboardRouting
], ],
declarations: [DashboardComponent] declarations: [
DashboardComponent,
HomeComponent,
LeftSidebarComponent,
RightSidebarComponent
]
}) })
export class DashboardModule { export class DashboardModule {
} }
frontend/angular/src/app/components/my-career-web/dashboard/dashboard.routing.ts
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [ const routes: Routes = [
{path: '', component: DashboardComponent} {
path: '',
component: DashboardComponent,
children: [
{
path: 'home',
component: HomeComponent
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
}
]
}
]; ];
@NgModule({ @NgModule({
......
frontend/angular/src/app/components/my-career-web/dashboard/dashboard/dashboard.component.html
<app-overlay [isActive]="isLoading"></app-overlay> <div class="row" style="height: 100vh;" *ngIf="!isMobileView">
<a (click)="logout()">Logout</a> <div class="col-md-12 dashboard-wrapper" style="padding: 0;">
<div class="dashboard-left-sidebar">
<app-left-sidebar></app-left-sidebar>
</div>
<div class="dashboard-content">
<router-outlet></router-outlet>
</div>
<div class="dashboard-right-sidebar">
<app-right-sidebar></app-right-sidebar>
</div>
</div>
</div>
frontend/angular/src/app/components/my-career-web/dashboard/dashboard/dashboard.component.scss
.dashboard-wrapper {
display: flex;
justify-content: space-between;
height: 100%;
background: #FAFCFD;
.dashboard {
&-left-sidebar, &-right-sidebar {
height: 100%;
box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
min-width: 260px;
width: 18%;
}
&-content-sidebar {
}
&-right-sidebar {
}
}
}
frontend/angular/src/app/components/my-career-web/dashboard/dashboard/dashboard.component.ts
...@@ -22,14 +22,4 @@ export class DashboardComponent extends BaseComponent implements OnInit { ...@@ -22,14 +22,4 @@ export class DashboardComponent extends BaseComponent implements OnInit {
// //
} }
logout(): void {
this.isLoading = true;
this.as.logout()
.pipe(takeUntil(this.componentInView))
.subscribe(() => {
this.r.navigate(['/my-career-web/auth/login']);
this.isLoading = false;
});
}
} }
frontend/angular/src/app/components/my-career-web/dashboard/home/home.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
frontend/angular/src/app/components/my-career-web/dashboard/left-sidebar/left-sidebar.component.html 0 → 100644
<div class="left-sidebar">
<div class="matchd-logo">
<img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
</div>
<div class="sidebar-navigation">
<div class="sidebar-navigation-item" routerLink="/my-career-web/dashboard/home" routerLinkActive="active">
<span class="sidebar-navigation-item-icon">
<i class="fa fa-home"></i>
</span>
<span class="sidebar-navigation-item-text">
Home
</span>
</div>
<div class="sidebar-navigation-item disabled">
<span class="sidebar-navigation-item-icon">
<i class="fa fa-lock"></i>
</span>
<span class="sidebar-navigation-item-text">
My Career Profile
</span>
</div>
<div class="sidebar-navigation-item">
<span class="sidebar-navigation-item-icon">
<i class="fa fa-clipboard"></i>
</span>
<span class="sidebar-navigation-item-text">
My Reports
</span>
</div>
<div class="sidebar-navigation-item">
<span class="sidebar-navigation-item-icon">
<i class="fa fa-gear"></i>
</span>
<span class="sidebar-navigation-item-text">
My Account
</span>
</div>
<div class="sidebar-navigation-item" style="pointer-events: none;">
<hr style="border-bottom: 1px solid #E0E0E0;">
</div>
<div class="sidebar-navigation-item" (click)="logout()">
<span class="sidebar-navigation-item-icon">
<i class="fa" [ngClass]="isLoading ? 'fa-spin fa-spinner' : 'fa-sign-out'"></i>
</span>
<span class="sidebar-navigation-item-text">
Logout
</span>
</div>
</div>
</div>
frontend/angular/src/app/components/my-career-web/dashboard/left-sidebar/left-sidebar.component.scss 0 → 100644
@import "~styles/my-career-styles/variables";
.left-sidebar {
padding: 26px 26px 0 0;
.matchd-logo {
height: 32px;
width: 165px;
margin-left: 48px;
img {
width: 100%;
height: 100%;
}
}
.sidebar-navigation {
margin-top: 48px;
&-item {
height: 55px;
border-radius: 0 3px 3px 0;
padding: 17px 24px;
transition: .3s all;
cursor: pointer;
color: #58595B;
&-icon {
font-size: 18px;
}
&-text {
padding-left: 9px;
font-family: $bodyFont;
font-size: 16px;
font-weight: 500;
letter-spacing: 0;
line-height: 21px;
}
&:hover {
background: #eee;
}
&.active {
background: linear-gradient(135deg, #12A8DE 0%, #1469A2 100%);
color: #fff;
&:hover {
box-shadow: 0 0 7px 0 #12A8DE;
}
}
&.disabled {
color: #9C9FA5;
pointer-events: none;
}
}
}
}
frontend/angular/src/app/components/my-career-web/dashboard/left-sidebar/left-sidebar.component.ts 0 → 100644
import { Component } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { BaseComponent } from '../../base/base.component';
@Component({
selector: 'app-left-sidebar',
templateUrl: './left-sidebar.component.html',
styleUrls: ['./left-sidebar.component.scss']
})
export class LeftSidebarComponent extends BaseComponent {
constructor(
private as: AuthService,
private r: Router
) {
super();
}
logout(): void {
this.isLoading = true;
this.as.logout()
.pipe(takeUntil(this.componentInView))
.subscribe(() => {
this.r.navigate(['/my-career-web/auth/login']);
this.isLoading = false;
});
}
}
frontend/angular/src/app/components/my-career-web/dashboard/right-sidebar/right-sidebar.component.html 0 → 100644
<div class="right-sidebar">
<div class="user-profile">
<i class="fa fa-bell"></i>
<div class="user-profile-avatar-wrapper">
<div class="user-profile-avatar">
<img src="assets/my-career-web/svgs/avatar.svg" alt="">
</div>
</div>
<div class="user-profile-label">Profile 67% complete</div>
<hr style="border-bottom: 1px solid #E0E0E0; margin: 24px 0;">
<div class="user-profile-name">MARK STAFFORD</div>
<div class="user-profile-role" style="margin-top: 5px;">Web Developer</div>
<div class="user-profile-completion">
<div class="user-profile-sections">
<div class="user-profile-section active">
<span>Personal Details</span>
<span class="section-percentage">0%</span>
<button class="section-start">Get started</button>
</div>
<div class="user-profile-section">
<span>Work Strengths</span>
<span class="section-percentage">0%</span>
</div>
<div class="user-profile-section">
<span>Career Values</span>
<span class="section-percentage">0%</span>
</div>
<div class="user-profile-section">
<span>Career History</span>
<span class="section-percentage">0%</span>
</div>
<div class="user-profile-section">
<span>Diversity</span>
<span class="section-percentage">0%</span>
</div>
</div>
</div>
</div>
</div>
frontend/angular/src/app/components/my-career-web/dashboard/right-sidebar/right-sidebar.component.scss 0 → 100644
@import "~styles/my-career-styles/variables";
.right-sidebar {
padding: 26px 24px;
.user-profile {
position: relative;
&-avatar-wrapper {
position: relative;
text-align: center;
width: 112px;
height: 112px;
margin: 0 auto;
border-radius: 100%;
background: linear-gradient(270deg, #1469A2 50%, transparent 50%), linear-gradient(-90deg, #1469A2 50%, #EAECEE 50%);
padding: 4px;
.user-profile-avatar {
height: 100%;
width: 100%;
background: #fff;
border-radius: 50%;
padding: 12px;
img {
width: 100%;
height: 100%;
}
}
}
.fa-bell {
position: absolute;
right: 0;
top: 0;
font-size: 22px;
color: #12A8DE;
}
&-label {
margin-top: 18px;
text-align: center;
}
&-name, &-role, &-label {
color: #58595B;
font-family: $bodyFont;
font-size: 16px;
letter-spacing: 0;
line-height: 21px;
text-align: center;
}
&-name {
font-weight: 600;
text-transform: uppercase;
}
&-completion {
margin-top: 30px;
.user-profile-sections {
padding: 0 0 0 40px;
.user-profile-section {
border: 1px solid #E0E0E0;
border-radius: 2px;
font-size: 14px;
font-family: $bodyFont;
margin-bottom: 16px;
padding: 5px 8px;
color: #9C9FA5;
position: relative;
.section-percentage {
position: absolute;
right: 4px;
top: 4px;
}
.section-start {
border-radius: 4px;
background-color: #12A8DE;
line-height: 21px;
font-family: $bodyFont;
color: #fff;
box-shadow: none;
border: 0;
display: block;
height: 40px;
width: 100%;
margin-top: 7px;
}
&.active {
border-color: #12A8DE;
font-weight: bold;
color: #58595B;
&:before {
background: #12A8DE;
}
&:after {
background: linear-gradient(0, #E0E0D8 -5%, #12A8DE 100%);
}
}
&:before {
content: '';
position: absolute;
left: -35px;
width: 12px;
height: 12px;
border-radius: 50%;
top: 0;
background: #E0E0E0;
}
&:after {
content: '';
position: absolute;
left: -30px;
width: 2px;
top: 0;
bottom: -18px;
background: #E0E0E0;
}
&:last-child:after {
top: unset;
bottom: unset;
}
}
}
}
}
}
frontend/angular/src/app/components/my-career-web/dashboard/right-sidebar/right-sidebar.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-right-sidebar',
templateUrl: './right-sidebar.component.html',
styleUrls: ['./right-sidebar.component.scss']
})
export class RightSidebarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
frontend/angular/src/assets/my-career-web/svgs/avatar.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="76px" height="76px" viewBox="0 0 76 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 63.1 (101010) - https://sketch.com -->
<g id="Matchd-App-V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dashboard-new-user" transform="translate(-1272.000000, -48.000000)">
<g id="Avatar" transform="translate(1272.000000, 48.000000)">
<circle id="Oval" fill="#AEAEAE" cx="38" cy="38" r="38"></circle>
<path d="M47.5,29.3793103 C47.5,34.5691954 43.2566667,38.7586207 38,38.7586207 C32.7433333,38.7586207 28.5,34.5691954 28.5,29.3793103 C28.5,24.1894253 32.7433333,20 38,20 C43.2566667,20 47.5,24.1894253 47.5,29.3793103 L47.5,29.3793103 Z M19,50.8544996 C19,44.5634987 31.6666667,41.1034483 38,41.1034483 C44.3333333,41.1034483 57,44.5634987 57,50.8544996 L57,54 L19,54 L19,50.8544996 L19,50.8544996 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment