Skip to content

P
PERFORMA_REPLICA
Commit acc7d8c4 by Saliya Randunu
Options

ui desing chagnes in My Hiring Team -> Manage Plan Tab

parent aec27002
Showing with 436 additions and 120 deletions
cmsWebApp/webroot/css/common.css
......@@ -66,6 +66,7 @@ header{
height: 65px;
z-index: 1000;
}
.clearboth {clear: both;}
.site-logo {
float: left;
padding: 13.5px 0 13.5px 23px;
......@@ -5663,7 +5664,246 @@ label, label .label-title span {
.tabpage-title{
font-size: 20px;
font-weight: 700;
margin-bottom: 6%;
margin-bottom:30px;
}
.tabpage-title.manage-plan {width:50%; float: left;}
.apply-coupon {width:50%; float: left;position: relative}
.apply-coupon input {
height: 34px;
border: 1px solid #DBDBDF;
border-radius: 3px;
background-color: #FFFFFF;
box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.08);
display: inline-block;
}
.apply-coupon button{position: absolute;top:5px;right:5px}
.coupon-applied-alert {clear: both; font-size:11px;margin: 20px 0;
height: 30px;
/*line-height: 30px;*/
width: 100%;
border-radius: 5px;
background-color: #67B413;
color: #FFFFFF;
text-transform: uppercase;
padding: 8px 12px ;
}
.coupon-applied-alert .coupon_code {margin-left: 30px;font-weight: bold;}
.coupon-applied-alert .expire {display: inline-block; float: right; width: 50%;text-align: right}
.btn-input-inside {
height: 24px;
width: 76px;
border-radius: 100px;
background-color: #03A0E7;
color: #FFFFFF;
font-size: 8px;
padding: 7px 12px;
}
.rectangle-5 {
min-height: 110px;
width: 100%;
border: 1px solid #DBDBDF;
border-radius: 5px;
background-color: #FFFFFF;
}
.oneit-radio.checked .rectangle-5 {
border: 1px solid #03A0E7;
}
.manage-plan-row {
margin: 35px ;
}
.manage-plan-row .radio {
width:7%;
float: left;
}
.manage-plan-row .manage-plan-title {
width: 60%;
float: left;
}
.manage-plan-row .manage-plan-payplan {
width: 33%;
float: left;
text-align: right;
}
.manage-plan-row .manage-plan-title h3 {
margin: 0;
color: #4E5258;
font-family: Usual;
font-size: 18px;
font-weight: 500;
line-height: 30px;
}
.manage-plan-row .manage-plan-title span {
color: #4E5258;
font-family: Usual;
font-size: 12px;
}
.manage-plan-row .per-job-amount {
margin: 0;
color: #4E5258;
font-family: Usual;
font-size: 18px;
font-weight: 500;
line-height: 30px;
}
.coupon-applied .manage-plan-row .per-job-amount {
color: #67B413;
}
.manage-plan-row .per-job-amount-past {
color: #8E97A0;
font-family: Usual;
font-size: 11px;
}
/*.manage-plan-hidden-info {display: none; }*/
.oneit-radio.checked .manage-plan-hidden-info {display: block;}
.subscription-billed {
height: 60px;
width: 100%;
border-top: 1px solid #DBDBDF;
border-bottom: 1px solid #DBDBDF;
margin: 22px 0 0;
padding: 20px 35px ;
color: #41BDB4;
font-size: 14px;
font-weight: 500;
}
.subscription-billed img {width: 22px; margin-right:15px;}
.choose-plan-row { background-color: #F5F7F8; margin: 0 ; padding: 40px 35px }
.choose-your-plan-title {
height: 22px;
color: #03A0E7;
font-family: Usual;
font-size: 18px;
font-weight: 500;
line-height: 22px;
margin-bottom:26px;
}
.choose-plan-headings div {display: inline-block ; min-width: 125px;}
.choose-plan-headings .jobs-per-month {margin-right: 45px; }
.choose-plan-headings .cost-per-job {margin-right: 12px; }
.choose-plan-headings {color: #8E97A0; font-size: 11px;font-family: Usual;margin-bottom: 10px;}
.choose-plan-item {
height: 80px;
border: 1px solid #DBDBDF;
border-radius: 5px;
background-color: #FFFFFF;
padding: 25px 30px;
line-height: normal;
margin-bottom: 5px;
}
.choose-plan-item.active {
border: 1px solid #03A0E7;
background-color: #EDF9FF;
box-shadow: 0 0 0 1px #03A0E7;
}
.select-button .btn {
height: 30px;
width: 89px;
border-radius: 100px;
color: #FFFFFF;
background-color: #03A0E7;
/*line-height: 13px;*/
text-align: center;
letter-spacing: 1px;
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
}
.choose-plan-item.active .select-btn{display: none}
.select-button .active-btn { display: none; color: #03A0E7; border: 1px solid #03A0E7;background-color: #FFFFFF; }
.choose-plan-item.active .active-btn { display: inline-block; }
.choose-plan-item div {
display: block;
color: #6A7481;
font-size: 18px;
float: left;
}
.choose-plan-item div.select-button {float: right;}
.choose-plan-item div span.month {
font-size: 13px;
color: #8E97A0;
}
.choose-plan-item div span.past-val {
font-size: 11px;
color: #8E97A0;
display: block;
}
.choose-plan-item div.jobs {
min-width: 140px;
}
.choose-plan-item.active div.jobs {
color: #03A0E7;
}
.choose-plan-item div.fee {
min-width: 140px;
}
.choose-plan-item div.cost {
min-width: 140px;
}
.coupon-applied .choose-plan-item div.cost , .coupon-applied .choose-plan-item div.fee {
color: #67B413;
}
.additional-jobs-over .blue-alert{display: block;font-weight: bold;color: #03A0E7;margin-bottom: 20px;}
.additional-jobs-over {
height: 68px;
color: #4E5258;
font-family: Usual;
font-size: 14px;
line-height: 17px;
text-align: center;
width: 485px;
margin: 30px auto;
}
.set-a-cap-option, .setmax {text-align: center;}
.setmax {margin-top: 30px;}
.set-a-cap-option div {text-align: center;display: inline-block}
.set-a-cap-option div span{display: inline-block; float: left ; margin: 0 20px;}
.set-a-cap-option div label{display: inline-block; float: left}
.setmax input {
height: 50px;
width: 105px;
border: 1px solid #DBDBDF;
border-radius: 2px;
background-color: #FFFFFF;
box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.08);
color: #4E5258;
font-size: 14px;
display: inline-block;
margin: 0
}
.setmax button {
height: 50px;
width: 100px;
border-radius: 0 2px 2px 0;
background-color: #4E5258;
color: #FFFFFF;
font-size: 11px;
margin: 0
}
.company-content-area label {
......@@ -5690,7 +5930,7 @@ label, label .label-title span {
margin-top: 5px;
}
.company-content-area .footer-note{
margin-top: 150px;
/*margin-top: 150px;*/
}
.label-20{
font-size: 20px;
......
cmsWebApp/webroot/extensions/adminportal/inc/htmlheader.jsp
......@@ -35,6 +35,28 @@
app_id: "<%= Utils.INTERCOM_APP_ID %>",
user_id: "<%= clientUser.getID().toString() %>"
};
$(document).ready(function(){
$(".oneit-radio input").each(function(){
if($(this).is(':checked')) {
updateRadioChecked(this);
}
$(this).click(function(){
if($(this).is(':checked')) {
updateRadioChecked(this);
}
});
});
});
function updateRadioChecked(ele){
$("input[name='"+ $(ele).attr('name') +"'").closest('label').removeClass('checked');
$("input[name='"+ $(ele).attr('name') +"'").closest('.oneit-radio').removeClass('checked');
$(ele).closest('label').addClass('checked');
$(ele).closest('.oneit-radio').addClass('checked');
}
</script>
<script>
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/kqed9h3r';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()
......
cmsWebApp/webroot/extensions/adminportal/manage_plan.jsp
......@@ -60,133 +60,201 @@
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="company-detail">
<div class="tabpage-title">
<div>
<div class="tabpage-title manage-plan">
<label class="label-20">Manage Plan</label>
</div>
<div>
<oneit:ormInput obj="<%= hiringTeam %>" type="text" attributeName="CouponCode" cssClass="form-control" />
<oneit:button value="Apply" name="applyCoupon" cssClass="btn btn-primary"
<div class="apply-coupon">
<oneit:ormInput obj="<%= hiringTeam %>" type="text" attributeName="CouponCode" placeholder="Coupon Code" cssClass="form-control" />
<oneit:button value="APPLY" name="applyCoupon" cssClass="btn btn-input-inside"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>" />
</div>
<div>
</div>
<div class="coupon-applied-alert">
coupon applied
<span class="coupon_code">
<oneit:toString value="ABCD123" mode="EscapeHTML"/> - save
<oneit:toString value="10%" mode="EscapeHTML"/>
</span>
<span class="expire">
Expires
<oneit:toString value="18 Sep 2018" mode="EscapeHTML"/>
</span>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="oneit-radio">
<label class="create-job-selector rectangle-4">
<oneit:ormInput obj="<%= hiringTeam %>" type="radio" attributeName="IsPPJ" value="true"/>
<div>
Pay Per Job
<br/>
<span>
You'll be charged each time you add a new job
</span>
<br/>
<oneit:toString value="<%= PaymentPlan.PER_PER_JOB_AMOUNT %>" mode="Currency"/>/ Job
<br/>
was <oneit:toString value="<%= PaymentPlan.PER_PER_JOB_AMOUNT %>" mode="Currency"/> per job
<div class="col-md-12 oneit-radio coupon-applied">
<div class="rectangle-5">
<div class="manage-plan-row">
<div class="radio">
<label>
<oneit:ormInput obj="<%= hiringTeam %>" type="radio" attributeName="IsPPJ" value="true"/>
</label>
</div>
<div class="manage-plan-title">
<h3>Pay Per Job</h3>
<span>
You'll be charged each time you add a new job
</span>
</div>
<div class="manage-plan-payplan">
<div class="per-job-amount">
<oneit:toString value="<%= PaymentPlan.PER_PER_JOB_AMOUNT %>" mode="Currency"/>/ Job
</div>
<div class="per-job-amount-past">
was <oneit:toString value="<%= PaymentPlan.PER_PER_JOB_AMOUNT %>" mode="Currency"/> per job
</div>
</div>
<div class="clearboth"></div>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="oneit-radio" >
<label class="create-job-selector rectangle-4">
<oneit:ormInput obj="<%= hiringTeam %>" type="radio" attributeName="IsPPJ" value="false"/>
<div>
Subscribe & Save
<br/>
<span>
Intend to post multiple jobs this month?
Find a plan to suit your hiring needs, and save today.
</spa<n>
</div>
</label>
<div>
Your subscription is billed and resets on the <oneit:toString value="12th" mode="EscapeHTML"/> of every month
</div>
<div>
Choose Your Plan
</div>
<div>
<br/>
10 Jobs
<br/><br/>
<oneit:toString value="<%= 243.00 %>" mode="Currency"/>
<br/>
was <oneit:toString value="<%= 270.00 %>" mode="Currency"/>
<br/><br/>
<oneit:toString value="<%= 2430.00 %>" mode="Currency"/> / month
<br/>
was <oneit:toString value="<%= 2700.00 %>" mode="Currency"/>
</div>
<div class="col-md-12 oneit-radio coupon-applied">
<div class="rectangle-5">
<div class="manage-plan-row">
<div class="radio">
<label>
<oneit:ormInput obj="<%= hiringTeam %>" type="radio" attributeName="IsPPJ" value="false"/>
</label>
</div>
<div class="manage-plan-title">
<h3>Subscribe & Save</h3>
<span>
Intend to post multiple jobs this month?<br>
Find a plan to suit your hiring needs, and save today.
</span>
</div>
<div class="manage-plan-payplan">
<div class="per-job-amount">
</div>
<div class="per-job-amount-past">
<oneit:button value="Active" name="saveCompany" cssClass="btn btn-primary"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>" />
</div>
</div>
<div class="clearboth"></div>
</div>
<div class="manage-plan-hidden-info">
<div class="subscription-billed">
<img src="images/icon-calendar.png"> Your subscription is billed and resets on the <oneit:toString value="12th" mode="EscapeHTML"/> of every month
</div>
<div class="choose-plan-row">
<div class="choose-your-plan-title">
Choose Your Plan
</div>
<div class="choose-plan-headings">
<div class="jobs-per-month">Jobe Per Month</div>
<div class="cost-per-job">Cost Per Job</div>
<div class="monthly-fee">Monthly Fee</div>
</div>
<div class="choose-plan-item">
<div class="jobs">
10 Jobs
</div>
<div class="cost">
<oneit:toString value="<%= 243.00 %>" mode="Currency"/>
<span class="past-val">
was <oneit:toString value="<%= 270.00 %>" mode="Currency"/>
</span>
</div>
<div class="fee">
<oneit:toString value="<%= 2430.00 %>" mode="Currency"/><span class="month"> / month </span>
<span class="past-val">
was <oneit:toString value="<%= 2700.00 %>" mode="Currency"/>
</span>
</div>
<div class="select-button">
<oneit:button value="Active" name="saveCompany" cssClass="btn active-btn"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>" />
<oneit:button value="Select" name="saveCompany" cssClass="btn btn-primary"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>" />
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<span>
Additional jobs over plan allowance are billed at the Cost Per Job for the subscription level
</span>
<span>
Would you like to set a maximum limit on the total jobs able to be posted
</span>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<span>
Would you like to set a maximum limit on the total jobs able to be posted
</span>
</div>
</div>
<oneit:button value="Select" name="saveCompany" cssClass="btn select-btn"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>" />
</div>
</div>
<div class="choose-plan-item active">
<div class="jobs">
10 Jobs
</div>
<div class="cost">
<oneit:toString value="<%= 243.00 %>" mode="Currency"/>
<span class="past-val">
was <oneit:toString value="<%= 270.00 %>" mode="Currency"/>
</span>
</div>
<div class="fee">
<oneit:toString value="<%= 2430.00 %>" mode="Currency"/><span class="month"> / month </span>
<span class="past-val">
was <oneit:toString value="<%= 2700.00 %>" mode="Currency"/>
</span>
</div>
<div class="select-button">
<oneit:button value="Active" name="saveCompany1" cssClass="btn active-btn"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>" />
<div class="form-group row">
No, leave it open
<label class="switch">
<oneit:recalcClass htmlTag="span" classScript="hiringTeam.isTrue(hiringTeam.getHasCap()) ? 'checkbox checked': 'checkbox unchecked'" hiringTeam="<%= hiringTeam %>">
<oneit:ormInput obj="<%= hiringTeam %>" attributeName="HasCap" type="checkbox"/>
</oneit:recalcClass>
<div class="slider round"></div>
</label>
yes, set a cap
</div>
<div class="form-group row">
<oneit:ormInput obj="<%= hiringTeam %>" type="text" attributeName="MaxCap" cssClass="form-control" />
<oneit:button value="Select" name="saveCompany" cssClass="btn select-btn"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>" />
</div>
</div>
<oneit:button value="Set Max" name="saveCompany" cssClass="btn btn-primary"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>" />
</div>
<div class="additional-jobs-over">
<span class="blue-alert">
Additional jobs over plan allowance are billed at the Cost Per Job for the subscription level
</span>
<span>
Would you like to set a maximum limit on the total jobs able to be posted
</span>
</div>
<div class="set-a-cap-option">
<div >
<span> No, leave it open</span>
<label class="switch">
<oneit:recalcClass htmlTag="span" classScript="hiringTeam.isTrue(hiringTeam.getHasCap()) ? 'checkbox checked': 'checkbox unchecked'" hiringTeam="<%= hiringTeam %>">
<oneit:ormInput obj="<%= hiringTeam %>" attributeName="HasCap" type="checkbox"/>
</oneit:recalcClass>
<div class="slider round"></div>
</label>
<span>yes, set a cap</span>
</div>
</div>
<div class="setmax">
<div>
<oneit:ormInput obj="<%= hiringTeam %>" type="text" attributeName="MaxCap" cssClass="form-control" />
<div class="form-group row">
<oneit:button value="Update Subscription" name="saveCompany" cssClass="btn btn-primary largeBtn btn-green save-btn" style="display:none;"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.mapEntry ("restartProcess", Boolean.TRUE)
.mapEntry ("Company", company)
.mapEntry ("IsPayment", Boolean.TRUE)
.mapEntry ("attribNamesToRestore", Collections.singleton("Company"))
.toMap() %>" />
<oneit:button value="Set Max" name="saveCompany" cssClass="btn btn-primary"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>" />
</div>
</div>
<div class="form-group row">
<oneit:button value="Update Subscription" name="saveCompany" cssClass="btn btn-primary largeBtn btn-green save-btn" style="display:none;"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
.mapEntry ("restartProcess", Boolean.TRUE)
.mapEntry ("Company", company)
.mapEntry ("IsPayment", Boolean.TRUE)
.mapEntry ("attribNamesToRestore", Collections.singleton("Company"))
.toMap() %>" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center footer-note">
Looking to cancel your account? Please <a href="http://www.talentology.com/">contact us.</a>
......
cmsWebApp/webroot/extensions/adminportal/my_company.jsp
......@@ -31,24 +31,10 @@
});
$(".oneit-radio input").each(function(){
if($(this).is(':checked')) {
updateRadioChecked(this);
}
$(this).click(function(){
if($(this).is(':checked')) {
updateRadioChecked(this);
}
});
});
});
function updateRadioChecked(ele){
$(".oneit-radio label").removeClass('checked');
$(ele).closest('label').addClass('checked');
}
</script>
<div class="container-fluid">
......
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