Skip to content

P
PERFORMA_REPLICA
Commit b55f1f96 by Muhammad Usman
Options

dashboard view completed with mobile view

parent 4048d56b
Showing with 416 additions and 33 deletions
frontend/angular/src/app/components/my-career-web/auth/forgot-password/forgot-password.component.html
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="form-group" *ngIf="!emailSent"> <div class="form-group" *ngIf="!emailSent">
<label>Email Address</label> <label>Email Address</label>
<app-form-control> <app-form-control>
<input type="email" name="username" required class="form-control" [(ngModel)]="forgotForm.username"> <input type="email" name="username" email required class="form-control" [(ngModel)]="forgotForm.username">
</app-form-control> </app-form-control>
</div> </div>
......
frontend/angular/src/app/components/my-career-web/auth/register/register.component.html
<div class="bck-link mc-nav-link" routerLink="/my-career-web/auth/login"><i class="fa fa-chevron-left"></i><span>Back</span></div> <div class="bck-link mc-nav-link" routerLink="/my-career-web"><i class="fa fa-chevron-left"></i><span>Back</span></div>
<div class="row signup-wrapper"> <div class="row signup-wrapper">
<div class="col-md-offset-4 col-md-4"> <div class="col-md-offset-4 col-md-4">
<div class="mc-signup-logo d-flex justify-content-center"> <div class="mc-signup-logo d-flex justify-content-center">
......
frontend/angular/src/app/components/my-career-web/base/base.component.ts
import { HostListener, OnDestroy, OnInit } from '@angular/core'; import { AfterViewInit, HostListener, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
export class BaseComponent implements OnInit, OnDestroy { export class BaseComponent implements AfterViewInit, OnDestroy {
isEditMode = false; isEditMode = false;
isLoading = false; isLoading = false;
...@@ -21,8 +21,10 @@ export class BaseComponent implements OnInit, OnDestroy { ...@@ -21,8 +21,10 @@ export class BaseComponent implements OnInit, OnDestroy {
}), 500); }), 500);
} }
ngOnInit(): void { ngAfterViewInit(): void {
setTimeout(() => {
this.isMobileView = document.body.getBoundingClientRect().width <= 600; this.isMobileView = document.body.getBoundingClientRect().width <= 600;
}, 100);
} }
......
frontend/angular/src/app/components/my-career-web/dashboard/dashboard.module.ts
...@@ -6,7 +6,7 @@ import { DashboardRouting } from './dashboard.routing'; ...@@ -6,7 +6,7 @@ import { DashboardRouting } from './dashboard.routing';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component'; import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component';
import { RightSidebarComponent } from './right-sidebar/right-sidebar.component'; import { ProfileTasksComponent } from './profile-tasks/profile-tasks.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -18,7 +18,7 @@ import { RightSidebarComponent } from './right-sidebar/right-sidebar.component'; ...@@ -18,7 +18,7 @@ import { RightSidebarComponent } from './right-sidebar/right-sidebar.component';
DashboardComponent, DashboardComponent,
HomeComponent, HomeComponent,
LeftSidebarComponent, LeftSidebarComponent,
RightSidebarComponent ProfileTasksComponent
] ]
}) })
......
frontend/angular/src/app/components/my-career-web/dashboard/dashboard/dashboard.component.html
...@@ -10,7 +10,56 @@ ...@@ -10,7 +10,56 @@
</div> </div>
<div class="dashboard-right-sidebar"> <div class="dashboard-right-sidebar">
<app-right-sidebar></app-right-sidebar> <app-profile-tasks></app-profile-tasks>
</div>
</div>
</div>
<!-- Mobile Navigation -->
<div class="row" *ngIf="isMobileView">
<div class="col-12" style="padding: 0;">
<div class="mobile-dashboard">
<div class="mobile-header">
<div class="mobile-header-navigation" (click)="showMobileNav = true">
<i class="fa fa-bars"></i>
</div>
<div class="mobile-header-logo">
<img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
</div>
<div class="mobile-header-notification">
<i class="fa fa-bell"></i>
</div>
</div>
<div class="mobile-nav-menu" [ngClass]="{show: showMobileNav}">
<div class="mobile-nav-content">
<i class="fa fa-times" (click)="showMobileNav = false;"></i>
<div class="mobile-nav-links">
<div class="mobile-nav-link"><i class="fa fa-home"></i> Home</div>
<div class="mobile-nav-link"><i class="fa fa-lock"></i> My Career Profile</div>
<div class="mobile-nav-link"><i class="fa fa-document"></i> My Reports</div>
<div class="mobile-nav-link"><i class="fa fa-gear"></i> My Account</div>
<div class="mobile-nav-link"><i class="fa fa-sign-out"></i> Logout</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
</div> </div>
</div> </div>
</div> </div>
frontend/angular/src/app/components/my-career-web/dashboard/dashboard/dashboard.component.scss
@import "~styles/my-career-styles/variables";
.dashboard-wrapper { .dashboard-wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -15,7 +17,7 @@ ...@@ -15,7 +17,7 @@
&-content { &-content {
flex: 1; width: calc(100% - 520px);
} }
&-right-sidebar { &-right-sidebar {
...@@ -23,3 +25,92 @@ ...@@ -23,3 +25,92 @@
} }
} }
} }
.mobile-dashboard {
position: relative;
.mobile-nav {
&-menu {
position: fixed;
background: linear-gradient(135deg, #12A8DE 0%, #1469A2 100%);
box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
top: 0;
bottom: 0;
width: 0;
transition: .5s;
color: #fff;
&.show {
width: 100%;
padding: 24px;
}
}
&-content {
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.mobile-nav-links {
.mobile-nav-link {
color: #FFFFFF;
font-family: $bodyFont;
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.fa {
margin-right: 10px;
}
&:not(:last-child) {
margin-bottom: 35px;
}
}
}
.fa-times {
font-size: 24px;
position: absolute;
right: 0;
top: 0;
}
}
}
.mobile {
&-header {
height: 64px;
background-color: #FFFFFF;
box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
.fa {
font-size: 24px;
&.fa-bell {
color: #12A8DE;
}
}
&-logo {
img {
height: 32px;
width: 165px;
}
}
&.navigation {
}
}
}
}
frontend/angular/src/app/components/my-career-web/dashboard/dashboard/dashboard.component.ts
...@@ -11,6 +11,7 @@ import { AuthService } from '../../services/auth.service'; ...@@ -11,6 +11,7 @@ import { AuthService } from '../../services/auth.service';
}) })
export class DashboardComponent extends BaseComponent implements OnInit { export class DashboardComponent extends BaseComponent implements OnInit {
showMobileNav;
constructor( constructor(
private as: AuthService, private as: AuthService,
private r: Router private r: Router
......
frontend/angular/src/app/components/my-career-web/dashboard/home/home.component.html
<div class="home-wrapper"> <div class="home-wrapper" *ngIf="!isMobileView">
<div class="home-header"> <div class="home-header">
<div class="home-header-heading">Hey Mark, Welcome to Matchd Career.</div> <div class="home-header-heading">Hey Mark, Welcome to Matchd Career.</div>
<div class="home-header-card"> <div class="home-header-card">
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
Get to know yourself Get to know yourself
</div> </div>
<div class="home-body-extra-features" style="height: 240px;"> <div class="home-body-extra-features" style="min-height: 240px;">
<div class="extra-feature"> <div class="extra-feature">
<div class="feature-heading">Development Reports</div> <div class="feature-heading">Development Reports</div>
<div class="feature-content">Information about feature that gives user context as to why to upgrade.</div> <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
...@@ -49,3 +49,83 @@ ...@@ -49,3 +49,83 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Mobile View -->
<div class="home-mobile-wrapper" *ngIf="isMobileView">
<div class="home-mobile-tabs">
<div class="home-mobile-tab" [ngClass]="{selected: selectedMobileTab === 'dashboard'}" (click)="selectedMobileTab = 'dashboard'">Dashboard</div>
<div class="home-mobile-tab" [ngClass]="{selected: selectedMobileTab === 'tasks'}" (click)="selectedMobileTab = 'tasks'">Tasks</div>
</div>
<div class="mobile-tab-content" *ngIf="selectedMobileTab === 'dashboard'">
<div class="home-mobile-header">
<div class="mobile-header-heading">Hey Mark, Welcome to Matchd Career.</div>
<div class="mobile-header-card">
We need some information from you so you can fill out your career profile and get job hunting.
<div class="mobile-header-card-action">I'm ready to get started</div>
</div>
</div>
<div class="home-mobile-body">
<div class="mobile-body-heading">
Get to know yourself
</div>
<div class="home-mobile-body-features">
<div class="feature">
<div class="feature-heading">Development Reports</div>
<div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
<div class="feature-action">Get this feature</div>
<div class="extra-feature-image" style="position: relative;">
<img src="assets/my-career-web/svgs/summary-report.svg" style="margin-top: 10px;">
</div>
</div>
</div>
<div class="mobile-body-heading">
Don’t miss out on these extra features
</div>
<div class="home-mobile-body-features">
<div class="feature">
<div class="feature-heading">Manage Jobs</div>
<div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
<div class="feature-action">Get this feature</div>
</div>
<div class="feature">
<div class="feature-heading">Find Job Fit</div>
<div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
<div class="feature-action">Get this feature</div>
</div>
<div class="feature">
<div class="feature-heading">Development Reports</div>
<div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
<div class="feature-action">Get this feature</div>
</div>
</div>
</div>
</div>
<div class="mobile-tab-content" *ngIf="selectedMobileTab === 'tasks'">
<app-profile-tasks></app-profile-tasks>
</div>
</div>
frontend/angular/src/app/components/my-career-web/dashboard/home/home.component.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.home-header { .home-header {
height: 120px; height: 120px;
background: #58595B; background: #58595B;
padding: 30px 92px; padding: 30px 10%;
position: relative; position: relative;
&-heading { &-heading {
...@@ -54,15 +54,13 @@ ...@@ -54,15 +54,13 @@
.home-body { .home-body {
padding: 100px 92px 0; padding: 100px 10% 0;
&-heading { &-heading {
color: #58595B; color: #58595B;
font-family: $headingFont; font-family: $headingFont;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
letter-spacing: 0;
line-height: 27px;
margin-bottom: 24px; margin-bottom: 24px;
} }
...@@ -137,3 +135,157 @@ ...@@ -137,3 +135,157 @@
} }
} }
} }
// Mobile View
.home-mobile-wrapper {
.home-mobile-tabs {
background-color: #FFFFFF;
border: 1px solid #12A8DE;
border-radius: 4px;
height: 40px;
display: flex;
margin: 16px 10px;
.home-mobile-tab {
flex: 1;
color: #12A8DE;
font-family: $bodyFont;
font-size: 14px;
font-weight: 600;
text-align: center;
transition: .3s;
padding: 10px;
&.selected {
background: #12A8DE;
color: #fff;
}
}
}
.home-mobile-header {
height: 120px;
background-color: #58595B;
padding: 18px 10px;
position: relative;
.mobile-header {
&-heading {
color: #FFFFFF;
font-family: $headingFont;
font-size: 24px;
font-weight: bold;
}
&-card {
padding: 16px 13px;
border-radius: 4px;
background-color: #FFFFFF;
box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
height: 207px;
width: 100%;
margin-top: 16px;
font-size: 20px;
color: #58595B;
font-family: $bodyFont;
&-action {
border-radius: 73px;
background-color: #12A8DE;
color: #FFFFFF;
font-family: $bodyFont;
font-size: 14px;
text-align: center;
padding: 15px;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
margin-top: 12px;
}
}
}
}
.home-mobile-body {
margin-top: 215px;
padding: 10px;
.mobile-body-heading {
color: #58595B;
font-family: $headingFont;
font-size: 18px;
font-weight: bold;
margin-bottom: 24px;
}
&-features {
.feature {
padding: 12px 16px;
border-radius: 4px;
background-color: #FFFFFF;
box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
margin-bottom: 24px;
&-heading {
color: #58595B;
font-family: $bodyFont;
font-size: 20px;
letter-spacing: 0;
line-height: 27px;
margin-bottom: 24px;
font-weight: 500;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
bottom: -7px;
height: 1px;
width: 47px;
border: 1px solid #F37124;
}
}
&-content {
color: #58595B;
font-family: $bodyFont;
font-size: 15px;
letter-spacing: 0;
line-height: 21px;
margin-bottom: 24px;
}
&-action {
padding: 15px;
text-align: center;
border: 1px solid #12A8DE;
border-radius: 73px;
color: #12A8DE;
cursor: pointer;
transition: .3s;
&:hover {
background: #12A8DE;
color: #fff;
}
}
}
}
}
}
frontend/angular/src/app/components/my-career-web/dashboard/home/home.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BaseComponent } from '../../base/base.component';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
templateUrl: './home.component.html', templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'] styleUrls: ['./home.component.scss']
}) })
export class HomeComponent implements OnInit { export class HomeComponent extends BaseComponent implements OnInit {
constructor() { } selectedMobileTab = 'dashboard';
constructor() {
super();
}
ngOnInit() { ngOnInit() {
} }
......
frontend/angular/src/app/components/my-career-web/dashboard/right-sidebar/right-sidebar.component.html → frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.html
<div class="right-sidebar"> <div class="right-sidebar">
<div class="user-profile"> <div class="user-profile">
<i class="fa fa-bell"></i> <i class="fa fa-bell" *ngIf="!isMobileView"></i>
<div class="user-profile-avatar-wrapper"> <div class="user-profile-avatar-wrapper">
<div class="user-profile-avatar"> <div class="user-profile-avatar">
<img src="assets/my-career-web/svgs/avatar.svg" alt=""> <img src="assets/my-career-web/svgs/avatar.svg" alt="">
......
frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { BaseComponent } from '../../base/base.component';
@Component({
selector: 'app-profile-tasks',
templateUrl: './profile-tasks.component.html',
styleUrls: ['./profile-tasks.component.scss']
})
export class ProfileTasksComponent extends BaseComponent implements OnInit {
constructor() {
super();
}
ngOnInit() {
}
}
frontend/angular/src/app/components/my-career-web/dashboard/right-sidebar/right-sidebar.component.ts deleted 100644 → 0
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() {
}
}
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