Skip to content

P
PERFORMA_REPLICA
Commit b55f1f96 by Muhammad Usman
Options

dashboard view completed with mobile view

parent 4048d56b
Showing with 422 additions and 39 deletions
frontend/angular/src/app/components/my-career-web/auth/forgot-password/forgot-password.component.html
......@@ -12,7 +12,7 @@
<div class="form-group" *ngIf="!emailSent">
<label>Email Address</label>
<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>
</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="col-md-offset-4 col-md-4">
<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';
export class BaseComponent implements OnInit, OnDestroy {
export class BaseComponent implements AfterViewInit, OnDestroy {
isEditMode = false;
isLoading = false;
......@@ -21,8 +21,10 @@ export class BaseComponent implements OnInit, OnDestroy {
}), 500);
}
ngOnInit(): void {
this.isMobileView = document.body.getBoundingClientRect().width <= 600;
ngAfterViewInit(): void {
setTimeout(() => {
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';
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';
import { ProfileTasksComponent } from './profile-tasks/profile-tasks.component';
@NgModule({
imports: [
......@@ -18,7 +18,7 @@ import { RightSidebarComponent } from './right-sidebar/right-sidebar.component';
DashboardComponent,
HomeComponent,
LeftSidebarComponent,
RightSidebarComponent
ProfileTasksComponent
]
})
......
frontend/angular/src/app/components/my-career-web/dashboard/dashboard/dashboard.component.html
......@@ -10,7 +10,56 @@
</div>
<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>
frontend/angular/src/app/components/my-career-web/dashboard/dashboard/dashboard.component.scss
@import "~styles/my-career-styles/variables";
.dashboard-wrapper {
display: flex;
justify-content: space-between;
......@@ -15,7 +17,7 @@
&-content {
flex: 1;
width: calc(100% - 520px);
}
&-right-sidebar {
......@@ -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';
})
export class DashboardComponent extends BaseComponent implements OnInit {
showMobileNav;
constructor(
private as: AuthService,
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-heading">Hey Mark, Welcome to Matchd Career.</div>
<div class="home-header-card">
......@@ -14,7 +14,7 @@
Get to know yourself
</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="feature-heading">Development Reports</div>
<div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
......@@ -49,3 +49,83 @@
</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 @@
.home-header {
height: 120px;
background: #58595B;
padding: 30px 92px;
padding: 30px 10%;
position: relative;
&-heading {
......@@ -54,15 +54,13 @@
.home-body {
padding: 100px 92px 0;
padding: 100px 10% 0;
&-heading {
color: #58595B;
font-family: $headingFont;
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
line-height: 27px;
margin-bottom: 24px;
}
......@@ -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 { BaseComponent } from '../../base/base.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
export class HomeComponent extends BaseComponent implements OnInit {
constructor() { }
selectedMobileTab = 'dashboard';
ngOnInit() {
}
constructor() {
super();
}
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="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">
<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