Универсальная форма для фильтра от Lazydev

Предлагаю вашему вниманию универсальную адаптивную форму для модуля фильтра по дополнительным полям DLE Filter от LazyDev. Модуль вы можете приобрести тут https://lazydev.pro/product/7-dle-filter.html. Как настраивать фильтр, официальная документация https://readme.lazydev.pro/dle-filter.html.

Зачем это нужно?

Цель была создать универсальную форму, которая автоматически адаптируется к любой ширине и элементы которой быстро собираются путем "копировать-вставить". Вы можете вставить форму в любое место и она автоматически адаптируется.

В форме доступны следующие элементы: текстовое поле, чекбокс (можно заменить на radio), селект, мультиселект. Контент в ячейках может быть в одну колонку или две. Любую ячейку можно сделать в всю ширину принудительно.

Внешний вид

Естественно, внешний вид по умолчанию оставляет желать лучшего. Суть тут в том, чтобы быстро собрать структуру, а не дизайн. Для дизайна уже потребуется править css, а также включать плагины стилизации в админке модуля, это Nice Select, Chosen, Ion Range Slider.

Итак, код формы

Показать / Скрыть текст

Вставить в tpl. Я рекомендую создать для этого отдельный tpl и подключить его через include.

<div class="filter-block">
	<form data-dlefilter="dle-filter" class="filter-block__form">
		<div class="filter-block__cell">
			<div class="filter-block__cell-caption">Заголовок инпут</div>
			<div class="filter-block__cell-content">
				<input type="text" placeholder="Текстовое поле">
			</div>
		</div>
		<div class="filter-block__cell">
			<div class="filter-block__cell-caption">Заголовок селект</div>
			<div class="filter-block__cell-content">
				<select name="PARAM">
					<option value="VALUE">Раз</option>
					<option value="VALUE">Два</option>
					<option value="VALUE">Три</option>
				</select>
			</div>
		</div>
		<div class="filter-block__cell">
			<div class="filter-block__cell-caption">Заголовок мультселект</div>
			<div class="filter-block__cell-content">
				<select name="PARAM" multiple>
					<option value="VALUE">Раз</option>
					<option value="VALUE">Два</option>
					<option value="VALUE">Три</option>
				</select>
			</div>
		</div>
		<div class="filter-block__cell">
			<div class="filter-block__cell-caption">Заголовок чекбокс</div>
			<div class="filter-block__cell-content">
				<label for="">
					<input name="PARAM" value="VALUE" type="checkbox">
					<div>Чекбокс</div>
				</label>
			</div>
		</div>
		<div class="filter-block__cell">
			<div class="filter-block__cell-caption">Примеры в 2 колонки</div>
			<div class="filter-block__cell-content filter-block__cell-content--two-columns">
				<input type="text" placeholder="Цена от, руб">
				<input type="text" placeholder="До">
			</div>
		</div>
		<div class="filter-block__cell">
			<div class="filter-block__cell-caption">Списки в 2 колонки</div>
			<div class="filter-block__cell-content filter-block__cell-content--two-columns">
				<select name="PARAM">
					<option value="VALUE">Двигатель</option>
					<option value="VALUE">Два</option>
					<option value="VALUE">Три</option>
				</select>
				<select name="PARAM">
					<option value="VALUE">Привод</option>
					<option value="VALUE">Два</option>
					<option value="VALUE">Три</option>
				</select>
			</div>
		</div>
		<div class="filter-block__cell">
			<div class="filter-block__cell-caption">Заголовок мультселект</div>
			<div class="filter-block__cell-content filter-block__cell-content--two-columns">
				<select name="PARAM" multiple>
					<option value="VALUE">Раз</option>
					<option value="VALUE">Два</option>
					<option value="VALUE">Три</option>
				</select>
				<select name="PARAM" multiple>
					<option value="VALUE">Раз</option>
					<option value="VALUE">Два</option>
					<option value="VALUE">Три</option>
				</select>
			</div>
		</div>
		<div class="filter-block__cell">
			<div class="filter-block__cell-caption">Область поиска</div>
			<div class="filter-block__cell-content filter-block__cell-content--two-columns">
				<label for="">
					<input name="PARAM" value="VALUE" type="checkbox" checked>
					<div>Все</div>
				</label>
				<label for="">
					<input name="PARAM" value="VALUE" type="checkbox">
					<div>Новинки</div>
				</label>
			</div>
		</div>
		<div class="filter-block__cell filter-block__cell--full-width">
			<div class="filter-block__cell-caption">Блок в всю ширину</div>
			<div class="filter-block__cell-content">
				<input type="range" name="" min="0" max="100" value="90" step="10">
			</div>
		</div>
		<div class="filter-block__cell">
			<div class="filter-block__cell-content filter-block__cell-content--two-columns">
				<input type="button" data-dlefilter="submit" value="Поиск">
				<input type="button" data-dlefilter="reset" value="Очистить">
			</div>
		</div>
	</form>
</div>

В конец вашего css файла

.filter-block, .filter-block * {box-sizing: border-box; margin: 0; padding: 0; outline: none;}
.filter-block {padding: 20px; border: 10px solid #eee; background-color: #f6f6f6; color: #000; font-size: 14px;}
.filter-block__form {display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); grid-gap: 20px 20px;}
.filter-block__cell--full-width {grid-column: 1 / -1;}
.filter-block__cell-caption {margin-bottom: 10px;}
.filter-block__cell-content > * {width: 100%; display: block;}
.filter-block__cell-content--two-columns {display: flex; justify-content: space-between;}
.filter-block__cell-content--two-columns > * {width: calc((100% - 10px)/2);}
.filter-block__cell-content select, .filter-block__cell-content input[type="text"] {height: 40px; line-height: 40px; 
	background: #fff; color: #000; border: 1px solid #e3e3e3; border-radius: 0; box-shadow: none;
	font-size: 14px; font-family: 'Roboto' !important; padding: 0 10px;}
.filter-block__cell-content select {padding: 0 8px;}
.filter-block__cell-content input[type="text"]::placeholder {opacity: 1; color: #000; font-size: 14px;}
.filter-block__cell-content input[type="text"]:focus::placeholder {opacity: 0;}
.filter-block__cell-content label {position: relative; padding-left: 50px; cursor: pointer; 
	height: 40px; display: flex; flex-direction: column; justify-content: center;}
.filter-block__cell-content label input {display: inline-block; appearance: none; -webkit-appearance: none;
	height: 20px; width: 40px; border-radius: 10px; background-color: #eee; cursor: pointer; transition: all .2s linear; 
	box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); position: absolute; left: 0; top: 50%; margin-top: -10px;}
.filter-block__cell-content label input::before {content: ''; width: 18px; height: 18px; border-radius: 10px; 
	position: absolute; left: 1px; top: 1px; background-color: #fff; transition: all .2s linear;}
.filter-block__cell-content label input:checked {background-color: #6ab04c;}
.filter-block__cell-content label input:checked::before {left: 21px;}
.filter-block__cell-content input[type="button"], .filter-block__cell-content button {cursor: pointer; 
	height: 40px; display: inline-flex; justify-content: center; padding: 0 10px; box-shadow: none; border-radius: 0; 
	font-size: 12px; text-transform: uppercase; font-weight: 700; background: #6ab04c; color: #fff;}
.filter-block__cell-content input[type="button"][data-dlefilter="reset"] {background: #535c68; color: #fff;}

Как пользоваться формой? Пример использования

Вставляю форму в нужное место.
Из элементов путем копирования удаления собираем нужную форму.
Теперь в готовом css вносим изменения по цвету, размеру, и получаем такую форму.
Дальше мы можем включить в модуле плагины стилизации списков, сделать слайдер диапазона, например, цены. Я этого уже делать не буду, для примера достаточно.
А теперь просто поставим эту форму в другое место и она автоматически адаптируется.