0.0.143 routes

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;
+    }
 }

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;
     }
 }

static/v2/icons/blocks/b_filter_routes/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L6 6.5L1 12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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');
+}

templates/v2/blocks/b_filter_routes.html

@@ -2,6 +2,13 @@
 {% load i18n %}
 <link rel="stylesheet" href="{% static "v2/css/blocks/b_filter_routes.css" %}">
 
+<div class="b_filter_routes_modal_handler" onclick="toggleFiltersModal(this)">
+    <div class="b_filter_routes_modal_handler_content">
+        <img src="{% static "v2/icons/blocks/b_filter_routes/arrow.svg" %}" alt="">
+        <div>{% trans "Фильтр" %}</div>
+        <img src="{% static "v2/icons/blocks/b_filter_routes/arrow.svg" %}" alt="">
+    </div>
+</div>
 <div class="b_filter_routes">
     <div class="overlay"></div>
     <div class="b_filter_routes_content">

templates/v2/pages/p_search_route_results.html

@@ -14,6 +14,7 @@
     <script src="{% static "v2/js/blocks/b_search_routes.js" %}"></script>
     <script src="{% static "v2/js/widgets/w_route_card.js" %}"></script>
     <script src="{% static "v2/js/pages/p_search_route_results.js" %}"></script>
+    <script src="{% static "v2/js/blocks/b_filter_routes.js" %}"></script>
 {% endblock %}
 
 {% block content %}