Skip to content

P
PERFORMA_REPLICA
Commit c1997782 by Saliya Randunu
Options

ui fixes in view application page and inside tabs

parent 4b63c08a
Showing with 76 additions and 13 deletions
cmsWebApp/webroot/css/common.css
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
body{ body{
color: #4e5258; color: #4e5258;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
:focus{ :focus{
outline: none; outline: none;
...@@ -3055,7 +3056,7 @@ span.export-candidate,span.appli-status-short{ ...@@ -3055,7 +3056,7 @@ span.export-candidate,span.appli-status-short{
vertical-align: bottom; vertical-align: bottom;
} }
.four-label{ .four-label{
margin-top: 25px; margin: 25px 0;
} }
.applicant-tab { .applicant-tab {
background: #fff none repeat scroll 0 0; background: #fff none repeat scroll 0 0;
...@@ -3102,7 +3103,7 @@ span.export-candidate,span.appli-status-short{ ...@@ -3102,7 +3103,7 @@ span.export-candidate,span.appli-status-short{
cursor: pointer; cursor: pointer;
} }
.pro-bar { .pro-bar {
padding: 28px 38px 22px 62px; padding: 28px 38px 22px 62px; height: 80px;
} }
.express-bar { .express-bar {
padding: 10px 38px 35px 62px; padding: 10px 38px 35px 62px;
...@@ -3169,6 +3170,13 @@ span.appli-progress-bar { ...@@ -3169,6 +3170,13 @@ span.appli-progress-bar {
border-bottom: solid 1px #e3e3e3; border-bottom: solid 1px #e3e3e3;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
font-size: 12px;
}
.main-score-bar.ESSENTIAL.red .score-bar {
border-left: 10px solid #f96230;
}
.main-score-bar.ESSENTIAL.green .score-bar {
border-left: 10px solid #67B413;
} }
.applicant-right { .applicant-right {
float: right; float: right;
...@@ -3307,6 +3315,31 @@ input.add-note-btn:hover{ ...@@ -3307,6 +3315,31 @@ input.add-note-btn:hover{
height: 145px; height: 145px;
margin: 0 auto; margin: 0 auto;
} }
.progress-circle {position: relative}
.progress-circle .missing-requirements-icon{
top:-7px;
left : 52px;
box-sizing: border-box;
height: 33px;
width: 33px;
border: 3px solid #FFFFFF;
position: absolute;
border-radius: 50%;
background: url('../images/icon-requirements.png') #F9623D no-repeat center center ;
background-size: 25%;
}
.progress-circle .green-requirements-icon{
top:-7px;
left : 52px;
box-sizing: border-box;
height: 33px;
width: 33px;
border: 3px solid #FFFFFF;
position: absolute;
border-radius: 50%;
background: url('../images/correct.png') #67B413 no-repeat center center ;
background-size:55%;
}
.progress-label{ .progress-label{
color: #4a4a4a; color: #4a4a4a;
font-size: 12px; font-size: 12px;
...@@ -3950,6 +3983,8 @@ no-applicant.inactive a:hover,no-applicant.inactive a:hover span{ ...@@ -3950,6 +3983,8 @@ no-applicant.inactive a:hover,no-applicant.inactive a:hover span{
.appli-view-bar .progress-bar.green{ .appli-view-bar .progress-bar.green{
background: #67B413; background: #67B413;
} }
.appli-view-bar .missing-requirements-icon{ .appli-view-bar .missing-requirements-icon{
top:-7px; top:-7px;
left : -5px; left : -5px;
...@@ -5907,25 +5942,47 @@ input{ ...@@ -5907,25 +5942,47 @@ input{
width: 40%; width: 40%;
height: 12px; height: 12px;
font-family: "Usual-Regular"; font-family: "Usual-Regular";
font-size: 10px; font-size: 12px;
letter-spacing: 0.9px; letter-spacing: 0.9px;
text-align: left; text-align: left;
color: #4e5258; color: #4e5258;
padding: 16px 30px; padding: 16px 30px 16px 52px;;
float: left; float: left;
text-transform: uppercase; text-transform: uppercase;
height: 45px;
} }
.detail-tab-row-text { .detail-tab-row-text {
width: 60%; width: 60%;
height: 12px; height: 12px;
font-family: "Usual-Regular"; font-family: "Usual-Regular";
font-size: 10px; font-size: 12px;
line-height: 1.17; line-height: 1.17;
text-align: left; text-align: left;
color: #7d7f82; color: #7d7f82;
padding: 16px; padding: 16px;
float: left; float: left;
height: 45px;
}
.detail-tab-row-title .dot-icon{
top:14px;
left : 34px;
box-sizing: border-box;
height: 20px;
width: 20px;
position: absolute;
border-radius: 50%;
}
.detail-tab-row-title.red-requirements .dot-icon{
background: url('../images/icon-requirements.png') #F9623D no-repeat center center ;
background-size: 25%;
}
.detail-tab-row-title.green-requirements .dot-icon{
background: url('../images/correct.png') #67B413 no-repeat center center ;
background-size:55%;
} }
.skip-btn{ .skip-btn{
...@@ -6491,6 +6548,6 @@ input{ ...@@ -6491,6 +6548,6 @@ input{
.job-edit-pop .jBox-content {padding: 0} .job-edit-pop .jBox-content {padding: 0}
.job-edit-pop .jBox-container{border-radius: 2px !important; width: 240px;box-shadow: 0 3px 9px 0 rgba(0,0,0,0.35);background-color: #FFFFFF;} .job-edit-pop .jBox-container{border-radius: 2px !important; width: 240px;box-shadow: 0 3px 9px 0 rgba(0,0,0,0.35);background-color: #FFFFFF;}
.job-edit-menu .job-edit-menu-item {display: block; font-weight: 500; height:45px; padding: 24px;border-bottom: 1px solid #DBDBDF;font-size:11px;line-height:1px;letter-spacing: 1px; color: #03A0E7;} .job-edit-menu .job-edit-menu-item {display: block; font-weight: 500; height:45px; padding: 24px;border-bottom: 1px solid #DBDBDF;font-size:11px;line-height:1px;letter-spacing: 1px; color: #03A0E7;}
.essential-requirements-note {font-family: 'Usual-Bold' !important ;height: 34px;box-shadow: 0 -1px 0 0 #DDDDDD;width:100%;position: absolute;font-size: 11px;font-weight: 500;left:0;bottom: 0;line-height: 34px;}
.red-requirements {color: #F9623D;} .red-requirements {color: #F9623D;}
.green-requirements {color: #67B413;} .green-requirements {color: #67B413;}
cmsWebApp/webroot/extensions/adminportal/inc/view_application_tab_applicant.jsp
...@@ -222,7 +222,12 @@ ...@@ -222,7 +222,12 @@
%> %>
<div class="col-sm-4 col-xs-12 text-center thr-block requirement-fit" href="#3a" data-toggle="tab" id="progress3" onClick="tabToggle('#tab3','.requirement-fit')"> <div class="col-sm-4 col-xs-12 text-center thr-block requirement-fit" href="#3a" data-toggle="tab" id="progress3" onClick="tabToggle('#tab3','.requirement-fit')">
<label class="progress-label">requirements</label> <label class="progress-label">requirements</label>
<div class="<%= "percent-" + jobApplication.getRequirementFitColor() + " fixed-width" %>"> <div class="<%= "percent-" + jobApplication.getRequirementFitColor() + " fixed-width progress-circle" %>">
<% if (missingReq) { %>
<span class="missing-requirements-icon" style="display:inline-block"></span>
<%} else{ %>
<span class="green-requirements-icon" style="display:inline-block"></span>
<%}%>
<p style="display:none;"><oneit:toString value="<%= jobApplication.getRequirementFitScore() %>" mode="TwoDPDouble" /></p> <p style="display:none;"><oneit:toString value="<%= jobApplication.getRequirementFitScore() %>" mode="TwoDPDouble" /></p>
</div> </div>
<div class="row four-label"> <div class="row four-label">
...@@ -266,7 +271,7 @@ ...@@ -266,7 +271,7 @@
} }
%> %>
</div> </div>
<div class="<%= missingReq ? "red-requirements" : "green-requirements" %>"> <div class="<%="essential-requirements-note " + (missingReq ? "red-requirements" : "green-requirements") %>">
<span><%= missingReq ? "Does not meet essential requirements" : "Does meet essential requirements" %></span> <span><%= missingReq ? "Does not meet essential requirements" : "Does meet essential requirements" %></span>
</div> </div>
</div> </div>
...@@ -430,7 +435,7 @@ ...@@ -430,7 +435,7 @@
{ {
Long rating = requirementFitData.get(importance); Long rating = requirementFitData.get(importance);
%> %>
<div class="main-score-bar main-pro-bar <%= importance %>"> <div class="main-score-bar main-pro-bar <%= importance %> <%= missingReq ? "red" : "green" %>">
<div class="score-bar pro-bar"> <div class="score-bar pro-bar">
<span class="appli-label"><oneit:toString value="<%= importance %>" mode="EscapeHTML"/></span> <span class="appli-label"><oneit:toString value="<%= importance %>" mode="EscapeHTML"/></span>
<% <%
...@@ -476,13 +481,13 @@ ...@@ -476,13 +481,13 @@
%> %>
<div class="tab-row"> <div class="tab-row">
<div class="detail-tab-row-title col-md-4 col-sm-4 col-xs-4 <%= (importance == Importance.ESSENTIAL ? (missingReq ? "red-requirements" : "green-requirements") : "") %>" style="width: 30%"> <div class="detail-tab-row-title col-md-4 col-sm-4 col-xs-4 <%= (importance == Importance.ESSENTIAL ? (missingReq ? "red-requirements" : "green-requirements") : "") %>" style="width: 30%">
<span class="common-dot <%= dotClass %>"></span> &nbsp; <span class="dot-icon"></span> &nbsp;
<oneit:toString value="<%= answer.getAssessmentCriteria().getCriteriaType() %>" mode="EscapeHTML"/> <oneit:toString value="<%= answer.getAssessmentCriteria().getCriteriaType() %>" mode="EscapeHTML"/>
</div> </div>
<div class="detail-tab-row-text col-md-7 col-sm-7 col-xs-7" style="width: 55%"> <div class="detail-tab-row-text col-md-7 col-sm-7 col-xs-7" style="width: 55%">
<oneit:toString value="<%= answer.getAssessmentCriteria() %>" mode="EscapeHTML"/> <oneit:toString value="<%= answer.getAssessmentCriteria() %>" mode="EscapeHTML"/>
</div> </div>
<div class="detail-tab-row-text col-md-1 col-sm-1 col-xs-1" style="width: 15%; line-height: 0.1;"> <div class="detail-tab-row-text col-md-1 col-sm-1 col-xs-1" style="width: 15%;">
<oneit:toString value="<%= answer.getAnswer() ? "Yes" : "No" %>" mode="EscapeHTML"/> <oneit:toString value="<%= answer.getAnswer() ? "Yes" : "No" %>" mode="EscapeHTML"/>
<% <%
......
cmsWebApp/webroot/extensions/adminportal/view_application.jsp
...@@ -76,11 +76,12 @@ ...@@ -76,11 +76,12 @@
valElement: 'p', valElement: 'p',
strokeWidth: 15, strokeWidth: 15,
bgColor: '#e5e8eb', bgColor: '#e5e8eb',
ringColor: '#41bdb4', ringColor: '#67B413',
textColor: '#4a4a4a', textColor: '#67B413',
fontSize: '30px', fontSize: '30px',
fontWeight: 'normal', fontWeight: 'normal',
showPercent: true showPercent: true
}); });
$('.percent-yellow').percentageLoader({ $('.percent-yellow').percentageLoader({
valElement: 'p', valElement: 'p',
......
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