<div class="table-filter">
<div class="h-container">
<div class="grid grid--middle-xs">
<div class="grid__col grid__col--lg-7">
<div class="filter js-filter table-filter__filter">
<ul class="filter__list">
<li class="filter__list-item">
<button class="filter-item js-filter-item is-selected" type="button" data-key="all">
<span class="filter-item__inner">
<span class="filter-item__text">Kõik</span>
</span>
</button>
</li>
<li class="filter__list-item">
<button class="filter-item js-filter-item" type="button" data-key="awaiting">
<span class="filter-item__inner">
<span class="filter-item__bullet">
<span class="filter-item__count">2</span>
</span>
<span class="filter-item__text">Kinnituse ootel</span>
</span>
</button>
</li>
<li class="filter__list-item">
<button class="filter-item js-filter-item" type="button" data-key="in-progress">
<span class="filter-item__inner">
<span class="filter-item__bullet">
<span class="filter-item__count">3</span>
</span>
<span class="filter-item__text">Koostamisel</span>
</span>
</button>
</li>
<li class="filter__list-item">
<button class="filter-item js-filter-item" type="button" data-key="confirmed">
<span class="filter-item__inner">
<span class="filter-item__bullet">
<span class="filter-item__count">5</span>
</span>
<span class="filter-item__text">Kinnitatud</span>
</span>
</button>
</li>
</ul>
<button class="filter__button filter__button--left is-hidden" type="button" aria-label="Scroll left">
<svg class="icon filter__button-icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
</svg>
</button>
<button class="filter__button filter__button--right is-hidden" type="button" aria-label="Scroll right">
<svg class="icon filter__button-icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
</svg>
</button>
</div>
</div>
<div class="grid__col grid__col--lg-5">
<div class="grid grid--middle-xs grid--between-xs grid--start-lg grid--no-wrap-lg">
<div class="grid__col grid__col--xs h-hidden-lg">
<button class="search-toggle table-filter__search-toggle" type="button">
<span class="search-toggle__inner">
<svg class="icon search-toggle__icon search-toggle__icon--closed" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
</svg>
<svg class="icon search-toggle__icon search-toggle__icon--open" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
</svg>
<span class="search-toggle__text">Otsi</span>
</span>
</button>
</div>
<div class="grid__col grid__col--xs grid__col--min-lg">
<div class="dropdown js-dropdown dropdown--trigger-icon-animated table-filter__dropdown" data-offset-x="0" data-offset-y="0">
<button type="button" class="button button--tiny dropdown__trigger button--icon-right">
<span class="button__inner">
<svg class="icon button__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
<span class="button__text">Lae info alla</span>
</span>
</button>
<div class="dropdown__content">
<div class="dropdown__content-inner">
<p>Lae info alla</p>
<ul class="dropdown__options">
<li class="dropdown__option-item">
<a class="dropdown__option-link" href="#">
<svg class="icon dropdown__option-icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#csv"></use>
</svg>
<span class="dropdown__text">CSV</span>
</a>
</li>
<li class="dropdown__option-item">
<a class="dropdown__option-link" href="#">
<svg class="icon dropdown__option-icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#excel"></use>
</svg>
<span class="dropdown__text">Excel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="grid__col grid__col--first-lg grid__col--max-lg">
<div class="search table-filter__search">
<div class="search__inner">
<div class="search__textfield-wrapper">
<div class="textfield search__textfield">
<label class="textfield__label h-visually-hidden" for="search1">
Otsing
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="search1" name="search" placeholder="Otsi arvete hulgast...">
</div>
</div>
<button class="search__clear js-search-clear" type="button" aria-label="Tühjenda">
<span class="search__clear-inner">
<svg class="icon search__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
</svg>
</span>
</button>
</div>
<button class="search__button search__button--toggle js-search-toggle" type="button" aria-label="Otsi">
<span class="search__button-inner">
<svg class="icon search__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
</svg>
</span>
</button>
<button class="search__button search__button--submit" type="submit" aria-label="Otsi">
<span class="search__button-inner">
<svg class="icon search__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% set BEM -%}
table-filter
{%- if modifier %} {{ modifier }}{% endif %}
{%- if class %} {{ class }}{% endif %}
{% endset %}
<div class="{{ BEM }}">
<div class="h-container">
<div class="grid grid--middle-xs">
<div class="grid__col grid__col--lg-7">
{% include '@filter' with { class: 'table-filter__filter', modifier: '', data: data.filter } %}
</div>
<div class="grid__col grid__col--lg-5">
<div class="grid grid--middle-xs grid--between-xs grid--start-lg grid--no-wrap-lg">
<div class="grid__col grid__col--xs h-hidden-lg">
{% include '@search-toggle' with { class: 'table-filter__search-toggle', modifier: '', data: data.searchToggle } %}
</div>
<div class="grid__col grid__col--xs grid__col--min-lg">
{% include '@dropdown' with { class: 'table-filter__dropdown', modifier: '', data: data.dropdown } %}
</div>
<div class="grid__col grid__col--first-lg grid__col--max-lg">
{% include '@search' with { class: 'table-filter__search', modifier: '', data: data.search } %}
</div>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"filter": {
"items": [
{
"key": "all",
"isSelected": true,
"text": "Kõik"
},
{
"key": "awaiting",
"text": "Kinnituse ootel",
"count": 2
},
{
"key": "in-progress",
"text": "Koostamisel",
"count": 3
},
{
"key": "confirmed",
"text": "Kinnitatud",
"count": 5
}
]
},
"search": {
"textfield": {
"label": "Otsing",
"id": "search1",
"name": "search",
"placeholder": "Otsi arvete hulgast...",
"isLabelHidden": true
},
"clearText": "Tühjenda",
"searchText": "Otsi",
"submitText": "Otsi"
},
"dropdown": {
"buttonModifier": "button--tiny",
"trigger": {
"text": "Lae info alla",
"icon": "chevron-bottom",
"iconPosition": "right"
},
"triggerIconAnimated": true,
"content": "<p>Lae info alla</p>",
"options": [
{
"url": "#",
"icon": "csv",
"text": "CSV"
},
{
"url": "#",
"icon": "excel",
"text": "Excel"
}
]
},
"searchToggle": {
"text": "Otsi"
}
}
}
.table-filter {
@include bp(md-min) {
padding: 18px 0;
}
}
.table-filter__filter {
@media only screen and (max-width: ($bp-md-min - 1)) {
margin-right: -$container-padding;
margin-left: -$container-padding;
padding-bottom: 6px;
}
}
.table-filter__search-toggle {
@media only screen and (max-width: ($bp-lg-min - 1)) {
margin-left: -$container-padding;
}
}
import './table-filter.scss';