diff --git a/static/v2/css/blocks/b_filter_routes.css b/static/v2/css/blocks/b_filter_routes.css index 315554f..b674f83 100644 --- a/static/v2/css/blocks/b_filter_routes.css +++ b/static/v2/css/blocks/b_filter_routes.css @@ -5,6 +5,11 @@ height: fit-content; box-sizing: border-box; + .overlay{ + --bg: #F8F8F8CC; + --backdrop-filter: blur(2px); + } + .b_filter_routes_content{ box-sizing: border-box; border-radius: 10px; @@ -37,4 +42,84 @@ left: calc(50dvw - (var(--modal-width) / 2)); } } +} + +.b_filter_routes_modal_handler{ + --bg: #FF613A; + --border-radius: 0 10px 10px 0; + --left: 0; + --top: calc(50% - 63.5px); + --width: 25px; + --height: 127px; + + --color: #fff; + + background: var(--bg); + border-radius: var(--border-radius); + + display: none; + position: fixed; + + left: var(--left); + top: var(--top); + width: var(--width); + height: var(--height); + + .b_filter_routes_modal_handler_content{ + position: relative; + height: 127px; + rotate: 0deg; + top: 0; + left: 0; + } + img{ + --filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(74deg) brightness(122%) contrast(112%); + --rotate: 0; + + filter: var(--filter); + rotate: var(--rotate); + width: 7px; + display: block; + position: absolute; + left: 8px; + &:first-of-type{ + top: 19px; + } + &:last-of-type{ + top: 94px; + } + } + div{ + --rotate: 270deg; + --top: 56px; + --left: -9px; + + color: var(--color); + font-size: 12px; + position: absolute; + + rotate: var(--rotate); + top: var(--top); + left: var(--left); + } + + z-index: 10000000000000; + + &.active{ + --bg: #E6E6E6; + --color: #27242499; + --border-radius: 10px 0 0 10px; + --left: calc(100% - var(--width)); + div{ + --rotate: 90deg; + } + img{ + --rotate: 180deg; + --filter: brightness(0) saturate(100%) invert(16%) sepia(6%) saturate(406%) hue-rotate(2deg) brightness(96%) contrast(82%); + } + } + + @media (max-width: 800px) { + display: block; + } } \ No newline at end of file diff --git a/static/v2/css/service/modal.css b/static/v2/css/service/modal.css index 0353526..630b3d5 100644 --- a/static/v2/css/service/modal.css +++ b/static/v2/css/service/modal.css @@ -4,12 +4,16 @@ display: block; } .overlay{ + --bg: #0000009C; + --backdrop-filter: none; + position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: #0000009C; + background: var(--bg); + backdrop-filter: var(--backdrop-filter); z-index: 10000000; } } \ No newline at end of file diff --git a/static/v2/icons/blocks/b_filter_routes/arrow.svg b/static/v2/icons/blocks/b_filter_routes/arrow.svg new file mode 100644 index 0000000..9b9cd65 --- /dev/null +++ b/static/v2/icons/blocks/b_filter_routes/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/v2/js/blocks/b_filter_routes.js b/static/v2/js/blocks/b_filter_routes.js new file mode 100644 index 0000000..a93831a --- /dev/null +++ b/static/v2/js/blocks/b_filter_routes.js @@ -0,0 +1,27 @@ +function toggleFiltersModal(el) { + if (!el) return; + + if (el.classList.contains('active')) { + closeFiltersModal(el) + } else { + openFiltersModal(el) + } +} + +function openFiltersModal(el) { + if (!el) return; + + el.classList.add('active'); + + let $modal = $(".b_filter_routes.modal") + $modal.addClass('open'); +} + +function closeFiltersModal(el) { + if (!el) return; + + el.classList.remove('active'); + + let $modal = $(".b_filter_routes.modal") + $modal.removeClass('open'); +} \ No newline at end of file diff --git a/templates/v2/blocks/b_filter_routes.html b/templates/v2/blocks/b_filter_routes.html index b75fa97..5d839b7 100644 --- a/templates/v2/blocks/b_filter_routes.html +++ b/templates/v2/blocks/b_filter_routes.html @@ -2,6 +2,13 @@ {% load i18n %} +
+
+ +
{% trans "Фильтр" %}
+ +
+
diff --git a/templates/v2/pages/p_search_route_results.html b/templates/v2/pages/p_search_route_results.html index 73b41e7..320ef50 100644 --- a/templates/v2/pages/p_search_route_results.html +++ b/templates/v2/pages/p_search_route_results.html @@ -14,6 +14,7 @@ + {% endblock %} {% block content %}