FIX_OPD_POLICY_TERMS_ALIGNMENT_ISSUE
This commit is contained in:
parent
04546877dc
commit
ca849e2d33
@ -23,6 +23,14 @@
|
|||||||
max-width: 440px;
|
max-width: 440px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#OtherPolicyTermsForm #familyFloaterDiv_others .form-check-inline .form-check-input {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#OtherPolicyTermsForm #familyFloaterDiv_others .form-check-inline .form-check-label {
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-si-add-teal {
|
.btn-si-add-teal {
|
||||||
background-color: #00a8b5;
|
background-color: #00a8b5;
|
||||||
border: 1px solid #00a8b5;
|
border: 1px solid #00a8b5;
|
||||||
@ -45,63 +53,60 @@
|
|||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fixed columns so Min/Max Age and Payable align across Self / Spouse / Children / Other ages */
|
.policy-72-ff-table {
|
||||||
.policy-72-ff-grid {
|
width: 100%;
|
||||||
display: grid;
|
min-width: 860px;
|
||||||
grid-template-columns: 248px 148px 148px minmax(200px, 1fr);
|
|
||||||
column-gap: 20px;
|
|
||||||
row-gap: 14px;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 680px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.policy-72-ff-grid .ff-cell.ff-member {
|
.policy-72-ff-table td {
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 5px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-member-label-col {
|
||||||
|
width: 11%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-member-control-col {
|
||||||
|
width: 11%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-elders-col {
|
||||||
|
width: 22%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-min-col {
|
||||||
|
width: 23%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-max-col {
|
||||||
|
width: 23%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-pay-label-col {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-pay-check-col {
|
||||||
|
width: 12%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-age-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-elders-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
min-width: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.policy-72-ff-grid .ff-cell.ff-member-children .ff-children-select {
|
.policy-72-ff-table .ff-pay-wrap {
|
||||||
flex: 1;
|
display: inline-flex;
|
||||||
min-width: 0;
|
|
||||||
max-width: 110px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.policy-72-ff-grid .ff-cell.ff-min,
|
|
||||||
.policy-72-ff-grid .ff-cell.ff-max {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
justify-self: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.policy-72-ff-grid .ff-cell.ff-pay {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 10px;
|
|
||||||
justify-self: stretch;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.policy-72-ff-grid .ff-cell.ff-other-top {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: 6px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.policy-72-ff-grid .ff-other-select {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.policy-72-ff-grid .ff-grid-spacer {
|
|
||||||
min-height: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.policy-72-other-members-age-row {
|
.policy-72-other-members-age-row {
|
||||||
@ -109,20 +114,31 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.policy-72-other-members-age-row.policy-72-other-ages-open {
|
.policy-72-other-members-age-row.policy-72-other-ages-open {
|
||||||
display: contents;
|
display: table-row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.policy-72-ff-grid .ff-field-label {
|
.policy-72-ff-table .ff-field-label {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: #212529;
|
color: #212529;
|
||||||
}
|
}
|
||||||
|
|
||||||
.policy-72-ff-grid .ff-age-input {
|
.policy-72-ff-table .ff-pay-wrap .ff-field-label {
|
||||||
width: 64px;
|
white-space: nowrap;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-age-input {
|
||||||
|
width: 68px;
|
||||||
min-width: 48px;
|
min-width: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.policy-72-ff-table .ff-elders-count-input {
|
||||||
|
width: 64px;
|
||||||
|
background: #d3d3d3;
|
||||||
|
}
|
||||||
|
|
||||||
.button-like {
|
.button-like {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 8px 15px;
|
padding: 8px 15px;
|
||||||
@ -242,66 +258,99 @@ label {
|
|||||||
</div>
|
</div>
|
||||||
<div id="familyFloaterDiv_others_two" class="row mb-3" style="display:none;">
|
<div id="familyFloaterDiv_others_two" class="row mb-3" style="display:none;">
|
||||||
<div class="col-md-4 col-lg-3 d-none d-md-block"></div>
|
<div class="col-md-4 col-lg-3 d-none d-md-block"></div>
|
||||||
<div class="col-md-8 col-lg-9 policy-72-family-grid">
|
<div class="col-md-8 col-lg-8 policy-72-family-grid">
|
||||||
<input type="hidden" name="elder_member_count" id="member_count_others" value="0">
|
<table class="policy-72-ff-table">
|
||||||
<div class="policy-72-ff-grid">
|
<tbody>
|
||||||
<div class="ff-cell ff-member">
|
<tr>
|
||||||
<input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="self" id="self_others" checked>
|
<td class="ff-member-label-col">
|
||||||
<span class="text-dark fw-semibold">Self:</span>
|
<span class="text-dark fw-semibold">Self:</span>
|
||||||
</div>
|
</td>
|
||||||
<div class="ff-cell ff-min">
|
<td class="ff-member-control-col">
|
||||||
|
<input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="self" id="self_others" checked>
|
||||||
|
</td>
|
||||||
|
<td class="ff-min-col">
|
||||||
|
<div class="ff-age-wrap">
|
||||||
<span class="ff-field-label">Min Age:</span>
|
<span class="ff-field-label">Min Age:</span>
|
||||||
<input class="underline-input ff-age-input min_age" type="number" name="self_min_age" id="self_min_age_others" value="18">
|
<input class="underline-input ff-age-input min_age" type="number" name="self_min_age" id="self_min_age_others" value="18">
|
||||||
</div>
|
</div>
|
||||||
<div class="ff-cell ff-max">
|
</td>
|
||||||
|
<td class="ff-max-col">
|
||||||
|
<div class="ff-age-wrap">
|
||||||
<span class="ff-field-label">Max Age:</span>
|
<span class="ff-field-label">Max Age:</span>
|
||||||
<input class="underline-input ff-age-input max_age" type="number" name="self_max_age" id="self_max_age_others" value="60">
|
<input class="underline-input ff-age-input max_age" type="number" name="self_max_age" id="self_max_age_others" value="60">
|
||||||
</div>
|
</div>
|
||||||
<div class="ff-cell ff-pay">
|
</td>
|
||||||
|
<td class="ff-pay-label-col">
|
||||||
<span class="ff-field-label">Is Payable by employee:</span>
|
<span class="ff-field-label">Is Payable by employee:</span>
|
||||||
|
</td>
|
||||||
|
<td class="ff-pay-check-col">
|
||||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_self" id="is_payable_employee_for_self_others" value="1" checked>
|
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_self" id="is_payable_employee_for_self_others" value="1" checked>
|
||||||
</div>
|
</td>
|
||||||
<div class="ff-cell ff-member">
|
</tr>
|
||||||
<input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="spouse" id="spouse_others" checked>
|
<tr>
|
||||||
|
<td class="ff-member-label-col">
|
||||||
<span class="text-dark fw-semibold">Spouse:</span>
|
<span class="text-dark fw-semibold">Spouse:</span>
|
||||||
</div>
|
</td>
|
||||||
<div class="ff-cell ff-min">
|
<td class="ff-member-control-col">
|
||||||
|
<input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="spouse" id="spouse_others" checked>
|
||||||
|
</td>
|
||||||
|
<td class="ff-min-col">
|
||||||
|
<div class="ff-age-wrap">
|
||||||
<span class="ff-field-label">Min Age:</span>
|
<span class="ff-field-label">Min Age:</span>
|
||||||
<input class="underline-input ff-age-input min_age" type="number" name="spouse_min_age" id="spouse_min_age_others" value="18">
|
<input class="underline-input ff-age-input min_age" type="number" name="spouse_min_age" id="spouse_min_age_others" value="18">
|
||||||
</div>
|
</div>
|
||||||
<div class="ff-cell ff-max">
|
</td>
|
||||||
|
<td class="ff-max-col">
|
||||||
|
<div class="ff-age-wrap">
|
||||||
<span class="ff-field-label">Max Age:</span>
|
<span class="ff-field-label">Max Age:</span>
|
||||||
<input class="underline-input ff-age-input max_age" type="number" name="spouse_max_age" id="spouse_max_age_others" value="60">
|
<input class="underline-input ff-age-input max_age" type="number" name="spouse_max_age" id="spouse_max_age_others" value="60">
|
||||||
</div>
|
</div>
|
||||||
<div class="ff-cell ff-pay">
|
</td>
|
||||||
|
<td class="ff-pay-label-col">
|
||||||
<span class="ff-field-label">Is Payable by employee:</span>
|
<span class="ff-field-label">Is Payable by employee:</span>
|
||||||
|
</td>
|
||||||
|
<td class="ff-pay-check-col">
|
||||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_spouse" id="is_payable_employee_for_spouse_others" value="1">
|
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_spouse" id="is_payable_employee_for_spouse_others" value="1">
|
||||||
</div>
|
</td>
|
||||||
<div class="ff-cell ff-member ff-member-children">
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ff-member-label-col">
|
||||||
<span class="text-dark fw-semibold">Children:</span>
|
<span class="text-dark fw-semibold">Children:</span>
|
||||||
<select name="family_floaters[]" id="children_others" class="form-select form-control ff-children-select">
|
</td>
|
||||||
|
<td class="ff-member-control-col">
|
||||||
|
<select name="family_floaters[]" id="children_others" class="form-select form-control d-inline-block ms-2" style="width: 86px;">
|
||||||
<option value="0">None</option>
|
<option value="0">None</option>
|
||||||
<option value="1">1</option>
|
<option value="1">1</option>
|
||||||
<option value="2">2</option>
|
<option value="2">2</option>
|
||||||
<option value="3">3</option>
|
<option value="3">3</option>
|
||||||
<option value="4">4</option>
|
<option value="4">4</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</td>
|
||||||
<div class="ff-cell ff-min">
|
<td class="ff-min-col">
|
||||||
|
<div class="ff-age-wrap">
|
||||||
<span class="ff-field-label">Min Age:</span>
|
<span class="ff-field-label">Min Age:</span>
|
||||||
<input class="underline-input ff-age-input min_age" type="number" name="child_min_age" id="child_min_age_others" value="0">
|
<input class="underline-input ff-age-input min_age" type="number" name="child_min_age" id="child_min_age_others" value="0">
|
||||||
</div>
|
</div>
|
||||||
<div class="ff-cell ff-max">
|
</td>
|
||||||
|
<td class="ff-max-col">
|
||||||
|
<div class="ff-age-wrap">
|
||||||
<span class="ff-field-label">Max Age:</span>
|
<span class="ff-field-label">Max Age:</span>
|
||||||
<input class="underline-input ff-age-input max_age" type="number" name="child_max_age" id="child_max_age_others" value="25">
|
<input class="underline-input ff-age-input max_age" type="number" name="child_max_age" id="child_max_age_others" value="25">
|
||||||
</div>
|
</div>
|
||||||
<div class="ff-cell ff-pay">
|
</td>
|
||||||
|
<td class="ff-pay-label-col">
|
||||||
<span class="ff-field-label">Is Payable by employee:</span>
|
<span class="ff-field-label">Is Payable by employee:</span>
|
||||||
|
</td>
|
||||||
|
<td class="ff-pay-check-col">
|
||||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_child" id="is_payable_employee_for_child_others" value="1">
|
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_child" id="is_payable_employee_for_child_others" value="1">
|
||||||
</div>
|
</td>
|
||||||
<div class="ff-cell ff-other-top">
|
</tr>
|
||||||
<label class="form-label policy-term-main-label mb-1" for="family_floaters_others">Select Other Members:</label>
|
<tr>
|
||||||
<select name="family_floaters[]" id="family_floaters_others" class="form-select form-control ff-other-select">
|
<td colspan="2">
|
||||||
|
<span class="text-dark">Select Other Members:</span>
|
||||||
|
</td>
|
||||||
|
<td colspan="4">
|
||||||
|
<select name="family_floaters[]" id="family_floaters_others" class="form-select form-control" style="max-width: 430px;">
|
||||||
<option value="0">None</option>
|
<option value="0">None</option>
|
||||||
<option value="1P">Only one parent (Either Father / Mother)</option>
|
<option value="1P">Only one parent (Either Father / Mother)</option>
|
||||||
<option value="2P">Only two parents (Father+Mother)</option>
|
<option value="2P">Only two parents (Father+Mother)</option>
|
||||||
@ -311,23 +360,36 @@ label {
|
|||||||
<option value="EPORPIL">Either Parents or PIL (Parents or Parents In Law)</option>
|
<option value="EPORPIL">Either Parents or PIL (Parents or Parents In Law)</option>
|
||||||
<option value="4EPORPIL">Parents + PIL (Father + Mother + MIL + FIL)</option>
|
<option value="4EPORPIL">Parents + PIL (Father + Mother + MIL + FIL)</option>
|
||||||
</select>
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr id="other_members_age_row" class="policy-72-other-members-age-row">
|
||||||
|
<td colspan="2" class="ff-elders-col">
|
||||||
|
<div class="ff-elders-wrap">
|
||||||
|
<span class="ff-field-label">Elders Count:</span>
|
||||||
|
<input class="underline-input ff-elders-count-input" type="number" name="elder_member_count" id="member_count_others" value="0" readonly>
|
||||||
</div>
|
</div>
|
||||||
<div id="other_members_age_row" class="policy-72-other-members-age-row">
|
</td>
|
||||||
<div class="ff-cell ff-grid-spacer" aria-hidden="true"></div>
|
<td class="ff-min-col">
|
||||||
<div class="ff-cell ff-min">
|
<div class="ff-age-wrap">
|
||||||
<span class="ff-field-label">Min Age:</span>
|
<span class="ff-field-label">Min Age:</span>
|
||||||
<input class="underline-input ff-age-input" type="number" name="other_member_min_age" id="other_member_min_age_others" value="18">
|
<input class="underline-input ff-age-input" type="number" name="other_member_min_age" id="other_member_min_age_others" value="18">
|
||||||
</div>
|
</div>
|
||||||
<div class="ff-cell ff-max">
|
</td>
|
||||||
|
<td class="ff-max-col">
|
||||||
|
<div class="ff-age-wrap">
|
||||||
<span class="ff-field-label">Max Age:</span>
|
<span class="ff-field-label">Max Age:</span>
|
||||||
<input class="underline-input ff-age-input" type="number" name="other_member_max_age" id="other_member_max_age_others" value="60">
|
<input class="underline-input ff-age-input" type="number" name="other_member_max_age" id="other_member_max_age_others" value="60">
|
||||||
</div>
|
</div>
|
||||||
<div class="ff-cell ff-pay">
|
</td>
|
||||||
|
<td class="ff-pay-label-col">
|
||||||
<span class="ff-field-label">Is Payable by employee:</span>
|
<span class="ff-field-label">Is Payable by employee:</span>
|
||||||
|
</td>
|
||||||
|
<td class="ff-pay-check-col">
|
||||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_elders" id="is_payable_employee_for_elders_others" value="1">
|
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_elders" id="is_payable_employee_for_elders_others" value="1">
|
||||||
</div>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
</div>
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="append_html_for_other_policy_terms_72_after_family"></div>
|
<div id="append_html_for_other_policy_terms_72_after_family"></div>
|
||||||
@ -754,15 +816,16 @@ function si_keup_num_to_word2(input) {
|
|||||||
function syncPolicy72ElderMemberCount() {
|
function syncPolicy72ElderMemberCount() {
|
||||||
var map = { '0': 0, '1P': 1, '2P': 2, '1PIL': 1, '2PIL': 2, '2EPORPIL': 2, 'EPORPIL': 1, '4EPORPIL': 4 };
|
var map = { '0': 0, '1P': 1, '2P': 2, '1PIL': 1, '2PIL': 2, '2EPORPIL': 2, 'EPORPIL': 1, '4EPORPIL': 4 };
|
||||||
var v = $('#family_floaters_others').val();
|
var v = $('#family_floaters_others').val();
|
||||||
$('#member_count_others').val(map[v] !== undefined ? map[v] : 0);
|
var elderCount = map[v] !== undefined ? map[v] : 0;
|
||||||
|
$('#member_count_others').val(elderCount);
|
||||||
}
|
}
|
||||||
|
|
||||||
function togglePolicy72OtherMembersAgeRow() {
|
function togglePolicy72OtherMembersAgeRow() {
|
||||||
var v = $('#family_floaters_others').val();
|
var v = $('#family_floaters_others').val();
|
||||||
if (v && v !== '0') {
|
if (v && v !== '0') {
|
||||||
$('#other_members_age_row').addClass('policy-72-other-ages-open');
|
$('#other_members_age_row').addClass('policy-72-other-ages-open').css('display', 'table-row');
|
||||||
} else {
|
} else {
|
||||||
$('#other_members_age_row').removeClass('policy-72-other-ages-open');
|
$('#other_members_age_row').removeClass('policy-72-other-ages-open').css('display', 'none');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user