<div class="filter-group">
<div class="form-item custom-select">
<label for="170a1841-be79-3400-3e8f-d8736524ed83">Producer</label>
<select id="170a1841-be79-3400-3e8f-d8736524ed83" name="170a1841-be79-3400-3e8f-d8736524ed83" 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="43784e41-e6d8-ba26-a3e5-4c5c82d167ec">Colour</label>
<select id="43784e41-e6d8-ba26-a3e5-4c5c82d167ec" name="43784e41-e6d8-ba26-a3e5-4c5c82d167ec" 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="36876143-4f80-12fe-8912-7bbc65eccfe4">Country</label>
<select id="36876143-4f80-12fe-8912-7bbc65eccfe4" name="36876143-4f80-12fe-8912-7bbc65eccfe4" 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="116ec8ff-032c-c76e-178f-84904d934e90">Dish</label>
<select id="116ec8ff-032c-c76e-178f-84904d934e90" name="116ec8ff-032c-c76e-178f-84904d934e90" 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="2431e987-1a31-a4e2-7640-7c8faabe4493">Region</label>
<select id="2431e987-1a31-a4e2-7640-7c8faabe4493" name="2431e987-1a31-a4e2-7640-7c8faabe4493" 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="f29c0fb6-f13f-ac90-df02-a04e8d14051c">District</label>
<select id="f29c0fb6-f13f-ac90-df02-a04e8d14051c" name="f29c0fb6-f13f-ac90-df02-a04e8d14051c" 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="79c1490d-2bac-915d-8509-b0c8220129f6">Grape</label>
<select id="79c1490d-2bac-915d-8509-b0c8220129f6" name="79c1490d-2bac-915d-8509-b0c8220129f6" 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="3f703087-35b7-da98-4434-81ca7812dc27">Style</label>
<select id="3f703087-35b7-da98-4434-81ca7812dc27" name="3f703087-35b7-da98-4434-81ca7812dc27" 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="ec9fce94-b56f-1c8e-ebdc-b58e2b017a88">Type</label>
<select id="ec9fce94-b56f-1c8e-ebdc-b58e2b017a88" name="ec9fce94-b56f-1c8e-ebdc-b58e2b017a88" 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="84f76fb2-2613-38da-50f5-199fc83f3edf">Weight</label>
<select id="84f76fb2-2613-38da-50f5-199fc83f3edf" name="84f76fb2-2613-38da-50f5-199fc83f3edf" 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="8c312fff-6681-2837-5fb9-d964ef693a89">Drinkability</label>
<select id="8c312fff-6681-2837-5fb9-d964ef693a89" name="8c312fff-6681-2837-5fb9-d964ef693a89" 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="12aea1c7-e18d-a1f1-39a4-4cebcebef9ce">Purchase price</label>
<select id="12aea1c7-e18d-a1f1-39a4-4cebcebef9ce" name="12aea1c7-e18d-a1f1-39a4-4cebcebef9ce" 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="d60b0c51-6acc-5f1e-f8d2-b13ef5524972">Bottle size</label>
<select id="d60b0c51-6acc-5f1e-f8d2-b13ef5524972" name="d60b0c51-6acc-5f1e-f8d2-b13ef5524972" 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="e2cdbefe-10f0-dfdb-9aba-69847a04778a">Supplier</label>
<select id="e2cdbefe-10f0-dfdb-9aba-69847a04778a" name="e2cdbefe-10f0-dfdb-9aba-69847a04778a" 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="5dc33323-1f9e-dfeb-ab37-cbc7eee48807">Wine list price</label>
<select id="5dc33323-1f9e-dfeb-ab37-cbc7eee48807" name="5dc33323-1f9e-dfeb-ab37-cbc7eee48807" 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="1bf44639-0e94-335e-809d-464028777bc7">Bottles sold</label>
<select id="1bf44639-0e94-335e-809d-464028777bc7" name="1bf44639-0e94-335e-809d-464028777bc7" 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 class="form-item custom-select">
<label for="3ab864c5-8840-c40b-c0f0-52383310203c">Stored at</label>
<select id="3ab864c5-8840-c40b-c0f0-52383310203c" name="3ab864c5-8840-c40b-c0f0-52383310203c" multiple class="custom-select">
<option value="option-0">Shelf 1</option>
<option value="option-1">Shelf 2</option>
<option value="option-2">Shelf 3</option>
<option value="option-3">Shelf 4</option>
<option value="option-4">Shelf 5</option>
<option value="option-5">Shelf 6</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 supplier id=(random)}}
{{> @form-item-select wine-list-price id=(random)}}
{{> @form-item-select bottles-sold id=(random)}}
{{> @form-item-select stored-at 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.