used catalog filter hotfix

This commit is contained in:
merelendor 2023-07-09 16:54:41 +03:00
parent 4e98c0eb74
commit be7bc2d5fc
5 changed files with 116 additions and 62 deletions

View File

@ -1,25 +1,21 @@
@media all and (max-width: 767px)
{
.filter_used_desktop
{
display: none;
}
.filter_used_mobile
{
display: block;
@media all and (min-width: 1280px) {
.catalog_filter_used *[data-desktop-order] {
width: calc(33.333% - 21px) !important;
}
}
@media all and (min-width: 768px)
{
.filter_used_desktop
{
display: block;
@media all and (max-width: 1279px) and (min-width: 769px) {
.catalog_filter_used *[data-desktop-order] {
width: calc(50% - 15px) !important;
}
.filter_used_mobile
{
display: none;
.catalog_filter_used div[data-desktop-order]:not(.fieldgroup)>.form_field {
width: 100% !important;
}
}
@media all and (max-width: 768px) {
.catalog_filter_used *[data-desktop-order] {
width: 100% !important;
}
}

View File

@ -143,54 +143,29 @@ HTML;
<div class="catalog_filter_used" style="display: <?= !$arParams['USED'] ? "none" : "block"; ?>">
<div class="filter_used_desktop">
<div class="filter_body static">
<div class="filter_column">
<div class="fieldgroup">
<?= render_select("vehicle_type", "Тип"); ?>
<?= render_select("vehicle_subtype", "Уточнить тип"); ?>
</div>
<div class="fieldgroup" data-desktop-order="1" data-sm-order="1">
<?= render_select("vehicle_type", "Тип"); ?>
<?= render_select("vehicle_subtype", "Уточнить тип"); ?>
</div>
<div data-desktop-order="4" data-sm-order="2">
<?= render_select("city", "Город"); ?>
</div>
<div class="filter_column">
<div data-desktop-order="2" data-sm-order="3">
<?= render_select("brands_used", "Марка"); ?>
<div class="fieldgroup"> <!-- убрать отступ на мобилках класс no_space -->
<?= render_select("year_from", "Год, от"); ?>
<?= render_select("year_to", "Год, до"); ?>
</div>
</div>
<div class="filter_column">
<div class="fieldgroup" data-desktop-order="5" data-sm-order="4"> <!-- убрать отступ на мобилках класс no_space -->
<?= render_select("year_from", "Год, от"); ?>
<?= render_select("year_to", "Год, до"); ?>
</div>
<div data-desktop-order="3" data-sm-order="5">
<?= render_select("models_used", "Модель"); ?>
<div class="fieldgroup">
<?= render_select("mileage_from", "Пробег, от"); ?>
<?= render_select("mileage_to", "Пробег, до"); ?>
</div>
</div>
<div class="fieldgroup" data-desktop-order="6" data-sm-order="6">
<?= render_select("mileage_from", "Пробег, от"); ?>
<?= render_select("mileage_to", "Пробег, до"); ?>
</div>
</div>
</div>
<div class="filter_used_mobile">
<div class="filter_body static">
<div class="filter_column">
<div class="fieldgroup">
<?= render_select("vehicle_type", "Тип"); ?>
<?= render_select("vehicle_subtype", "Уточнить тип"); ?>
</div>
<?= render_select("brands_used", "Марка"); ?>
<?= render_select("models_used", "Модель"); ?>
<?= render_select("city", "Город"); ?>
</div>
<div class="filter_column">
</div>
<div class="filter_column">
<div class="fieldgroup"> <!-- убрать отступ на мобилках класс no_space -->
<?= render_select("year_from", "Год, от"); ?>
<?= render_select("year_to", "Год, до"); ?>
</div>
<div class="fieldgroup">
<?= render_select("mileage_from", "Пробег, от"); ?>
<?= render_select("mileage_to", "Пробег, до"); ?>
</div>
</div>
</div>
</div>
</div>
</div>
<?
/*

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6611,4 +6611,87 @@ main .dropdown_blocks_list .dropdown_block .block_body {
}
}
}
[data-desktop-order="1"] {
order: 1;
}
[data-desktop-order="2"] {
order: 2;
}
[data-desktop-order="3"] {
order: 3;
}
[data-desktop-order="4"] {
order: 4;
}
[data-desktop-order="5"] {
order: 5;
}
[data-desktop-order="6"] {
order: 6;
}
[data-desktop-order="7"] {
order: 7;
}
[data-desktop-order="8"] {
order: 8;
}
[data-desktop-order="9"] {
order: 9;
}
[data-desktop-order="10"] {
order: 10;
}
@media all and (max-width: 1000px) {
[data-desktop-order="1"] {
order: 1;
}
[data-sm-order="2"] {
order: 2;
}
[data-sm-order="3"] {
order: 3;
}
[data-sm-order="4"] {
order: 4;
}
[data-sm-order="5"] {
order: 5;
}
[data-sm-order="6"] {
order: 6;
}
[data-sm-order="7"] {
order: 7;
}
[data-sm-order="8"] {
order: 8;
}
[data-sm-order="9"] {
order: 9;
}
[data-sm-order="10"] {
order: 10;
}
}