Skip to content

P
PERFORMA_REPLICA
Commit bc4e0f32 by chenith
Options

Updated HT004 with new design. 

Styles updated by score based colors.
Score - Determine logic for when to color a category summary as green, amber, or red
Score - Determine logic for when to color overall Role Fit as green, amber, or red
parent cd9e0ec7
Showing with 139 additions and 50 deletions
cmsWebApp/webroot/css/common.css
......@@ -2952,6 +2952,8 @@ span.appli-percen {
position: relative;
top: -2px;
font-family: "Usual-Bold";
width: 80px;
text-align: right;
}
.expand-box {
display: inline-block;
......@@ -3228,25 +3230,25 @@ input.add-note-btn:hover{
padding: 0 !important;
}
.red-b {
background: #f9623d none repeat scroll 0 0;
background: #f9623d none repeat scroll 0 0 !important;
float: left;
position: relative;
z-index: 10;
height: 10px;
/*height: 10px;*/
}
.yellow-b{
background-color: #ffd14c;
background-color: #ffd14c !important;
float: left;
position: relative;
z-index: 10;
height: 10px;
/*height: 10px;*/
}
.green-b{
background-color: #03ac66;
background-color: #03ac66 !important;
float: left;
position: relative;
z-index: 10;
height: 10px;
/*height: 10px;*/
}
.triangle-arrow {
background: rgba(0, 0, 0, 0) url("../images/triangle.png") no-repeat scroll center center;
......@@ -4194,7 +4196,7 @@ img.alert-icon {float: left;}
@media screen and (max-width: 1540px){
.search-bar {width: 54.25%;}
.fl-right {width: 29.3%;}
.main-applicant-content {width: 80.3%;}
/*.main-applicant-content {width: 80.3%;}*/
.applicant-sidebar li a{font-size: 13px;padding: 0 8px;}
.applicant-sidebar .gray,.applicant-sidebar .green,.applicant-sidebar .blue {font-size: 14px;}
.applicant-sidebar li {line-height: 46px;}
......@@ -4273,6 +4275,9 @@ img.alert-icon {float: left;}
.message-common {padding: 20px 28px 20px 25px;}
.message-txt{margin-left: 18px;}
.main-applicant-content {width: 100%;}
.thr-block {padding: 0 10px 10px;}
.admin-notes{padding: 16px 21px 28px;}
}
@media screen and (max-width: 1350px){
......@@ -4290,6 +4295,9 @@ img.alert-icon {float: left;}
.cb-title{font-size: 15px;padding: 12.5px 13px;}
.main-job-match-area {padding: 40px 10.4% 44px;}
.main-applicant-content {width: 100%;}
.text-dot-dot{width: 75%;}
.admin-br-line{margin: 18px 0 17px;}
}
@media screen and (max-width: 1280px){
......@@ -4771,6 +4779,8 @@ img.alert-icon {float: left;}
.box-btn{font-size: 13px;width: 100%;padding: 0;}
.pl-verify{font-size: 12px;}
.verify-i-setpone label{font-size: 12px;margin-bottom: 8px;}
.main-sign-up {width: 90%;}
}
@media screen and (max-width: 600px){
......@@ -4868,6 +4878,10 @@ img.alert-icon {float: left;}
.ratting-box span.right-s-label{width: 105px;}
.main-company-profile {margin: 30px auto 0;}
.btn-b-225{height: 45px;line-height: 45px;}
.box-bg-color{padding: 30px;}
.col-2 {margin-left: 0;margin-right: 0;width: 100%;}
.col-row {margin-left: 0;margin-right: 0;}
.u-img-tag{width: 100%;height: auto;}
}
@media screen and (max-width: 360px){
......
cmsWebApp/webroot/extensions/adminportal/inc/view_application_tab_applicant.jsp
......@@ -41,8 +41,9 @@
});
</script>
<div class="main-applicant-content">
<div class="main-applicant-content dashboard-content-area second-part v-applicant-area">
<div class="applicant-header">
<a href="#" class="prev-btn"><img src="images/arrow-left-prev.svg" /></a>
<div class="main-appli-name">
<div class="appli-name"><oneit:toString value="<%= candidate.getToString() %>" mode="EscapeHTML"/></div>
<div class="appli-applied">
......@@ -67,50 +68,91 @@
.mapEntry ("restartProcess", Boolean.TRUE).toMap() %>" />
</span>
</div>
<a href="#" class="next-btn"><img src="images/arrow-right-next.svg" /></a>
</div>
<div class="main-applicant-content">
<div class="applicant-sub-part">
<div class="applicant-left">
<%
Tuple.T2<Double, ColorCode> roleFitData = (jobApplication.getRoleFit()!=null && jobApplication.getRoleFit().get(null)!=null) ? (Tuple.T2<Double, ColorCode>) jobApplication.getRoleFit().get(null) : null;
String colorClass = "percent-" +(roleFitData!=null ? roleFitData.get1().getCSSClass() : "green");
%>
<div class="applicant-progress">
<div class="<%= job.getIncludeAssessmentCriteria()==Boolean.TRUE ? "col-sm-4" : "col-sm-6" %> col-xs-12 text-center" href="#1a" data-toggle="tab" id="progress1" onClick="tabToggle('#tab1')">
<div class="<%= job.getIncludeAssessmentCriteria()==Boolean.TRUE ? "col-sm-4" : "col-sm-6" %> col-xs-12 text-center thr-block role-fit" href="#1a" data-toggle="tab" id="progress1" onClick="tabToggle('#tab1')">
<label class="progress-label">role fit</label>
<div class="percent-role fixed-width">
<p style="display:none;"><oneit:toString value="<%= jobApplication.getRoleFitScore() %>" mode="TwoDPDouble" nullValue="0"/></p>
<div class="<%= colorClass %> fixed-width">
<p style="display:none;"><oneit:toString value="<%= roleFitData.get0() %>" mode="TwoDPDouble" nullValue="0"/></p>
</div>
<div class="row four-label">
<div class="col-md-6 col-sm-6 col-xs-6 text-left">
<div class="a-label-row">
<span class="yellow-dot"></span><span class="r-y-label text-dot-dot">Achievement</span>
</div>
<div class="a-label-row">
<span class="red-dot"></span><span class="r-y-label text-dot-dot">Item with a long ti</span>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 text-left">
<div class="a-label-row">
<span class="yellow-dot"></span><span class="r-y-label text-dot-dot">Remuneration</span>
</div>
<div class="a-label-row">
<span class="red-dot"></span><span class="r-y-label text-dot-dot">Item title</span>
</div>
</div>
</div>
</div>
<div class="<%= job.getIncludeAssessmentCriteria()==Boolean.TRUE ? "col-sm-4" : "col-sm-4" %> col-xs-12 text-center" href="#2a" data-toggle="tab" id="progress2" onClick="tabToggle('#tab2')">
<div class="<%= job.getIncludeAssessmentCriteria()==Boolean.TRUE ? "col-sm-4" : "col-sm-4" %> col-xs-12 text-center thr-block culture-fit" href="#2a" data-toggle="tab" id="progress2" onClick="tabToggle('#tab2')">
<label class="progress-label">culture fit</label>
<div class="percent-culture fixed-width">
<p style="display:none;"><oneit:toString value="<%= jobApplication.getCultureFitScore() %>" mode="PercentageWholeNumber" /></p>
<div class="percent-green fixed-width">
<p style="display:none;"><oneit:toString value="<%= jobApplication.getCultureFitScore() %>" mode="TwoDPDouble" /></p>
</div>
<div class="row four-label">
<div class="col-md-6 col-sm-6 col-xs-6 text-left">
<div class="a-label-row">
<span class="yellow-dot"></span><span class="r-y-label text-dot-dot">Achievement</span>
</div>
<div class="a-label-row">
<span class="red-dot"></span><span class="r-y-label text-dot-dot">Item title</span>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 text-left">
<div class="a-label-row">
<span class="yellow-dot"></span><span class="r-y-label text-dot-dot">Remuneration</span>
</div>
</div>
</div>
</div>
<%
if(job.getIncludeAssessmentCriteria()==Boolean.TRUE)
{
%>
<div class="col-sm-4 col-xs-12 text-center" href="#3a" data-toggle="tab" id="progress3" onClick="tabToggle('#tab3')">
<div class="col-sm-4 col-xs-12 text-center thr-block requirement-fit" href="#3a" data-toggle="tab" id="progress3" onClick="tabToggle('#tab3')">
<label class="progress-label">requirements</label>
<div class="percent-req fixed-width">
<p style="display:none;"><oneit:toString value="<%= jobApplication.getRequirementFitScore() %>" mode="PercentageWholeNumber" /></p>
<div class="percent-blue fixed-width">
<p style="display:none;"><oneit:toString value="<%= jobApplication.getRequirementFitScore() %>" mode="TwoDPDouble" /></p>
</div>
<div class="row four-label">
<div class="col-md-6 col-sm-6 col-xs-6 text-left">
<div class="a-label-row">
<span class="yellow-dot"></span><span class="r-y-label text-dot-dot">Item title</span>
</div>
<div class="a-label-row">&nbsp;</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 text-left">
<div class="a-label-row">
<span class="red-dot"></span><span class="r-y-label text-dot-dot">Item title</span>
</div>
<div class="a-label-row">&nbsp;</div>
</div>
</div>
</div>
<%
}
%>
</div>
<div class="applicant-tab">
<ul class="nav nav-pills nav-justified test-tabs">
<li id="tab1" class="active"><a href="#1a" data-toggle="tab">role fit</a></li>
<li id="tab2"><a href="#2a" data-toggle="tab">culture fit</a></li>
<%
if(job.getIncludeAssessmentCriteria()==Boolean.TRUE)
{
%>
<li id="tab3"><a href="#3a" data-toggle="tab">requirements</a></li>
<%
}
%>
<li id="tab4" style="display: none"><a href="#4a" data-toggle="tab">areas of concern</a></li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<%
......@@ -119,17 +161,25 @@
if(roleScoreMap.get(factorClass) != null && roleScoreMap.get(factorClass).get0() > 0d)
{
Map<FactorLevelLink, Map> factorDetails = AnalysisEngine.getFactorScoreDetails(candidate, job.getLevel(), factorClass);
Double rating = roleScoreMap.get(factorClass).get0();
ColorCode colorCode = roleScoreMap.get(factorClass).get1();
String cssClass = colorCode.getCSSClass();
%>
<div class="main-pro-bar">
<div class="pro-bar">
<span class="appli-label"><oneit:toString value="<%= factorClass %>" mode="EscapeHTML"/></span>
<span class="appli-percen"><oneit:toString value="<%= roleScoreMap.get(factorClass).get0() %>" mode="TwoDPDouble"/></span>
<span class="appli-percen gray"><oneit:toString value="<%= rating %>" mode="TwoDPDouble"/></span>
<span class="appli-progress-bar">
<div class="progress">
<div class="progress-bar <%= cssClass %>" role="progressbar" aria-valuenow="<%= rating %>" aria-valuemin="0" aria-valuemax="100" style="width:<%= rating %>%"></div>
</div>
</span>
<span class="expand-box">
<span class="hasarrow"><img src="images/select-down-arrow.svg"></span>
</span>
</div>
<div class="expand-hide-tag">
<div class="expand-hide-tag" style="display: block;">
<%
for(FactorLevelLink factorLevelLink : factorDetails.keySet())
{
......@@ -154,7 +204,7 @@
for(FactorScoreResult factorScoreResult : factorScoreDetails.keySet())
{
%>
<li class="<%= factorScoreResult.getColorCode() != null ? factorScoreResult.getColorCode().getCSSClass() : "" %>" style="width: <%= factorScoreDetails.get(factorScoreResult) %>%;"></li>
<li class="<%= factorScoreResult.getColorCode() != null ? factorScoreResult.getColorCode().getCSSClass() : "" %>" style="width: <%= factorScoreDetails.get(factorScoreResult) %>%; height: 10px"></li>
<%
}
%>
......@@ -191,7 +241,7 @@
<div class="main-pro-bar">
<div class="pro-bar">
<span class="appli-label"><oneit:toString value="<%= cClass %>" mode="EscapeHTML"/></span>
<span class="appli-percen"><oneit:toString value="<%= rating %>" mode="PercentageWholeNumber" /></span>
<span class="appli-percen"><oneit:toString value="<%= rating %>" mode="TwoDPDouble" /></span>
<span class="appli-progress-bar">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="<%= rating %>" aria-valuemin="0" aria-valuemax="100" style="width:<%= rating %>%"></div>
......@@ -268,7 +318,7 @@
<div class="main-pro-bar">
<div class="pro-bar">
<span class="appli-label"><oneit:toString value="<%= importance %>" mode="EscapeHTML"/></span>
<span class="appli-percen"><oneit:toString value="<%= rating %>" mode="PercentageWholeNumber" /></span>
<span class="appli-percen"><oneit:toString value="<%= rating %>" mode="TwoDPDouble" /></span>
<span class="appli-progress-bar">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="<%= rating %>" aria-valuemin="0" aria-valuemax="100" style="width:<%= rating %>%"></div>
......@@ -384,6 +434,7 @@
</div>
</div>
</div>
</div>
</div>
</oneit:dynIncluded>
\ No newline at end of file
cmsWebApp/webroot/extensions/adminportal/view_application.jsp
......@@ -27,36 +27,53 @@
<script type="text/javascript">
$(document).ready(function()
{
$('.percent-role').percentageLoader({
$('.percent-red-b').percentageLoader({
valElement: 'p',
strokeWidth: 20,
strokeWidth: 15,
bgColor: '#e5e8eb',
ringColor: '#67b413',
textColor: '#67b413',
ringColor: '#f9623d',
textColor: '#4a4a4a',
fontSize: '30px',
fontWeight: 'normal',
showPercent: false
fontWeight: 'normal'
});
$('.percent-culture').percentageLoader({
$('.percent-yellow-b').percentageLoader({
valElement: 'p',
strokeWidth: 15,
bgColor: '#e5e8eb',
ringColor: '#ffd14c',
textColor: '#4a4a4a',
fontSize: '30px',
fontWeight: 'normal'
});
$('.percent-green-b').percentageLoader({
valElement: 'p',
strokeWidth: 20,
strokeWidth: 15,
bgColor: '#e5e8eb',
ringColor: '#67b413',
textColor: '#67b413',
ringColor: '#03ac66',
textColor: '#4a4a4a',
fontSize: '30px',
fontWeight: 'normal'
});
$('.percent-req').percentageLoader({
$('.percent-green').percentageLoader({
valElement: 'p',
strokeWidth: 20,
strokeWidth: 15,
bgColor: '#e5e8eb',
ringColor: '#03a0e7',
textColor: '#03a0e7',
ringColor: '#41bdb4',
textColor: '#4a4a4a',
fontSize: '30px',
fontWeight: 'normal'
});
$('.percent-blue').percentageLoader({
valElement: 'p',
strokeWidth: 15,
bgColor: '#e5e8eb',
ringColor: '#fbd44e',
textColor: '#4a4a4a',
fontSize: '30px',
fontWeight: 'normal'
});
});
</script>
......
cmsWebApp/webroot/images/arrow-left-prev.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13">
<path fill="#BBBFC5" fill-rule="evenodd" d="M7.018 12.368a.914.914 0 0 0 0-1.294L2.444 6.5l4.574-4.574A.914.914 0 1 0 5.724.632L.547 5.81a.903.903 0 0 0-.26.691.903.903 0 0 0 .26.69l5.177 5.178a.914.914 0 0 0 1.294 0"/>
</svg>
cmsWebApp/webroot/images/arrow-right-next.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13">
<path fill="#BBBFC5" fill-rule="evenodd" d="M.826.632a.914.914 0 0 0 0 1.294L5.4 6.5.826 11.074a.914.914 0 1 0 1.294 1.294L7.297 7.19a.903.903 0 0 0 .26-.691.903.903 0 0 0-.26-.69L2.12.631a.914.914 0 0 0-1.294 0"/>
</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