<div class="filter-group">
<div class="form-item custom-select">
<label for="fcc0d4f5-8db2-195c-44bf-99629329cf9a">Producer</label>
<select id="fcc0d4f5-8db2-195c-44bf-99629329cf9a" name="fcc0d4f5-8db2-195c-44bf-99629329cf9a" multiple class="custom-select">
<option value="option-0">Producer 1</option>
<option value="option-1">Producer 2</option>
<option value="option-2">Producer 3</option>
</select>
</div>
<div class="form-item custom-select">
<label for="61bf9b74-c018-0abe-396b-6de1d2047451">Colour</label>
<select id="61bf9b74-c018-0abe-396b-6de1d2047451" name="61bf9b74-c018-0abe-396b-6de1d2047451" multiple class="custom-select">
<option value="option-0">Red</option>
<option value="option-1">White</option>
<option value="option-2">Rosé</option>
</select>
</div>
<div class="form-item custom-select">
<label for="ed76dede-6349-5e8f-92a7-1ec5611070f2">Country</label>
<select id="ed76dede-6349-5e8f-92a7-1ec5611070f2" name="ed76dede-6349-5e8f-92a7-1ec5611070f2" multiple class="custom-select">
<option value="option-0">Argentina</option>
<option value="option-1">Australia</option>
<option value="option-2">France</option>
<option value="option-3">Germany</option>
<option value="option-4">Hungary</option>
<option value="option-5">Italy</option>
<option value="option-6">New Zealand</option>
<option value="option-7">South Africa</option>
<option value="option-8">United States</option>
</select>
</div>
<div class="form-item custom-select">
<label for="b0d69553-14af-3ac7-e7ae-56681ebb347f">Dish</label>
<select id="b0d69553-14af-3ac7-e7ae-56681ebb347f" name="b0d69553-14af-3ac7-e7ae-56681ebb347f" multiple class="custom-select">
<option value="option-0">Bruschetta con pomodori</option>
<option value="option-1">Carpaccio di cervo</option>
<option value="option-2">Parmigiana della nonna</option>
<option value="option-3">Tagliere casereccio</option>
<option value="option-4">Tournedos Rossini</option>
<option value="option-5">Carne de Ávila</option>
<option value="option-6">Tourtière</option>
</select>
</div>
</div>
<div class="simple-accordion">
<div class="simple-accordion-item">
<p class="simple-accordion-title">
<span>Show more filters</span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#angle" />
</svg>
</p>
<div class="collapsible-content">
<div class="simple-accordion-inner-content">
<div class="filter-group">
<div class="form-item custom-select">
<label for="e40edda6-595e-7ae8-9aa1-52330b1109c8">Region</label>
<select id="e40edda6-595e-7ae8-9aa1-52330b1109c8" name="e40edda6-595e-7ae8-9aa1-52330b1109c8" multiple class="custom-select">
<option value="option-0">Region 1</option>
<option value="option-1">Region 2</option>
<option value="option-2">Region 3</option>
</select>
</div>
<div class="form-item custom-select">
<label for="e52ccc98-03d7-b2c7-2c0d-82e8f48baba2">District</label>
<select id="e52ccc98-03d7-b2c7-2c0d-82e8f48baba2" name="e52ccc98-03d7-b2c7-2c0d-82e8f48baba2" multiple class="custom-select">
<option value="option-0">District 1</option>
<option value="option-1">District 2</option>
<option value="option-2">District 3</option>
</select>
</div>
<div class="form-item custom-select">
<label for="79a89ffc-813a-27b3-e7b1-839ffacea635">Grape</label>
<select id="79a89ffc-813a-27b3-e7b1-839ffacea635" name="79a89ffc-813a-27b3-e7b1-839ffacea635" multiple class="custom-select">
<option value="option-0">Chardonnay</option>
<option value="option-1">Cabernet Sauvignon</option>
<option value="option-2">Grenache</option>
<option value="option-3">Syrah</option>
<option value="option-4">Merlot</option>
<option value="option-5">Sangiovese</option>
<option value="option-6">Pinot Noir</option>
</select>
</div>
<div class="form-item custom-select">
<label for="efebe476-1ee5-0b2f-6e0c-b380316f0c8b">Style</label>
<select id="efebe476-1ee5-0b2f-6e0c-b380316f0c8b" name="efebe476-1ee5-0b2f-6e0c-b380316f0c8b" multiple class="custom-select">
<option value="option-0">Dry</option>
<option value="option-1">Medium dry</option>
<option value="option-2">Medium Sweet</option>
<option value="option-3">Sweet</option>
</select>
</div>
<div class="form-item custom-select">
<label for="4c0e209e-c9d8-0343-d004-ad84a9981e2e">Type</label>
<select id="4c0e209e-c9d8-0343-d004-ad84a9981e2e" name="4c0e209e-c9d8-0343-d004-ad84a9981e2e" multiple class="custom-select">
<option value="option-0">Still</option>
<option value="option-1">Sparkling</option>
<option value="option-2">Fortified</option>
</select>
</div>
<div class="form-item custom-select">
<label for="e0f6305a-51cb-acb0-9ac3-13ca2851cce0">Weight</label>
<select id="e0f6305a-51cb-acb0-9ac3-13ca2851cce0" name="e0f6305a-51cb-acb0-9ac3-13ca2851cce0" multiple class="custom-select">
<option value="option-0">Light bodied</option>
<option value="option-1">Medium bodied</option>
<option value="option-2">Light Bodied to Full bodied</option>
<option value="option-3">Medium bodied to Full bodied</option>
<option value="option-4">Full bodied</option>
</select>
</div>
<div class="form-item custom-select">
<label for="528161e4-315b-284e-584b-c6e5ea5bf448">Drinkability</label>
<select id="528161e4-315b-284e-584b-c6e5ea5bf448" name="528161e4-315b-284e-584b-c6e5ea5bf448" multiple class="custom-select">
<option value="option-0">Old</option>
<option value="option-1">Early</option>
<option value="option-2">Mature</option>
<option value="option-3">Late</option>
<option value="option-4">Young</option>
</select>
</div>
<div class="form-item custom-select">
<label for="1e1a5962-1cd1-b7e2-31da-cce74f6984b9">Purchase price</label>
<select id="1e1a5962-1cd1-b7e2-31da-cce74f6984b9" name="1e1a5962-1cd1-b7e2-31da-cce74f6984b9" multiple class="custom-select">
<option value="option-0">0 - 199</option>
<option value="option-1">200 - 399</option>
<option value="option-2">400 - 499</option>
<option value="option-3">500 - 599</option>
<option value="option-4">600 - 699</option>
<option value="option-5">700 - 799</option>
<option value="option-6">800 - 999</option>
<option value="option-7">1000 - 1499</option>
<option value="option-8">1500 - 1999</option>
<option value="option-9">2000 - 2999</option>
<option value="option-10">3000 - 9999</option>
<option value="option-11">10000 and up</option>
</select>
</div>
<div class="form-item custom-select">
<label for="c9d1288c-6d30-4bb7-4b74-e2a07e879f81">Bottle size</label>
<select id="c9d1288c-6d30-4bb7-4b74-e2a07e879f81" name="c9d1288c-6d30-4bb7-4b74-e2a07e879f81" multiple class="custom-select">
<option value="option-0">37,5 cl</option>
<option value="option-1">75 cl</option>
<option value="option-2">150 cl</option>
<option value="option-3">300 cl</option>
</select>
</div>
<div class="form-item custom-select">
<label for="a9a511d7-e843-9521-8038-40c3d501e2d1">Case size</label>
<select id="a9a511d7-e843-9521-8038-40c3d501e2d1" name="a9a511d7-e843-9521-8038-40c3d501e2d1" multiple class="custom-select">
<option value="option-0">6 bottles</option>
<option value="option-1">12 bottles</option>
<option value="option-2">18 bottles</option>
<option value="option-3">24 bottles</option>
</select>
</div>
<div class="form-item custom-select">
<label for="094c957f-2791-89ef-cfea-cc216f7128c8">Supplier</label>
<select id="094c957f-2791-89ef-cfea-cc216f7128c8" name="094c957f-2791-89ef-cfea-cc216f7128c8" multiple class="custom-select">
<option value="option-0">Supplier 1</option>
<option value="option-1">Supplier 2</option>
<option value="option-2">Supplier 3</option>
</select>
</div>
<div class="form-item custom-select">
<label for="f2decf17-49f2-ea62-b1b2-e6dd7018cf7b">Wine list price</label>
<select id="f2decf17-49f2-ea62-b1b2-e6dd7018cf7b" name="f2decf17-49f2-ea62-b1b2-e6dd7018cf7b" multiple class="custom-select">
<option value="option-0">0 - 399</option>
<option value="option-1">400 - 499</option>
<option value="option-2">500 - 599</option>
<option value="option-3">600 - 699</option>
<option value="option-4">700 - 799</option>
<option value="option-5">800 - 999</option>
<option value="option-6">1000 - 1499</option>
<option value="option-7">1500 - 1999</option>
<option value="option-8">2000 - 2999</option>
<option value="option-9">3000 - 9999</option>
<option value="option-10">10000 and up</option>
</select>
</div>
<div class="form-item custom-select">
<label for="22d55f15-b527-e31c-0c68-180b9abbcfb0">Bottles sold</label>
<select id="22d55f15-b527-e31c-0c68-180b9abbcfb0" name="22d55f15-b527-e31c-0c68-180b9abbcfb0" multiple class="custom-select">
<option value="option-0">Today</option>
<option value="option-1">Last 7 days</option>
<option value="option-2">Last 30 days</option>
<option value="option-3">Last 365 days</option>
<option value="option-4">WTD</option>
<option value="option-5">MTD</option>
<option value="option-6">YTD</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="filter-group">
{{> @form-item-select producer id=(random)}}
{{> @form-item-select colour id=(random)}}
{{> @form-item-select country id=(random)}}
{{> @form-item-select dish id=(random)}}
</div>
{{#> @simple-accordion title="Show more filters" }}
<div class="filter-group">
{{> @form-item-select region id=(random)}}
{{> @form-item-select district id=(random)}}
{{> @form-item-select grape id=(random)}}
{{> @form-item-select style id=(random)}}
{{> @form-item-select type id=(random)}}
{{> @form-item-select weight id=(random)}}
{{> @form-item-select drinkability id=(random)}}
{{> @form-item-select purchase-price id=(random)}}
{{> @form-item-select bottle-size id=(random)}}
{{> @form-item-select case-size id=(random)}}
{{> @form-item-select supplier id=(random)}}
{{> @form-item-select wine-list-price id=(random)}}
{{> @form-item-select bottles-sold id=(random)}}
</div>
{{/ @simple-accordion }}
{
"producer": {
"label": "Producer",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Producer 1"
},
{
"option": "Producer 2"
},
{
"option": "Producer 3"
}
]
},
"colour": {
"label": "Colour",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Red"
},
{
"option": "White"
},
{
"option": "Rosé"
}
]
},
"country": {
"label": "Country",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Argentina"
},
{
"option": "Australia"
},
{
"option": "France"
},
{
"option": "Germany"
},
{
"option": "Hungary"
},
{
"option": "Italy"
},
{
"option": "New Zealand"
},
{
"option": "South Africa"
},
{
"option": "United States"
}
]
},
"dish": {
"label": "Dish",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Bruschetta con pomodori"
},
{
"option": "Carpaccio di cervo"
},
{
"option": "Parmigiana della nonna"
},
{
"option": "Tagliere casereccio"
},
{
"option": "Tournedos Rossini"
},
{
"option": "Carne de Ávila"
},
{
"option": "Tourtière"
}
]
},
"bottle-size": {
"label": "Bottle size",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "37,5 cl"
},
{
"option": "75 cl"
},
{
"option": "150 cl"
},
{
"option": "300 cl"
}
]
},
"case-size": {
"label": "Case size",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "6 bottles"
},
{
"option": "12 bottles"
},
{
"option": "18 bottles"
},
{
"option": "24 bottles"
}
]
},
"weight": {
"label": "Weight",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Light bodied"
},
{
"option": "Medium bodied"
},
{
"option": "Light Bodied to Full bodied"
},
{
"option": "Medium bodied to Full bodied"
},
{
"option": "Full bodied"
}
]
},
"style": {
"label": "Style",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Dry"
},
{
"option": "Medium dry"
},
{
"option": "Medium Sweet"
},
{
"option": "Sweet"
}
]
},
"drinkability": {
"label": "Drinkability",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Old"
},
{
"option": "Early"
},
{
"option": "Mature"
},
{
"option": "Late"
},
{
"option": "Young"
}
]
},
"type": {
"label": "Type",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Still"
},
{
"option": "Sparkling"
},
{
"option": "Fortified"
}
]
},
"grape": {
"label": "Grape",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Chardonnay"
},
{
"option": "Cabernet Sauvignon"
},
{
"option": "Grenache"
},
{
"option": "Syrah"
},
{
"option": "Merlot"
},
{
"option": "Sangiovese"
},
{
"option": "Pinot Noir"
}
]
},
"district": {
"label": "District",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "District 1"
},
{
"option": "District 2"
},
{
"option": "District 3"
}
]
},
"supplier": {
"label": "Supplier",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Supplier 1"
},
{
"option": "Supplier 2"
},
{
"option": "Supplier 3"
}
]
},
"bottles-sold": {
"label": "Bottles sold",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Today"
},
{
"option": "Last 7 days"
},
{
"option": "Last 30 days"
},
{
"option": "Last 365 days"
},
{
"option": "WTD"
},
{
"option": "MTD"
},
{
"option": "YTD"
}
]
},
"region": {
"label": "Region",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Region 1"
},
{
"option": "Region 2"
},
{
"option": "Region 3"
}
]
},
"purchase-price": {
"label": "Purchase price",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "0 - 199"
},
{
"option": "200 - 399"
},
{
"option": "400 - 499"
},
{
"option": "500 - 599"
},
{
"option": "600 - 699"
},
{
"option": "700 - 799"
},
{
"option": "800 - 999"
},
{
"option": "1000 - 1499"
},
{
"option": "1500 - 1999"
},
{
"option": "2000 - 2999"
},
{
"option": "3000 - 9999"
},
{
"option": "10000 and up"
}
]
},
"wine-list-price": {
"label": "Wine list price",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "0 - 399"
},
{
"option": "400 - 499"
},
{
"option": "500 - 599"
},
{
"option": "600 - 699"
},
{
"option": "700 - 799"
},
{
"option": "800 - 999"
},
{
"option": "1000 - 1499"
},
{
"option": "1500 - 1999"
},
{
"option": "2000 - 2999"
},
{
"option": "3000 - 9999"
},
{
"option": "10000 and up"
}
]
},
"stored-at": {
"label": "Stored at",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Shelf 1"
},
{
"option": "Shelf 2"
},
{
"option": "Shelf 3"
},
{
"option": "Shelf 4"
},
{
"option": "Shelf 5"
},
{
"option": "Shelf 6"
}
]
},
"users-filter": {
"label": "Filter",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "gordon"
},
{
"option": "ben"
},
{
"option": "andrey"
},
{
"option": "alfredo"
},
{
"option": "Gordon Ramsay"
},
{
"option": "Ben Bernanke"
},
{
"option": "Andrey Ivanov"
},
{
"option": "Alfredo Linguini"
},
{
"option": "gordon@gusteaus.fr"
},
{
"option": "ben@gusteaus.fr"
},
{
"option": "andrey@gusteaus.fr"
},
{
"option": "alfredo@gusteaus.fr"
}
]
},
"role": {
"label": "Role",
"multiple": true,
"modifier": "custom-select",
"options": [
{
"option": "Administrator"
},
{
"option": "Economy"
},
{
"option": "Sommelier"
},
{
"option": "Server"
}
]
}
}
/**
* Filter form
*/
@media screen {
@supports (display: grid) {
.filter-group {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
}
@media (min-width: 32em) {
.filter-group {
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
}
.filter-group .form-item + .form-item {
margin-top: 0;
}
.filter-form .submit-area {
grid-column: 1 / -1;
}
}
/**
* Choices custom styling
*/
.choices__inner * + *,
.choices__item {
margin-top: 0;
}
.choices__inner,
.choices__input {
background-color: var(--input-bg);
font-size: unset;
}
.choices__inner {
border-color: var(--input-accent);
border-radius: 0;
min-height: auto;
padding: 0.125rem 0.25rem;
}
.choices__input {
margin-bottom: 0;
border: 0 !important;
}
.choices__list--dropdown {
z-index: 2;
}
.choices__heading {
background-color: unset;
border-bottom-color: var(--light-grey);
color: unset;
margin-top: 0.4rem;
}
.choices__list--multiple .choices__item {
background-color: var(--choices-item);
border: 0;
border-radius: 3px;
padding: 0 0.5rem;
}
.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button {
border-left: 0;
box-shadow: none;
padding-left: 0.5rem;
}
}
/**
* Initialize Choices for our special little filter
*/
/* global Choices */
(function() {
const filterCategories = document.querySelectorAll('select.custom-select');
// Stop if no element is present
if (!filterCategories.length) return;
new Choices('select.custom-select', {
removeItemButton: true,
shouldSort: false,
});
})();
No notes defined.