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 375 additions and 287 deletions
cmsWebApp/webroot/css/common.css
...@@ -2952,6 +2952,8 @@ span.appli-percen { ...@@ -2952,6 +2952,8 @@ span.appli-percen {
position: relative; position: relative;
top: -2px; top: -2px;
font-family: "Usual-Bold"; font-family: "Usual-Bold";
width: 80px;
text-align: right;
} }
.expand-box { .expand-box {
display: inline-block; display: inline-block;
...@@ -3228,25 +3230,25 @@ input.add-note-btn:hover{ ...@@ -3228,25 +3230,25 @@ input.add-note-btn:hover{
padding: 0 !important; padding: 0 !important;
} }
.red-b { .red-b {
background: #f9623d none repeat scroll 0 0; background: #f9623d none repeat scroll 0 0 !important;
float: left; float: left;
position: relative; position: relative;
z-index: 10; z-index: 10;
height: 10px; /*height: 10px;*/
} }
.yellow-b{ .yellow-b{
background-color: #ffd14c; background-color: #ffd14c !important;
float: left; float: left;
position: relative; position: relative;
z-index: 10; z-index: 10;
height: 10px; /*height: 10px;*/
} }
.green-b{ .green-b{
background-color: #03ac66; background-color: #03ac66 !important;
float: left; float: left;
position: relative; position: relative;
z-index: 10; z-index: 10;
height: 10px; /*height: 10px;*/
} }
.triangle-arrow { .triangle-arrow {
background: rgba(0, 0, 0, 0) url("../images/triangle.png") no-repeat scroll center center; background: rgba(0, 0, 0, 0) url("../images/triangle.png") no-repeat scroll center center;
...@@ -4194,7 +4196,7 @@ img.alert-icon {float: left;} ...@@ -4194,7 +4196,7 @@ img.alert-icon {float: left;}
@media screen and (max-width: 1540px){ @media screen and (max-width: 1540px){
.search-bar {width: 54.25%;} .search-bar {width: 54.25%;}
.fl-right {width: 29.3%;} .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 li a{font-size: 13px;padding: 0 8px;}
.applicant-sidebar .gray,.applicant-sidebar .green,.applicant-sidebar .blue {font-size: 14px;} .applicant-sidebar .gray,.applicant-sidebar .green,.applicant-sidebar .blue {font-size: 14px;}
.applicant-sidebar li {line-height: 46px;} .applicant-sidebar li {line-height: 46px;}
...@@ -4273,6 +4275,9 @@ img.alert-icon {float: left;} ...@@ -4273,6 +4275,9 @@ img.alert-icon {float: left;}
.message-common {padding: 20px 28px 20px 25px;} .message-common {padding: 20px 28px 20px 25px;}
.message-txt{margin-left: 18px;} .message-txt{margin-left: 18px;}
.main-applicant-content {width: 100%;} .main-applicant-content {width: 100%;}
.thr-block {padding: 0 10px 10px;}
.admin-notes{padding: 16px 21px 28px;}
} }
@media screen and (max-width: 1350px){ @media screen and (max-width: 1350px){
...@@ -4290,6 +4295,9 @@ img.alert-icon {float: left;} ...@@ -4290,6 +4295,9 @@ img.alert-icon {float: left;}
.cb-title{font-size: 15px;padding: 12.5px 13px;} .cb-title{font-size: 15px;padding: 12.5px 13px;}
.main-job-match-area {padding: 40px 10.4% 44px;} .main-job-match-area {padding: 40px 10.4% 44px;}
.main-applicant-content {width: 100%;} .main-applicant-content {width: 100%;}
.text-dot-dot{width: 75%;}
.admin-br-line{margin: 18px 0 17px;}
} }
@media screen and (max-width: 1280px){ @media screen and (max-width: 1280px){
...@@ -4771,6 +4779,8 @@ img.alert-icon {float: left;} ...@@ -4771,6 +4779,8 @@ img.alert-icon {float: left;}
.box-btn{font-size: 13px;width: 100%;padding: 0;} .box-btn{font-size: 13px;width: 100%;padding: 0;}
.pl-verify{font-size: 12px;} .pl-verify{font-size: 12px;}
.verify-i-setpone label{font-size: 12px;margin-bottom: 8px;} .verify-i-setpone label{font-size: 12px;margin-bottom: 8px;}
.main-sign-up {width: 90%;}
} }
@media screen and (max-width: 600px){ @media screen and (max-width: 600px){
...@@ -4868,6 +4878,10 @@ img.alert-icon {float: left;} ...@@ -4868,6 +4878,10 @@ img.alert-icon {float: left;}
.ratting-box span.right-s-label{width: 105px;} .ratting-box span.right-s-label{width: 105px;}
.main-company-profile {margin: 30px auto 0;} .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;} .u-img-tag{width: 100%;height: auto;}
} }
@media screen and (max-width: 360px){ @media screen and (max-width: 360px){
......
cmsWebApp/webroot/extensions/adminportal/inc/view_application_tab_applicant.jsp
...@@ -41,8 +41,9 @@ ...@@ -41,8 +41,9 @@
}); });
</script> </script>
<div class="main-applicant-content"> <div class="main-applicant-content dashboard-content-area second-part v-applicant-area">
<div class="applicant-header"> <div class="applicant-header">
<a href="#" class="prev-btn"><img src="images/arrow-left-prev.svg" /></a>
<div class="main-appli-name"> <div class="main-appli-name">
<div class="appli-name"><oneit:toString value="<%= candidate.getToString() %>" mode="EscapeHTML"/></div> <div class="appli-name"><oneit:toString value="<%= candidate.getToString() %>" mode="EscapeHTML"/></div>
<div class="appli-applied"> <div class="appli-applied">
...@@ -67,321 +68,371 @@ ...@@ -67,321 +68,371 @@
.mapEntry ("restartProcess", Boolean.TRUE).toMap() %>" /> .mapEntry ("restartProcess", Boolean.TRUE).toMap() %>" />
</span> </span>
</div> </div>
<a href="#" class="next-btn"><img src="images/arrow-right-next.svg" /></a>
</div> </div>
<div class="applicant-sub-part"> <div class="main-applicant-content">
<div class="applicant-left"> <div class="applicant-sub-part">
<div class="applicant-progress"> <div class="applicant-left">
<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')">
<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>
</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')">
<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>
</div>
<% <%
if(job.getIncludeAssessmentCriteria()==Boolean.TRUE) 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="col-sm-4 col-xs-12 text-center" href="#3a" data-toggle="tab" id="progress3" onClick="tabToggle('#tab3')"> <div class="applicant-progress">
<label class="progress-label">requirements</label> <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')">
<div class="percent-req fixed-width"> <label class="progress-label">role fit</label>
<p style="display:none;"><oneit:toString value="<%= jobApplication.getRequirementFitScore() %>" mode="PercentageWholeNumber" /></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>
<% </div>
} <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> <div class="percent-green fixed-width">
<div class="applicant-tab"> <p style="display:none;"><oneit:toString value="<%= jobApplication.getCultureFitScore() %>" mode="TwoDPDouble" /></p>
<ul class="nav nav-pills nav-justified test-tabs"> </div>
<li id="tab1" class="active"><a href="#1a" data-toggle="tab">role fit</a></li> <div class="row four-label">
<li id="tab2"><a href="#2a" data-toggle="tab">culture fit</a></li> <div class="col-md-6 col-sm-6 col-xs-6 text-left">
<% <div class="a-label-row">
if(job.getIncludeAssessmentCriteria()==Boolean.TRUE) <span class="yellow-dot"></span><span class="r-y-label text-dot-dot">Achievement</span>
{ </div>
%> <div class="a-label-row">
<li id="tab3"><a href="#3a" data-toggle="tab">requirements</a></li> <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">
<li id="tab4" style="display: none"><a href="#4a" data-toggle="tab">areas of concern</a></li> <div class="a-label-row">
</ul> <span class="yellow-dot"></span><span class="r-y-label text-dot-dot">Remuneration</span>
<div class="tab-content clearfix"> </div>
<div class="tab-pane active" id="1a"> </div>
</div>
</div>
<% <%
for(FactorClass factorClass : jobApplication.getSortedFactorClasses()) if(job.getIncludeAssessmentCriteria()==Boolean.TRUE)
{ {
if(roleScoreMap.get(factorClass) != null && roleScoreMap.get(factorClass).get0() > 0d)
{
Map<FactorLevelLink, Map> factorDetails = AnalysisEngine.getFactorScoreDetails(candidate, job.getLevel(), factorClass);
%> %>
<div class="main-pro-bar"> <div class="col-sm-4 col-xs-12 text-center thr-block requirement-fit" href="#3a" data-toggle="tab" id="progress3" onClick="tabToggle('#tab3')">
<div class="pro-bar"> <label class="progress-label">requirements</label>
<span class="appli-label"><oneit:toString value="<%= factorClass %>" mode="EscapeHTML"/></span> <div class="percent-blue fixed-width">
<span class="appli-percen"><oneit:toString value="<%= roleScoreMap.get(factorClass).get0() %>" mode="TwoDPDouble"/></span> <p style="display:none;"><oneit:toString value="<%= jobApplication.getRequirementFitScore() %>" mode="TwoDPDouble" /></p>
<span class="expand-box"> </div>
<span class="hasarrow"><img src="images/select-down-arrow.svg"></span> <div class="row four-label">
</span> <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="expand-hide-tag"> <%
<% }
for(FactorLevelLink factorLevelLink : factorDetails.keySet()) %>
{ </div>
Map factorLinkDetails = factorDetails.get(factorLevelLink); <div class="applicant-tab">
<div class="tab-content clearfix">
if(!factorLinkDetails.isEmpty()) <div class="tab-pane active" id="1a">
<%
for(FactorClass factorClass : jobApplication.getSortedFactorClasses())
{
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 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" style="display: block;">
<%
for(FactorLevelLink factorLevelLink : factorDetails.keySet())
{ {
FactorScore factorScore = (FactorScore) factorLinkDetails.get("factorScore"); Map factorLinkDetails = factorDetails.get(factorLevelLink);
%>
<div class="tab-row"> if(!factorLinkDetails.isEmpty())
<div class="tab-view-label"><oneit:toString value="<%= factorLevelLink.getFactor() %>" mode="EscapeHTML"/></div> {
<div class="tab-view-side"> FactorScore factorScore = (FactorScore) factorLinkDetails.get("factorScore");
<div class="result-want"> %>
<div class="result"><oneit:toString value="<%= factorLevelLink.getLeftAnnot() %>" mode="EscapeHTML"/></div> <div class="tab-row">
<div class="wants"><oneit:toString value="<%= factorLevelLink.getRightAnnot() %>" mode="EscapeHTML"/></div> <div class="tab-view-label"><oneit:toString value="<%= factorLevelLink.getFactor() %>" mode="EscapeHTML"/></div>
</div> <div class="tab-view-side">
<div class="result-bar"> <div class="result-want">
<ul> <div class="result"><oneit:toString value="<%= factorLevelLink.getLeftAnnot() %>" mode="EscapeHTML"/></div>
<% <div class="wants"><oneit:toString value="<%= factorLevelLink.getRightAnnot() %>" mode="EscapeHTML"/></div>
Map<FactorScoreResult, Double> factorScoreDetails = (Map<FactorScoreResult, Double>)factorLinkDetails.get("factorScoreDetails"); </div>
<div class="result-bar">
<ul>
<%
Map<FactorScoreResult, Double> factorScoreDetails = (Map<FactorScoreResult, Double>)factorLinkDetails.get("factorScoreDetails");
for(FactorScoreResult factorScoreResult : factorScoreDetails.keySet()) 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>
<% <%
} }
%> %>
</ul> </ul>
<span class="triangle-arrow" style="left: <%= factorLinkDetails.get("scoreLeftMargin")%>%;"></span> <span class="triangle-arrow" style="left: <%= factorLinkDetails.get("scoreLeftMargin")%>%;"></span>
</div>
<div class="like-strive"><oneit:toString value="<%= factorScore != null ? factorScore.getNarrative() : null %>" mode="EscapeHTML"/></div>
</div> </div>
<div class="like-strive"><oneit:toString value="<%= factorScore != null ? factorScore.getNarrative() : null %>" mode="EscapeHTML"/></div>
</div> </div>
</div> <%
<% }
} }
} %>
%> </div>
</div> </div>
</div>
<%
}
}
%>
</div>
<div class="tab-pane" id="2a">
<% <%
Map<CultureClass, Long> cultureFitData = (Map<CultureClass, Long>)jobApplication.getCultureFit(); }
}
%>
</div>
<div class="tab-pane" id="2a">
<%
Map<CultureClass, Long> cultureFitData = (Map<CultureClass, Long>)jobApplication.getCultureFit();
for(CultureClass cClass: cultureFitData.keySet()) for(CultureClass cClass: cultureFitData.keySet())
{
if(cClass==null)
{ {
continue; if(cClass==null)
} {
continue;
}
Long rating = cultureFitData.get(cClass); Long rating = cultureFitData.get(cClass);
%> %>
<div class="main-pro-bar"> <div class="main-pro-bar">
<div class="pro-bar"> <div class="pro-bar">
<span class="appli-label"><oneit:toString value="<%= cClass %>" mode="EscapeHTML"/></span> <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"> <span class="appli-progress-bar">
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="<%= rating %>" aria-valuemin="0" aria-valuemax="100" style="width:<%= rating %>%"></div> <div class="progress-bar" 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="tab-row">
<div class="tab-view-label">
Achievement
</div>
<div class="tab-view-side">
<div class="result-want">
<div class="result">Not results focused</div>
<div class="wants">Wants results</div>
</div> </div>
<div class="result-bar"> </span>
<ul> <span class="expand-box">
<li class="red-b" style="width: 26.5%;"></li> <span class="hasarrow"><img src="images/select-down-arrow.svg" /></span>
<li class="yellow-b" style="width: 26.5%;"></li> </span>
<li class="green-b" style="width: 47%;"></li>
</ul>
<span class="triangle-arrow" style="left: 48%;"></span>
</div>
<div class="like-strive">Likely to strive to achive results</div>
</div>
</div> </div>
<div class="tab-row"> <div class="expand-hide-tag">
<div class="tab-view-label"> <div class="tab-row">
Remuneration <div class="tab-view-label">
Achievement
</div>
<div class="tab-view-side">
<div class="result-want">
<div class="result">Not results focused</div>
<div class="wants">Wants results</div>
</div>
<div class="result-bar">
<ul>
<li class="red-b" style="width: 26.5%;"></li>
<li class="yellow-b" style="width: 26.5%;"></li>
<li class="green-b" style="width: 47%;"></li>
</ul>
<span class="triangle-arrow" style="left: 48%;"></span>
</div>
<div class="like-strive">Likely to strive to achive results</div>
</div>
</div> </div>
<div class="tab-view-side"> <div class="tab-row">
<div class="result-want"> <div class="tab-view-label">
<div class="result">Low concern</div> Remuneration
<div class="wants">High concern</div>
</div> </div>
<div class="result-bar"> <div class="tab-view-side">
<ul> <div class="result-want">
<li class="red-b" style="width: 23.2%;"></li> <div class="result">Low concern</div>
<li class="yellow-b" style="width: 57.6%;"></li> <div class="wants">High concern</div>
<li class="green-b" style="width: 19%;"></li> </div>
</ul> <div class="result-bar">
<span class="triangle-arrow" style="left: 72%;"></span> <ul>
<li class="red-b" style="width: 23.2%;"></li>
<li class="yellow-b" style="width: 57.6%;"></li>
<li class="green-b" style="width: 19%;"></li>
</ul>
<span class="triangle-arrow" style="left: 72%;"></span>
</div>
<div class="like-strive">Financial reward is less of a motivation than many other factors</div>
</div> </div>
<div class="like-strive">Financial reward is less of a motivation than many other factors</div>
</div> </div>
</div> </div>
</div> </div>
</div> <%
}
%>
</div>
<% <%
} if(job.getIncludeAssessmentCriteria()==Boolean.TRUE)
{
%> %>
</div> <div class="tab-pane" id="3a">
<% <%
if(job.getIncludeAssessmentCriteria()==Boolean.TRUE) Map<Importance, Long> requirementFitData = (Map<Importance, Long>)jobApplication.getRequirementFit();
{
%>
<div class="tab-pane" id="3a">
<%
Map<Importance, Long> requirementFitData = (Map<Importance, Long>)jobApplication.getRequirementFit();
for(Importance importance: requirementFitData.keySet()) for(Importance importance: requirementFitData.keySet())
{
if(importance==null)
{ {
continue; if(importance==null)
} {
continue;
}
Long rating = requirementFitData.get(importance); Long rating = requirementFitData.get(importance);
%> %>
<div class="main-pro-bar"> <div class="main-pro-bar">
<div class="pro-bar"> <div class="pro-bar">
<span class="appli-label"><oneit:toString value="<%= importance %>" mode="EscapeHTML"/></span> <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"> <span class="appli-progress-bar">
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="<%= rating %>" aria-valuemin="0" aria-valuemax="100" style="width:<%= rating %>%"></div> <div class="progress-bar" 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="tab-row">
<div class="tab-view-label">
Achievement
</div>
<div class="tab-view-side">
<div class="result-want">
<div class="result">Not results focused</div>
<div class="wants">Wants results</div>
</div>
<div class="result-bar">
<ul>
<li class="red-b" style="width: 26.5%;"></li>
<li class="yellow-b" style="width: 26.5%;"></li>
<li class="green-b" style="width: 47%;"></li>
</ul>
<span class="triangle-arrow" style="left: 48%;"></span>
</div> </div>
<div class="like-strive">Likely to strive to achive results</div> </span>
</div> <span class="expand-box">
<span class="hasarrow"><img src="images/select-down-arrow.svg" /></span>
</span>
</div> </div>
<div class="tab-row"> <div class="expand-hide-tag">
<div class="tab-view-label"> <div class="tab-row">
Remuneration <div class="tab-view-label">
Achievement
</div>
<div class="tab-view-side">
<div class="result-want">
<div class="result">Not results focused</div>
<div class="wants">Wants results</div>
</div>
<div class="result-bar">
<ul>
<li class="red-b" style="width: 26.5%;"></li>
<li class="yellow-b" style="width: 26.5%;"></li>
<li class="green-b" style="width: 47%;"></li>
</ul>
<span class="triangle-arrow" style="left: 48%;"></span>
</div>
<div class="like-strive">Likely to strive to achive results</div>
</div>
</div> </div>
<div class="tab-view-side"> <div class="tab-row">
<div class="result-want"> <div class="tab-view-label">
<div class="result">Low concern</div> Remuneration
<div class="wants">High concern</div>
</div> </div>
<div class="result-bar"> <div class="tab-view-side">
<ul> <div class="result-want">
<li class="red-b" style="width: 23.2%;"></li> <div class="result">Low concern</div>
<li class="yellow-b" style="width: 57.6%;"></li> <div class="wants">High concern</div>
<li class="green-b" style="width: 19%;"></li> </div>
</ul> <div class="result-bar">
<span class="triangle-arrow" style="left: 72%;"></span> <ul>
<li class="red-b" style="width: 23.2%;"></li>
<li class="yellow-b" style="width: 57.6%;"></li>
<li class="green-b" style="width: 19%;"></li>
</ul>
<span class="triangle-arrow" style="left: 72%;"></span>
</div>
<div class="like-strive">Financial reward is less of a motivation than many other factors</div>
</div> </div>
<div class="like-strive">Financial reward is less of a motivation than many other factors</div>
</div> </div>
</div> </div>
</div> </div>
</div> <%
<% }
} %>
%> </div>
</div> <%
<% }
} %>
%> <div class="tab-pane" id="4a">
<div class="tab-pane" id="4a"> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="applicant-right">
<div class="applicant-right">
<div class="app-right-b">
<div class="app-right-b"> <div class="overall-suit">overall rank</div>
<div class="overall-suit">overall rank</div> <div class="big-percentage">
<div class="big-percentage"> <oneit:toString value="<%= jobApplication.getOverallRank() %>" mode="Integer" />
<oneit:toString value="<%= jobApplication.getOverallRank() %>" mode="Integer" />
</div>
</div>
<div class="applicant-contact-info">
<div class="contact-title">Contact</div>
<div class="contact-row">
<div class="contact-label">E</div>
<div class="contact-value">
<a href="<%= "mailto:" + candidate.getUser().getUserName() %>">
<oneit:toString value="<%= candidate.getUser().getUserName() %>" mode="EscapeHTML" />
</a>
</div> </div>
</div> </div>
<div class="contact-row"> <div class="applicant-contact-info">
<div class="contact-label">P</div> <div class="contact-title">Contact</div>
<div class="contact-value"> <div class="contact-row">
<oneit:toString value="<%= candidate.getPhone() %>" mode="EscapeHTML" /> <div class="contact-label">E</div>
<div class="contact-value">
<a href="<%= "mailto:" + candidate.getUser().getUserName() %>">
<oneit:toString value="<%= candidate.getUser().getUserName() %>" mode="EscapeHTML" />
</a>
</div>
</div>
<div class="contact-row">
<div class="contact-label">P</div>
<div class="contact-value">
<oneit:toString value="<%= candidate.getPhone() %>" mode="EscapeHTML" />
</div>
</div>
<div class="contact-row" style="display: none;">
<div class="contact-label"><img src="images/linkdin-icon.png" /></div>
<div class="contact-value"><a href="#">View LinkedIn profile</a></div>
</div>
<div class="contact-row" style="display: none;">
<div class="contact-label"><img src="images/download-icon.png" /></div>
<div class="contact-value"><a href="#">Download Resume</a></div>
</div> </div>
</div> </div>
<div class="contact-row" style="display: none;"> <div class="applicant-note" style="display: none;">
<div class="contact-label"><img src="images/linkdin-icon.png" /></div> <div class="applicant-note-title">Notes</div>
<div class="contact-value"><a href="#">View LinkedIn profile</a></div> <div class="note-txt-box">
</div> <textarea class="form-control"></textarea>
<div class="contact-row" style="display: none;"> <input type="button" class="add-note-btn" value="ADD NOTE" />
<div class="contact-label"><img src="images/download-icon.png" /></div> </div>
<div class="contact-value"><a href="#">Download Resume</a></div>
</div> </div>
</div> <div class="admin-notes" style="display: none;">
<div class="applicant-note" style="display: none;"> <div class="admin-name">Admin name</div>
<div class="applicant-note-title">Notes</div> <div class="date-value">TODAY</div>
<div class="note-txt-box"> <div class="admin-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan interdum nisi, sed laoreet dui rhoncus.</div>
<textarea class="form-control"></textarea> <div class="admin-br-line"></div>
<input type="button" class="add-note-btn" value="ADD NOTE" /> <div class="admin-name">Admin name</div>
<div class="date-value">2 days ago</div>
<div class="admin-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div> </div>
</div> </div>
<div class="admin-notes" style="display: none;">
<div class="admin-name">Admin name</div>
<div class="date-value">TODAY</div>
<div class="admin-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan interdum nisi, sed laoreet dui rhoncus.</div>
<div class="admin-br-line"></div>
<div class="admin-name">Admin name</div>
<div class="date-value">2 days ago</div>
<div class="admin-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
cmsWebApp/webroot/extensions/adminportal/view_application.jsp
...@@ -27,36 +27,53 @@ ...@@ -27,36 +27,53 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() $(document).ready(function()
{ {
$('.percent-role').percentageLoader({ $('.percent-red-b').percentageLoader({
valElement: 'p', valElement: 'p',
strokeWidth: 20, strokeWidth: 15,
bgColor: '#e5e8eb', bgColor: '#e5e8eb',
ringColor: '#67b413', ringColor: '#f9623d',
textColor: '#67b413', textColor: '#4a4a4a',
fontSize: '30px', fontSize: '30px',
fontWeight: 'normal', fontWeight: 'normal'
showPercent: false
}); });
$('.percent-yellow-b').percentageLoader({
$('.percent-culture').percentageLoader({ valElement: 'p',
strokeWidth: 15,
bgColor: '#e5e8eb',
ringColor: '#ffd14c',
textColor: '#4a4a4a',
fontSize: '30px',
fontWeight: 'normal'
});
$('.percent-green-b').percentageLoader({
valElement: 'p', valElement: 'p',
strokeWidth: 20, strokeWidth: 15,
bgColor: '#e5e8eb', bgColor: '#e5e8eb',
ringColor: '#67b413', ringColor: '#03ac66',
textColor: '#67b413', textColor: '#4a4a4a',
fontSize: '30px', fontSize: '30px',
fontWeight: 'normal' fontWeight: 'normal'
}); });
$('.percent-req').percentageLoader({ $('.percent-green').percentageLoader({
valElement: 'p', valElement: 'p',
strokeWidth: 20, strokeWidth: 15,
bgColor: '#e5e8eb', bgColor: '#e5e8eb',
ringColor: '#03a0e7', ringColor: '#41bdb4',
textColor: '#03a0e7', textColor: '#4a4a4a',
fontSize: '30px', fontSize: '30px',
fontWeight: 'normal' fontWeight: 'normal'
}); });
$('.percent-blue').percentageLoader({
valElement: 'p',
strokeWidth: 15,
bgColor: '#e5e8eb',
ringColor: '#fbd44e',
textColor: '#4a4a4a',
fontSize: '30px',
fontWeight: 'normal'
});
}); });
</script> </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