Commit acc7d8c4 by Saliya Randunu

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

parent aec27002
...@@ -66,6 +66,7 @@ header{ ...@@ -66,6 +66,7 @@ header{
height: 65px; height: 65px;
z-index: 1000; z-index: 1000;
} }
.clearboth {clear: both;}
.site-logo { .site-logo {
float: left; float: left;
padding: 13.5px 0 13.5px 23px; padding: 13.5px 0 13.5px 23px;
...@@ -5663,7 +5664,246 @@ label, label .label-title span { ...@@ -5663,7 +5664,246 @@ label, label .label-title span {
.tabpage-title{ .tabpage-title{
font-size: 20px; font-size: 20px;
font-weight: 700; 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 { .company-content-area label {
...@@ -5690,7 +5930,7 @@ label, label .label-title span { ...@@ -5690,7 +5930,7 @@ label, label .label-title span {
margin-top: 5px; margin-top: 5px;
} }
.company-content-area .footer-note{ .company-content-area .footer-note{
margin-top: 150px; /*margin-top: 150px;*/
} }
.label-20{ .label-20{
font-size: 20px; font-size: 20px;
......
...@@ -35,6 +35,28 @@ ...@@ -35,6 +35,28 @@
app_id: "<%= Utils.INTERCOM_APP_ID %>", app_id: "<%= Utils.INTERCOM_APP_ID %>",
user_id: "<%= clientUser.getID().toString() %>" 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>
<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);}}})() (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);}}})()
......
...@@ -31,24 +31,10 @@ ...@@ -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> </script>
<div class="container-fluid"> <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