Skip to content

P
PERFORMA_REPLICA
Commit 9329f531 by Saliya Randunu
Options

ui changes in create job page

parent 247c76d3
Showing with 554 additions and 14 deletions
cmsWebApp/webroot/css/common.css
......@@ -818,15 +818,18 @@ span.checkbox.checked + .slider:before {-webkit-transform: translateX(18px);-ms-
width: 100%;
max-width: 1300px;
}
.form-page-area.darkbg {
background-color: #F5F7F8;
}
.form-brack-line{
border: solid 1px #dbdbdf;
border-top: solid 1px #dbdbdf;
display: inline-block;
width: 100%;
margin-top: 15px;
margin-bottom: 34px;
}
.form-brack-line-sub{
border: solid 1px #dbdbdf;
border-top: solid 1px #dbdbdf;
display: inline-block;
width: 100%;
margin-top: 5px;
......@@ -840,6 +843,15 @@ span.checkbox.checked + .slider:before {-webkit-transform: translateX(18px);-ms-
font-weight: 500;
font-family: "Usual-Medium";
}
.info-box {
border: solid 1px #dbdbdf;
color: #4E5258; font-family: Usual; font-size: 12px; font-weight: 500; line-height: 16px;
}
.info-box .info-title { background-color: #fff; padding: 5px 15px;}
.info-box .info-desc { background-color: #F5F7F8; padding: 5px 15px;}
.warning-box {font-weight: 700;padding: 30px 0 30px 50px ; color: #008eea ; background: url('../images/warning.png') no-repeat left center; font-size: 12px}
.btn.btn-primary.largeBtn{
border-radius: 100px;
background-color: #03a0e7;
......
cmsWebApp/webroot/css/jBox.css 0 → 100644
/* Global */
.jBox-wrapper {
text-align: left;
box-sizing: border-box;
color: #4E5258; font-family: Usual; font-size: 10px; line-height: 16px;
}
.jBox-title,
.jBox-content,
.jBox-container {
position: relative;
word-break: break-word;
box-sizing: border-box;
}
.jBox-container {
background: #fff;
}
.jBox-content {
padding: 8px 10px;
overflow-x: hidden;
overflow-y: auto;
transition: opacity .2s;
}
/* jBox Tooltip */
.jBox-Tooltip .jBox-container,
.jBox-Mouse .jBox-container {
border-radius: 0;
border: 1px solid #DBDBDF;
}
.jBox-Tooltip .jBox-title,
.jBox-Mouse .jBox-title {
padding: 8px 10px 0;
font-weight: bold;
}
.jBox-hasTitle.jBox-Tooltip .jBox-content,
.jBox-hasTitle.jBox-Mouse .jBox-content {
padding-top: 5px;
}
.jBox-Mouse {
pointer-events: none;
}
/* Pointer */
.jBox-pointer {
position: absolute;
overflow: hidden;
}
.jBox-pointer-top { top: 0; }
.jBox-pointer-bottom { bottom: 0; }
.jBox-pointer-left { left: 0; }
.jBox-pointer-right { right: 0; }
.jBox-pointer-top,
.jBox-pointer-bottom {
width: 30px;
height: 12px;
}
.jBox-pointer-left,
.jBox-pointer-right {
width: 12px;
height: 30px;
}
.jBox-pointer:after {
content: '';
width: 20px;
height: 20px;
position: absolute;
background: #fff;
transform: rotate(45deg);
}
.jBox-pointer-top:after {
left: 5px;
top: 6px;
box-shadow: -1px -1px 2px rgba(0, 0, 0, .15);
}
.jBox-pointer-right:after {
top: 5px;
right: 6px;
box-shadow: 1px -1px 2px rgba(0, 0, 0, .15);
}
.jBox-pointer-bottom:after {
left: 5px;
bottom: 6px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}
.jBox-pointer-left:after {
top: 5px;
left: 6px;
box-shadow: -1px 1px 2px rgba(0, 0, 0, .15);
}
/* jBox Modal */
.jBox-Modal .jBox-container {
border-radius: 4px;
}
.jBox-Modal .jBox-content {
padding: 15px 20px;
}
.jBox-Modal .jBox-title {
border-radius: 4px 4px 0 0;
padding: 15px 20px;
background: #fafafa;
border-bottom: 1px solid #eee;
}
.jBox-Modal .jBox-footer {
border-radius: 0 0 4px 4px;
}
.jBox-Modal.jBox-closeButton-title .jBox-title {
padding-right: 55px;
}
.jBox-Modal .jBox-container,
.jBox-Modal.jBox-closeButton-box:before {
box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4);
}
/* Close button */
.jBox-closeButton {
cursor: pointer;
position: absolute;
}
.jBox-closeButton svg {
position: absolute;
top: 50%;
right: 50%;
}
.jBox-closeButton path {
transition: fill .2s;
}
.jBox-closeButton path {
fill: #aaa;
}
.jBox-closeButton:hover path {
fill: #888;
}
.jBox-closeButton:active path {
fill: #666;
}
/* Close button in overlay */
.jBox-overlay .jBox-closeButton {
top: 0;
right: 0;
width: 40px;
height: 40px;
}
.jBox-overlay .jBox-closeButton svg {
width: 20px;
height: 20px;
margin-top: -10px;
margin-right: -10px;
}
.jBox-overlay .jBox-closeButton path,
.jBox-overlay .jBox-closeButton:active path {
fill: #ddd;
}
.jBox-overlay .jBox-closeButton:hover path {
fill: #fff;
}
/* Close button in title */
.jBox-closeButton-title .jBox-closeButton {
top: 0;
right: 0;
bottom: 0;
width: 40px;
}
.jBox-closeButton-title .jBox-closeButton svg {
width: 12px;
height: 12px;
margin-top: -6px;
margin-right: -6px;
}
/* Close button in box */
.jBox-closeButton-box .jBox-closeButton {
top: -8px;
right: -10px;
width: 24px;
height: 24px;
background: #fff;
border-radius: 50%;
}
.jBox-closeButton-box .jBox-closeButton svg {
width: 10px;
height: 10px;
margin-top: -5px;
margin-right: -5px;
}
.jBox-hasTitle.jBox-Modal.jBox-closeButton-box .jBox-closeButton {
background: #fafafa;
}
.jBox-closeButton-box:before {
content: '';
position: absolute;
top: -8px;
right: -10px;
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}
.jBox-pointerPosition-top.jBox-closeButton-box:before {
top: 5px;
}
.jBox-pointerPosition-right.jBox-closeButton-box:before {
right: 2px;
}
/* Overlay */
.jBox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .82);
}
/* Footer */
.jBox-footer {
background: #fafafa;
border-top: 1px solid #eee;
padding: 8px 10px;
border-radius: 0 0 3px 3px;
}
/* Block scrolling */
body[class^="jBox-blockScroll-"],
body[class*=" jBox-blockScroll-"] {
overflow: hidden;
}
/* Draggable */
.jBox-draggable {
cursor: move;
}
/* Spinner */
@keyframes jBoxLoading {
to { transform: rotate(360deg); }
}
.jBox-loading .jBox-content {
opacity: .2;
}
.jBox-loading-spinner .jBox-content {
min-height: 38px !important;
min-width: 38px !important;
opacity: 0;
}
.jBox-spinner {
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
.jBox-spinner:before {
display: block;
box-sizing: border-box;
content: '';
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, .2);
border-top-color: rgba(0, 0, 0, .8);
animation: jBoxLoading .6s linear infinite;
}
/* Animations */
[class^="jBox-animated-"],
[class*=" jBox-animated-"] {
animation-fill-mode: both;
}
@keyframes jBox-tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.8) rotate(-4deg);}
30%, 50%, 70%, 90% {transform: scale(1.2) rotate(4deg);}
40%, 60%, 80% {transform: scale(1.2) rotate(-4deg);}
100% {transform: scale(1) rotate(0);}
}
.jBox-animated-tada {
animation: jBox-tada 1s;
}
@keyframes jBox-tadaSmall {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-2deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(2deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-2deg);}
100% {transform: scale(1) rotate(0);}
}
.jBox-animated-tadaSmall {
animation: jBox-tadaSmall 1s;
}
@keyframes jBox-flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
.jBox-animated-flash {
animation: jBox-flash .5s;
}
@keyframes jBox-shake {
0%, 100% {transform: translateX(0);}
20%, 60% {transform: translateX(-6px);}
40%, 80% {transform: translateX(6px);}
}
.jBox-animated-shake {
animation: jBox-shake .4s;
}
@keyframes jBox-pulseUp {
0% {transform: scale(1);}
50% {transform: scale(1.15);}
100% {transform: scale(1);}
}
.jBox-animated-pulseUp {
animation: jBox-pulseUp .25s;
}
@keyframes jBox-pulseDown {
0% {transform: scale(1);}
50% {transform: scale(0.85);}
100% {transform: scale(1);}
}
.jBox-animated-pulseDown {
animation: jBox-pulseDown .25s;
}
@keyframes jBox-popIn {
0% {transform: scale(0);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.jBox-animated-popIn {
animation: jBox-popIn .25s;
}
@keyframes jBox-popOut {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(0);}
}
.jBox-animated-popOut {
animation: jBox-popOut .25s;
}
@keyframes jBox-fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.jBox-animated-fadeIn {
animation: jBox-fadeIn .2s;
}
@keyframes jBox-fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.jBox-animated-fadeOut {
animation: jBox-fadeOut .2s;
}
@keyframes jBox-slideUp {
0% {transform: translateY(0);}
100% {transform: translateY(-300px); opacity: 0;}
}
.jBox-animated-slideUp {
animation: jBox-slideUp .4s;
}
@keyframes jBox-slideRight {
0% {transform: translateX(0);}
100% {transform: translateX(300px); opacity: 0;}
}
.jBox-animated-slideRight {
animation: jBox-slideRight .4s;
}
@keyframes jBox-slideDown {
0% {transform: translateY(0);}
100% {transform: translateY(300px); opacity: 0;}
}
.jBox-animated-slideDown {
animation: jBox-slideDown .4s;
}
@keyframes jBox-slideLeft {
0% {transform: translateX(0);}
100% {transform: translateX(-300px); opacity: 0;}
}
.jBox-animated-slideLeft {
animation: jBox-slideLeft .4s;
}
.jBox-closeButton {
z-index: 1;
}
.jBox-countdown {
border-radius: 3px 3px 0 0;
z-index: 0;
background: #000;
opacity: .2;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
}
.jBox-countdown_inner {
border-radius: 3px 3px 0 0;
top: 0;
right: 0;
width: 100%;
height: 3px;
position: absolute;
background: #fff;
}
cmsWebApp/webroot/extensions/adminportal/assessment_criteria.jsp
......@@ -78,7 +78,7 @@
<div class="create-job">
<div class="assessment-criteria">
<div class="form-group">
<label>Include Requirements for this Job? <a href="#" class="info-icon"><img src="images/info-icon.png" /></a> </label>
<label>Include Requirements for this Job? <a href="#" title="description gose here" class="info-icon"><img src="images/info-icon.png" /></a> </label>
<span class="pull-right">
<label class="switch">
<oneit:recalcClass htmlTag="span" classScript="job.showAssessmentCriteriaSection() ? 'checkbox checked': 'checkbox unchecked'" job="<%= job %>">
......@@ -110,6 +110,18 @@
<%
}
%>
<div class="info-box">
<div class="info-title">
Template : <strong>My Job Tempate Title</strong>
</div>
<div class="info-desc">
Changing requirement below is possible and will not overwrite <strong>My Job Tempate Title</strong>, OR <strong>Job Details</strong> as already defined, however they will need to be saved if you wish to use them again (which also includes Job Details).
</div>
</div>
<div class="warning-box">
Reqirments marked as Essential will be mandatory for any applicant applying for this job
</div>
<div class="form-brack-line-sub"></div>
<%
for(CriteriaType criteria : CriteriaType.getCriteriaTypeArray())
......
cmsWebApp/webroot/extensions/adminportal/inc/htmlheader.jsp
......@@ -85,6 +85,13 @@
{
$('.change-hiring-team').click();
});
//
//
// var toolpop = new jBox('Tooltip', {
// attach: '.info-icon',
// pointer: 'right:5'
// });
});
</script>
......
cmsWebApp/webroot/extensions/adminportal/job_detail.jsp
......@@ -25,6 +25,8 @@
job.setHiringTeam(companyUser.getSelectedTeam());
job.setJobOwner(companyUser);
%>
<script type="text/javascript">
$(document).ready(function()
......@@ -35,6 +37,8 @@
{
$("button[name$='loadJobFromTemplate']").click();
});
});
</script>
......@@ -50,9 +54,9 @@
<%
job.setCompletedDetails(Boolean.TRUE);
%>
<div class="create-job">
<div class="form-page-area">
<div class="create-job">
<%
if(jobs.length > 0)
{
......@@ -75,7 +79,7 @@
<oneit:ormInput obj="<%= job %>" type="text" attributeName="JobTitle" cssClass="form-control" />
</div>
<div class="col-md-4">
<label><oneit:label GUIName="Reference Number" /></label>
<label><oneit:label GUIName="Reference Number" /><a href="#" title="Uniquely identify jobs that have identical titles. Examlple:<br>&#8226; New Home Sales Consutant (ABC123)<br>&#8226; New Home Sales Consutant (ABC456)" class="info-icon"><img src="images/info-icon.png" /></a></label>
<oneit:ormInput obj="<%= job %>" type="text" attributeName="ReferenceNumber" cssClass="form-control" />
</div>
</div>
......@@ -107,7 +111,8 @@
%>
</div>
<div class="form-brack-line"></div>
</div>
<div class="form-page-area darkbg">
<div class="form-group row">
<div class="col-md-12">
......@@ -153,7 +158,8 @@
</div>
</div>
<div class="form-brack-line"></div>
</div>
<div class="form-page-area">
<div class="form-group row">
<div class="col-md-12">
......@@ -243,7 +249,8 @@
String levelKey = WebUtils.getRadioSingleAssocKey(request, job, Job.SINGLEREFERENCE_Level);
String levelValue = formBuilder.fieldValue (levelKey, job.getLevel() == null ? "" : String.valueOf(job.getLevelID()));
%>
<div class="form-brack-line"></div>
</div>
<div class="form-page-area darkbg">
<div class="form-group row">
<div class="col-md-12">
<label class="label-16">Applicant Workflow</label>
......
cmsWebApp/webroot/extensions/adminportal/workplace_culture.jsp
......@@ -83,9 +83,11 @@
requestAttribs="<%= CollectionUtils.mapEntry ("Job", job)
.mapEntry (UpdateMappedObjFP.FAIL_VALIDATION_ERRORS, Boolean.FALSE)
.toMap() %>" />
<div class="form-page-area">
<div class="create-job">
<div class="assessment-criteria">
<div class="create-job">
<div class="assessment-criteria">
<div class="form-page-area">
<div class="form-group">
<label class="label-16 work-title">Culture</label>
<p>
......@@ -104,10 +106,15 @@
<%
}
%>
</div>
<div class="form-page-area darkbg">
<div class="form-group">
<label><oneit:label GUIName="Organisation Culture Statement" /></label>
<label><oneit:label GUIName="Organisation Culture Statement" /> <a href="#" title="Note description gose here." class="info-icon"><img src="images/info-icon.png" /></a></label>
<oneit:ormtextarea obj="<%= job %>" attributeName="CultureStatement" cssClass="form-control textarea-box"/>
</div>
</div>
<div class="form-page-area">
<%
FormTag jobForm = FormTag.getActiveFormTag(request);
FormBuilder formBuilder = jobForm.getFormBuilder();
......@@ -199,7 +206,8 @@
<%
}
%>
</div>
<div class="form-page-area">
<div class="form-group">
<div class="styled_checkboxes">
<div class="checkbox checkbox-primary">
......@@ -238,6 +246,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
</oneit:form>
......
cmsWebApp/webroot/inc/std_imports.jsp
......@@ -12,6 +12,7 @@
<oneit:css href="/css/jquery-ui-1.11.xx/jquery-ui.css"/>
<oneit:css href="/css/common.css" />
<oneit:css href="/css/fa/font-awesome.css" />
<oneit:css href="/css/jBox.css" />
</oneit:css>
<oneit:script>
......@@ -27,6 +28,7 @@
<oneit:script src="/scripts/countimer.js"/>
<oneit:script src="/scripts/slick.min.js"/>
<oneit:script src="/scripts/raphael-min.js"/>
<oneit:script src="/scripts/jBox.min.js"/>
</oneit:script>
<script>
......
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