Criteria
This is a really custom component made for the old Segmentation page.
| Last update: | () |
| Message | refactor(icon): use new component |
| Committer: | David Gyenes |
| Version history | |
Default
<table class="e-criteria">
<tbody>
<tr>
<td id="standard1" width="50" valign="bottom">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="plus" color="white"></e-icon>
</div>
</td>
<td align="left" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody id="table_0_children">
<tr id="tr_2">
<td id="td_2" class="e-criteria__item">
<table width="100%" class="table_condition">
<tbody id="table_2">
<tr>
<td id="td_2_right">
<table width="100%">
<tbody id="table_2_children">
<tr id="tr_1">
<td id="td_1">
<table width="100%" class="table_crit">
<tbody id="table_1">
<tr>
<td style="white-space: nowrap;">
<select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
<option value>
-- select field --
</option>
<option value="10">
Address
</option>
</select>
<select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
<option value>
N/A
</option>
</select>
<span id="crit_1_td">
<input id="crit_1" name="crit_1" type="text" value onchange="critChanged(1)" class="e-input e-input-large">
</span>
</td>
<td align="right" width="1">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus" color="white"></e-icon>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="tr_2">
<td id="td_2" class="e-criteria__item">
<table width="100%" class="table_condition">
<tbody id="table_2">
<tr>
<td id="td_2_right">
<table width="100%">
<tbody id="table_2_children">
<tr id="tr_1">
<td id="td_1">
<table width="100%" class="table_crit">
<tbody id="table_1">
<tr>
<td style="white-space: nowrap;">
<select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
<option value>
-- select field --
</option>
<option value="10">
Address
</option>
</select>
<select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
<option value>
N/A
</option>
</select>
<span id="crit_1_td">
<input id="crit_1" name="crit_1" type="text" value onchange="critChanged(1)" class="e-input e-input-large">
</span>
</td>
<td align="right" width="1">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus" color="white"></e-icon>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="tr_2">
<td id="td_2" class="e-criteria__item">
<table width="100%" class="table_condition">
<tbody id="table_2">
<tr>
<td id="td_2_right">
<table width="100%">
<tbody id="table_2_children">
<tr id="tr_1">
<td id="td_1">
<table width="100%" class="table_crit">
<tbody id="table_1">
<tr>
<td style="white-space: nowrap;">
<select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
<option value>
-- select field --
</option>
<option value="10">
Address
</option>
</select>
<select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
<option value>
N/A
</option>
</select>
<span id="crit_1_td">
<input id="crit_1" name="crit_1" type="text" value onchange="critChanged(1)" class="e-input e-input-large">
</span>
</td>
<td align="right" width="1">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus" color="white"></e-icon>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="e-criteria">
<tbody>
<tr>
<td id="standard1" width="50" valign="bottom">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="plus" color="white"></e-icon>
</div>
</td>
<td align="left" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody id="table_0_children">
<tr id="tr_2">
<td id="td_2" class="e-criteria__item">
<table width="100%" class="table_condition">
<tbody id="table_2">
<tr>
<td id="td_2_right">
<table width="100%">
<tbody id="table_2_children">
<tr id="tr_1">
<td id="td_1">
<table width="100%" class="table_crit">
<tbody id="table_1">
<tr>
<td style="white-space: nowrap;">
<select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
<option value="">-- select field --</option>
<option value="10">Address</option>
</select>
<select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
<option value="">N/A</option>
</select><span id="crit_1_td">
<input id="crit_1" name="crit_1" type="text" value="" onchange="critChanged(1)" class="e-input e-input-large"></span>
</td>
<td align="right" width="1">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus" color="white"></e-icon>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="tr_2">
<td id="td_2" class="e-criteria__item">
<table width="100%" class="table_condition">
<tbody id="table_2">
<tr>
<td id="td_2_right">
<table width="100%">
<tbody id="table_2_children">
<tr id="tr_1">
<td id="td_1">
<table width="100%" class="table_crit">
<tbody id="table_1">
<tr>
<td style="white-space: nowrap;">
<select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
<option value="">-- select field --</option>
<option value="10">Address</option>
</select>
<select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
<option value="">N/A</option>
</select><span id="crit_1_td">
<input id="crit_1" name="crit_1" type="text" value="" onchange="critChanged(1)" class="e-input e-input-large"></span>
</td>
<td align="right" width="1">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus" color="white"></e-icon>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="tr_2">
<td id="td_2" class="e-criteria__item">
<table width="100%" class="table_condition">
<tbody id="table_2">
<tr>
<td id="td_2_right">
<table width="100%">
<tbody id="table_2_children">
<tr id="tr_1">
<td id="td_1">
<table width="100%" class="table_crit">
<tbody id="table_1">
<tr>
<td style="white-space: nowrap;">
<select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
<option value="">-- select field --</option>
<option value="10">Address</option>
</select>
<select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
<option value="">N/A</option>
</select><span id="crit_1_td">
<input id="crit_1" name="crit_1" type="text" value="" onchange="critChanged(1)" class="e-input e-input-large"></span>
</td>
<td align="right" width="1">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus" color="white"></e-icon>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>|
|
|
Without table layout
<div class="e-criteria e-criteria-noscroll">
<div class="e-criteria__item e-criteria__item-table">
<div class="e-criteria__title">
Criterion:
</div>
<div class="e-criteria__crits">
<ul class="e-list">
<li>
Email response (open or click)
</li>
<li>
Responded via email
</li>
<li>
No time restriction
</li>
<li>
Email response (open or click)
</li>
<li>
Responded via email
</li>
<li>
No time restriction
</li>
</ul>
</div>
<div class="e-criteria__actions">
<div class="e-buttongroup float-right">
<div class="e-btn">
Edit
</div>
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus"></e-icon>
</div>
</div>
</div>
</div>
</div>
<div class="e-criteria e-criteria-noscroll">
<div class="e-criteria__item e-criteria__item-table">
<div class="e-criteria__title">Criterion:</div>
<div class="e-criteria__crits">
<ul class="e-list">
<li>Email response (open or click)</li>
<li>Responded via email</li>
<li>No time restriction</li>
<li>Email response (open or click)</li>
<li>Responded via email</li>
<li>No time restriction</li>
</ul>
</div>
<div class="e-criteria__actions">
<div class="e-buttongroup float-right">
<div class="e-btn">Edit</div>
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus"></e-icon>
</div>
</div>
</div>
</div>
</div>Criterion:
- Email response (open or click)
- Responded via email
- No time restriction
- Email response (open or click)
- Responded via email
- No time restriction