Skip to content

P
PERFORMA_REPLICA
Commit 7c5a3db1 by Muhammad Usman
Options

toaster fixes

parent dd9034c8
Showing with 323 additions and 6 deletions
frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.html
<p>
diversity-profile works!
</p>
<div class="assessment-wrapper row">
<div class="col-12" style="padding: 0;">
<div class="assessment-header">
<div class="header-logo" *ngIf="!isMobileView">
<img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
</div>
<div class="header-actions">
<span class="auto-saved">Auto saved 1 min ago</span>
<button pButton label="Save & exit" class="ui-button-info"></button>
</div>
</div>
<p-progressBar [value]="20"></p-progressBar>
<div class="assessment-body container">
<div class="assessment-body-header">
<div class="assessment-heading">Diversity</div>
<span class="assessment-estimation"> <i class="fa fa-clock-o"></i> <strong>Estimated time to complete</strong>: 5 mins</span>
</div>
<div class="assessment-body-description">
We'll ask you if you have certain skills, qualifications, knowledge, or experience that are somehow important to do this job.
</div>
<div class="assessment-body-question-wrapper mc-card">
<div class="question-wrapper">
<div class="question-title">How important to you is the following in your work life?</div>
<div class="answer-options">
<div class="answer-option">
<p-radioButton label="I am a very practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am a somewhat practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am not generally idealistic"></p-radioButton>
</div>
</div>
</div>
<div class="question-wrapper">
<div class="question-title">How important to you is the following in your work life?</div>
<div class="answer-options">
<div class="answer-option">
<p-radioButton label="I am a very practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am a somewhat practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am not generally idealistic"></p-radioButton>
</div>
</div>
</div>
<div class="question-wrapper">
<div class="question-title">How important to you is the following in your work life?</div>
<div class="answer-options">
<div class="answer-option">
<p-radioButton label="I am a very practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am a somewhat practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am not generally idealistic"></p-radioButton>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.scss
@import "~styles/my-career-styles/variables";
.assessment-wrapper {
background: #FAFCFD;
min-height: 100vh;
.assessment {
&-header {
height: 76px;
background: $darkColor;
display: flex;
justify-content: space-between;
align-items: center;
.header-logo {
width: 260px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
height: 100%;
img {
width: 164px;
height: 32px;
}
}
.header-actions {
padding: 0 24px;
font-weight: 600;
.auto-saved {
color: #FFFFFF;
font-family: $bodyFont;
font-size: 14px;
}
button {
margin-left: 24px;
}
}
}
&-body {
margin-top: 32px;
&-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.assessment-heading {
color: $darkColor;
font-family: $headingFont;
font-size: 24px;
font-weight: bold;
}
.assessment-estimation {
color: $darkColor;
font-family: $bodyFont;
font-size: 14px;
.fa {
font-size: 16px;
color: $primaryColor;
margin-right: 8px;
}
}
}
&-description {
color: $darkColor;
font-family: $bodyFont;
font-size: 18px;
}
&-question-wrapper {
margin-top: 32px;
position: relative;
.question-wrapper {
margin-bottom: 32px;
}
.question-title {
color: $darkColor;
font-family: $bodyFont;
font-size: 18px;
margin-bottom: 16px;
font-weight: 600;
}
.answer-options {
.answer-option {
margin-bottom: 10px;
p-radioButton {
color: $darkColor;
font-family: $bodyFont;
cursor: pointer;
::ng-deep {
label {
margin-left: 12px;
font-size: 16px;
cursor: pointer;
}
}
}
}
}
}
}
}
}
@media only screen and (max-width: 600px) {
.header-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
width: 100%;
}
.assessment-body {
margin-top: 16px !important;
&-header {
padding: 0 4px;
margin-bottom: 16px !important;
.assessment-estimation {
margin-left: 32px;
text-align: center;
position: relative;
.fa {
position: absolute;
left: -16px;
}
}
}
&-description {
text-align: center;
}
&-question-wrapper {
margin-top: 24px !important;
.question-title {
margin-bottom: 16px !important;
width: 80% !important;
}
.question-completed {
position: absolute;
right: 0 !important;
top: -18px !important;
font-weight: bold;
}
.question-tag {
margin-bottom: 24px !important;
}
.answer-wrapper {
position: relative;
.extreme-label-right, .extreme-label-left {
font-size: 12px !important;
font-family: $bodyFont;
position: absolute;
bottom: -24px;
}
.extreme-label-right {
right: 0;
}
.extreme-label-left {
left: 0;
}
.answer-options {
justify-content: space-between;
width: 100%;
.option-value {
width: unset;
height: unset;
border: none !important;
margin: 0 !important;
}
}
}
}
}
}
frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.ts
import { Component, OnInit } from '@angular/core';
import { BaseComponent } from '../../base/base.component';
@Component({
selector: 'app-diversity-profile',
templateUrl: './diversity-profile.component.html',
styleUrls: ['./diversity-profile.component.scss']
})
export class DiversityProfileComponent implements OnInit {
export class DiversityProfileComponent extends BaseComponent implements OnInit {
constructor() { }
constructor() {
super();
}
ngOnInit() {
}
......
frontend/angular/src/app/components/my-career-web/dashboard/left-sidebar/left-sidebar.component.scss
......@@ -83,7 +83,7 @@
color: #808285;
font-family: $bodyFont;
font-size: 11px;
bottom: 20px;
bottom: 10px;
}
.go-premium-wrapper {
......
frontend/angular/src/styles/my-career-styles/primeng/_toast.scss
......@@ -88,3 +88,22 @@
}
}
}
@media only screen and (max-width: 600px) {
.ui-toast {
width: 90%;
top: 10px;
left: 5%;
&-message {
width: 100%;
padding: 10px 8px !important;
}
&-close-icon {
right: 6px !important;
}
}
}
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