Skip to content

P
PERFORMA_REPLICA
Commit 4048d56b by Muhammad Usman
Options

home component ui completed for desktop

parent fbaa9506
Showing with 202 additions and 10 deletions
frontend/angular/src/app/components/my-career-web/auth/forgot-password/forgot-password.component.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="mc-login-logo d-flex justify-content-center"> <div class="mc-login-logo d-flex justify-content-center">
<img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt=""> <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
</div> </div>
<div class="title-goes-here">Title goes here</div> <div class="title-goes-here">Title goes here.</div>
<div class="subtitle-giving-cont">Subtitle giving context to product and selling users on why they should sign up goes here.</div> <div class="subtitle-giving-cont">Subtitle giving context to product and selling users on why they should sign up goes here.</div>
<form class="login-form position-relative" #form="ngForm"> <form class="login-form position-relative" #form="ngForm">
......
frontend/angular/src/app/components/my-career-web/auth/forgot-password/forgot-password.component.scss
...@@ -112,6 +112,7 @@ ...@@ -112,6 +112,7 @@
font-size: 11px; font-size: 11px;
letter-spacing: 0; letter-spacing: 0;
line-height: 13px; line-height: 13px;
left: 0;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
......
frontend/angular/src/app/components/my-career-web/auth/login/login.component.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="mc-login-logo d-flex justify-content-center"> <div class="mc-login-logo d-flex justify-content-center">
<img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt=""> <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
</div> </div>
<div class="title-goes-here">Title goes here</div> <div class="title-goes-here">Title goes here.</div>
<div class="subtitle-giving-cont">Subtitle giving context to product and selling users on why they should sign up goes here.</div> <div class="subtitle-giving-cont">Subtitle giving context to product and selling users on why they should sign up goes here.</div>
<form class="login-form position-relative" #form="ngForm"> <form class="login-form position-relative" #form="ngForm">
......
frontend/angular/src/app/components/my-career-web/auth/login/login.component.scss
...@@ -103,6 +103,7 @@ ...@@ -103,6 +103,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 10px; bottom: 10px;
left: 0;
color: #808285; color: #808285;
font-family: $bodyFont; font-family: $bodyFont;
font-size: 11px; font-size: 11px;
......
frontend/angular/src/app/components/my-career-web/auth/register/register.component.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="mc-signup-logo d-flex justify-content-center"> <div class="mc-signup-logo d-flex justify-content-center">
<img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt=""> <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
</div> </div>
<div class="title-goes-here">Title goes here</div> <div class="title-goes-here">Title goes here.</div>
<div class="subtitle-giving-cont">Subtitle giving context to product and selling users on why they should sign up goes here.</div> <div class="subtitle-giving-cont">Subtitle giving context to product and selling users on why they should sign up goes here.</div>
<form class="signup-form position-relative" #form="ngForm"> <form class="signup-form position-relative" #form="ngForm">
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<div class="form-group" *ngIf="registerForm.was_referred"> <div class="form-group" *ngIf="registerForm.was_referred">
<label>Please enter that member’s referral code</label> <label>Please enter that member’s referral code</label>
<app-form-control> <app-form-control>
<input type="text" name="referral" [required]="registerForm.was_referred" class="form-control" [(ngModel)]="registerForm.ReferralCode"> <input type="text" placeholder="Refer code" name="referral" [required]="registerForm.was_referred" class="form-control" [(ngModel)]="registerForm.ReferralCode">
</app-form-control> </app-form-control>
</div> </div>
......
frontend/angular/src/app/components/my-career-web/auth/register/register.component.scss
...@@ -140,6 +140,7 @@ ...@@ -140,6 +140,7 @@
font-size: 11px; font-size: 11px;
letter-spacing: 0; letter-spacing: 0;
line-height: 13px; line-height: 13px;
left: 0;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
......
frontend/angular/src/app/components/my-career-web/auth/reset-password/reset-password.component.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="mc-login-logo d-flex justify-content-center"> <div class="mc-login-logo d-flex justify-content-center">
<img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt=""> <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
</div> </div>
<div class="title-goes-here">Title goes here</div> <div class="title-goes-here">Title goes here.</div>
<div class="subtitle-giving-cont">Subtitle giving context to product and selling users on why they should sign up goes here.</div> <div class="subtitle-giving-cont">Subtitle giving context to product and selling users on why they should sign up goes here.</div>
<form class="login-form position-relative" #form="ngForm"> <form class="login-form position-relative" #form="ngForm">
......
frontend/angular/src/app/components/my-career-web/auth/reset-password/reset-password.component.scss
...@@ -132,6 +132,7 @@ ...@@ -132,6 +132,7 @@
font-size: 11px; font-size: 11px;
letter-spacing: 0; letter-spacing: 0;
line-height: 13px; line-height: 13px;
left: 0;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
......
frontend/angular/src/app/components/my-career-web/dashboard/dashboard/dashboard.component.scss
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
} }
&-content-sidebar { &-content {
flex: 1;
} }
&-right-sidebar { &-right-sidebar {
......
frontend/angular/src/app/components/my-career-web/dashboard/home/home.component.html
<p> <div class="home-wrapper">
home works! <div class="home-header">
</p> <div class="home-header-heading">Hey Mark, Welcome to Matchd Career.</div>
<div class="home-header-card">
<div class="home-header-card-content">
We need some information from you so you can fill out your career profile and get job hunting.
</div>
<div class="home-header-card-action">I'm ready to get started</div>
</div>
</div>
<div class="home-body">
<div class="home-body-heading">
Get to know yourself
</div>
<div class="home-body-extra-features" style="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>
<div class="feature-action">View my summary report</div>
</div>
<div class="extra-feature-image" style="position: relative;">
<img src="assets/my-career-web/svgs/summary-report.svg" style="position: absolute; top: -54px; right: -26px;">
</div>
</div>
<div class="home-body-heading">
Don’t miss out on these extra features
</div>
<div class="home-body-extra-features">
<div class="extra-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="extra-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="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>
<div class="feature-action">Get this feature</div>
</div>
</div>
</div>
</div>
frontend/angular/src/app/components/my-career-web/dashboard/home/home.component.scss
@import "~styles/my-career-styles/variables";
.home-wrapper {
.home-header {
height: 120px;
background: #58595B;
padding: 30px 92px;
position: relative;
&-heading {
color: #FFFFFF;
font-family: $headingFont;
font-size: 24px;
font-weight: bold;
letter-spacing: 0;
line-height: 32px;
}
&-card {
height: 100px;
border-radius: 4px;
background-color: #FFFFFF;
box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
padding: 23px 26px;
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
&-content {
color: #58595B;
font-family: $bodyFont;
font-size: 18px;
letter-spacing: 0;
line-height: 27px;
width: 500px;
}
&-action {
border-radius: 73px;
background-color: #12A8DE;
color: #FFFFFF;
font-family: $bodyFont;
font-size: 14px;
text-align: center;
padding: 15px;
margin-left: 30px;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
}
}
}
.home-body {
padding: 100px 92px 0;
&-heading {
color: #58595B;
font-family: $headingFont;
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
line-height: 27px;
margin-bottom: 24px;
}
&-extra-features {
padding: 24px 26px;
background: #fff;
display: flex;
box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
border-radius: 4px;
margin-bottom: 32px;
.extra-feature {
flex: 1;
&-image {
flex: 2;
}
&:not(:last-child) {
margin-right: 28px;
}
.feature {
&-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/welcome/welcome.component.scss
...@@ -83,6 +83,7 @@ ...@@ -83,6 +83,7 @@
font-size: 11px; font-size: 11px;
letter-spacing: 0; letter-spacing: 0;
line-height: 13px; line-height: 13px;
left: 0;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
......
frontend/angular/src/assets/my-career-web/svgs/summary-report.svg 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
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