Merge remote-tracking branch 'origin/v2' into v2

static/v2/css/blocks/b_filter_routes.css

@@ -1,12 +1,21 @@
 .b_filter_routes{
     --form-title-font-size: 24px;
 
-    padding: 20px;
-    background: #FFFFFF;
-
     border-radius: 10px;
     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;
+        padding: 20px;
+        background: #FFFFFF;
+    }
     .title{
         font-size: var(--form-title-font-size);
         font-weight: 700;
@@ -19,4 +28,98 @@
             margin: 0 0 10px 0;
         }
     }
+
+    @media (max-width: 800px) {
+        --modal-width: calc(100% - 32px);
+        position: fixed;
+        top: 0;
+        left: 0;
+        .b_filter_routes_content{
+            width: var(--modal-width);
+            position: fixed;
+            top: 169px;
+            z-index: 100000000;
+            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/pages/p_search_route_results.css

@@ -12,4 +12,7 @@
     display: grid;
     grid-template-columns: 30% calc(100% - 30% - 41px);
     gap: 41px;
+    @media (max-width: 800px) {
+        grid-template-columns: 1fr;
+    }
 }

static/v2/css/service/btns.css

@@ -68,4 +68,5 @@
     display: var(--display);
 
     cursor: pointer;
-}
+}
+

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/css/widgets/w_route_card.css

@@ -50,6 +50,9 @@
     --route-number-margin-top: 5px;
 
     --from-to-place-data-width: 205px;
+    @media (max-width: 1160px) {
+        --from-to-place-data-width: 100%;
+    }
 
     background: var(--route-card-bg);
     margin: var(--route-card-margin);
@@ -91,8 +94,6 @@
             }
         }
 
-        /* mobile end !!!*/
-
         position: relative;
 
         .card_owner_name{
@@ -157,6 +158,15 @@
                         overflow-wrap: break-word;
                         color: #27242499;
                     }
+                    @media (max-width: 800px) {
+                        div{
+                            font-size: 10px;
+                        }
+                        img{
+                            width: 24px;
+                            height: 24px;
+                        }
+                    }
                 }
                 .route_clicked_msg_for_unregistered_user{
                     display: none;
@@ -213,139 +223,167 @@
             }
         }
     }
-    .route_card_route_data{
+    .route_card_route_data_cont{
-        margin-top: var(--route_card_route_data-margin-top);
-        display: flex;
-        justify-content: space-between;
-        gap: 60px;
-
         &.mobile{display: none}
         @media (max-width: 1160px) {
             display: none;
             &.mobile{
-                display: grid;
+                display: block;
-                grid-template-columns: 20px calc(100% - 30px);
+                .route_card_route_data {
-                gap: 10px;
+                    display: grid;
-                .way_progress_line_container{
+                    grid-template-columns: 20px calc(100% - 30px);
-                    margin-top: 20px;
+                    gap: 10px;
-                    height: calc(100% - 20px);
+
-                    .way_progress_round:first-of-type{
+                    .way_progress_line_container {
-                        left: unset;
+                        margin-top: 20px;
-                        top: 0;
+                        height: calc(100% - 20px);
-                    }
+
-                    .way_progress_round:last-of-type{
+                        .way_progress_round:first-of-type {
-                        right: unset;
+                            left: unset;
-                        top: calc(100% - 20px);
+                            top: 0;
-                    }
+                        }
-                    .way_progress_line{
+
-                        background: linear-gradient(180deg, rgba(6, 91, 255, 1) 0%, rgba(69, 194, 38, 1) 100%);
+                        .way_progress_round:last-of-type {
-                        height: calc(100% - 10px);
+                            right: unset;
-                        width: 4px;
+                            top: calc(100% - 20px);
-                    }
+                        }
-                    .way_progress_arrows_line{
+
-                        height: calc(100% - 10px);
+                        .way_progress_line {
-                        width: 4px;
+                            background: linear-gradient(180deg, rgba(6, 91, 255, 1) 0%, rgba(69, 194, 38, 1) 100%);
-                        background-repeat: repeat-y;
+                            height: calc(100% - 10px);
-                        background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow_mobile.svg");
+                            width: 4px;
-                        background-size: 4px;
+                        }
-                    }
+
-                }
+                        .way_progress_arrows_line {
-                .route_transport, .route_date_data{
+                            height: calc(100% - 10px);
-                    &.route_transport{
+                            width: 4px;
-                        margin-bottom: 0;
+                            background-repeat: repeat-y;
-                        margin-top: 35px;
+                            background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow_mobile.svg");
-                    }
+                            background-size: 4px;
-                    &.route_date_data{
-                        margin-top: 0;
-                        margin-bottom: 5px;
-                        &:last-of-type{
-                            margin-bottom: 39px;
                         }
                     }
-                    justify-content: left!important;
+
-                }
+                    .place_title{
-                .arrival_to {
+                        width: 100%;
-                    text-align: left!important;
+                        --max-width: var(--from-to-place-data-width)!important;
+                        background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF var(--max-width))!important;
+                    }
+
+                    .route_transport, .route_date_data {
+                        &.route_transport {
+                            margin-bottom: 0;
+                            margin-top: 35px;
+                        }
+
+                        &.route_date_data {
+                            margin-top: 0;
+                            margin-bottom: 5px;
+
+                            &:last-of-type {
+                                margin-bottom: 39px;
+                            }
+                        }
+
+                        justify-content: left !important;
+                    }
+
+                    .arrival_to {
+                        text-align: left !important;
+                    }
                 }
             }
         }
-        .from_to_place_data{
+        .route_card_route_data{
-            width: var(--from-to-place-data-width);
+            margin-top: var(--route_card_route_data-margin-top);
-            @media (max-width: 992px) {
+            display: flex;
-                --big-font-size: 14px;
+            justify-content: space-between;
-            }
+            gap: 60px;
-            &:has(.arrival_to){
+
-                .place{justify-content: right}
+            .from_to_place_data{
-            } &:has(.departure_from){
+                width: var(--from-to-place-data-width);
-                .place{justify-content: left}
+                @media (max-width: 992px) {
-            }
+                    --big-font-size: 14px;
-            @media (max-width: 1160px) {.place{justify-content: left!important;}}
-            .label{
-                color: #27242499;
-                font-size: var(--big-font-size);
-                font-weight: 600;
-                margin-bottom: 10px;
-                &.departure_from{
-                    text-align: left;
-                } &.arrival_to{
-                    text-align: right;
                 }
-            }
+                &:has(.arrival_to){
-            .place{
+                    .place{justify-content: right}
-                display: flex;
+                } &:has(.departure_from){
-                align-items: center;
+                    .place{justify-content: left}
-                gap: 10px;
+                }
-                .country{
+                @media (max-width: 1160px) {.place{justify-content: left!important;}}
+                .label{
+                    color: #27242499;
+                    font-size: var(--big-font-size);
+                    font-weight: 600;
+                    margin-bottom: 10px;
+                    &.departure_from{
+                        text-align: left;
+                    } &.arrival_to{
+                        text-align: right;
+                    }
+                }
+                .place{
                     display: flex;
                     align-items: center;
-                    gap: 5px;
+                    gap: 10px;
+                    .country{
+                        display: flex;
+                        align-items: center;
+                        gap: 5px;
 
+                        img{
+                            width: 16px;
+                            height: 12px;
+                            display: block;
+                            object-fit: contain;
+                            box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
+                        }
+                        .country_code{
+                            color: #27242499;
+                            font-size: var(--medium-font-size);
+                        }
+                    }
+                    .place_title{
+                        --max-width: calc(var(--from-to-place-data-width) - 45.3px);
+                        font-size: var(--big-font-size);
+                        font-weight: 800;
+                        max-width: var(--max-width);
+                        overflow: hidden;
+                        white-space: nowrap;
+                        color: transparent;
+                        background-clip: text;
+                        -webkit-background-clip: text;
+                        background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF calc(var(--max-width) - 30px));
+                    }
+                }
+            }
+            .route_way_data{
+                @media (max-width: 992px) {
+                    --medium-font-size: 12px;
+                }
+                flex-grow: 1;
+                .route_transport{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 5px;
+                    margin-bottom: 10px;
+                    margin-top: 8px;
+                    .route_transport_name{
+                        font-size: var(--medium-font-size);
+                        font-weight: 600;
+                    }
                     img{
-                        width: 16px;
                         height: 12px;
                         display: block;
-                        object-fit: contain;
-                        box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
                     }
-                    .country_code{
-                        color: #27242499;
-                        font-size: var(--medium-font-size);
-                    }
-                }
-                .place_title{
-                    font-size: var(--big-font-size);
-                    font-weight: 800;
-                    color: #272424;
-                    max-width: calc(100% - 45.3px);
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
-            }
-        }
-        .route_way_data{
-            @media (max-width: 992px) {
-                --medium-font-size: 12px;
-            }
-            flex-grow: 1;
-            .route_transport{
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 5px;
-                margin-bottom: 10px;
-                margin-top: 8px;
-                .route_transport_name{
-                    font-size: var(--medium-font-size);
-                    font-weight: 600;
-                }
-                img{
-                    height: 12px;
-                    display: block;
                 }
             }
         }
     }
+    .dates_inf_cont{
+        display: flex;
+        justify-content: space-between;
+    }
     .way_progress_line_container{
         position: relative;
         width: 100%;

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

static/v2/js/pages/p_search_route_results.js

@@ -1,4 +1,8 @@
 $(document).ready(function() {
+    if (window.innerWidth < 800) {
+        $(".b_filter_routes").addClass('modal');
+        return;
+    }
     let header_height = $("#header_bg")[0].offsetHeight;
     let _scroll = new scroll({
         attach_top: header_height + 20,

static/v2/js/service/scroll.js

@@ -19,7 +19,7 @@ class scroll{
             $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.getPropertyValue('margin-top');
             $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.split('p')
             $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.length > 0? $unnatach_bottom_el_margin_top[0] : 0;
-            this.$el.style.top = (window.scrollY - $unnatach_bottom_el_margin_top) + 'px';
+            this.$el.style.top = (window.scrollY - $unnatach_bottom_el_margin_top) + this.top + 'px';
             this.$el.style.position = "absolute";
             this.attached_by_bottom_el = true;
             return;

templates/tb_base.html

@@ -216,13 +216,13 @@ function gtag_report_conversion(url) {
 {#                        </div>#}
 {#                    </div>#}
                 </div>
-                <div class="handler_curtain_left close" onclick="open_curtain_w_contacts()">
+{#                <div class="handler_curtain_left close" onclick="open_curtain_w_contacts()">#}
-                    <div class="container_content_handler_curtain_left">
+{#                    <div class="container_content_handler_curtain_left">#}
-                        <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+{#                        <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
-                        <img class="filter_img" src='{% static "/img/svg/filter.svg" %}'>
+{#                        <img class="filter_img" src='{% static "/img/svg/filter.svg" %}'>#}
-                        <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+{#                        <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
-                    </div>
+{#                    </div>#}
-                </div>
+{#                </div>#}
             {% endif %}
             <div class="{% if page.url == "landing_mover" or page.url == "landing_customer" %}container{% else %}wrapper_content{% endif %} {% if page.url == 'customer_service'%} m_h_0 {% elif page.url == 'contacts' %}m_h_0{% elif request.path == '/test_404' %}m_h_0{% endif %}">
 

templates/v2/blocks/b_filter_routes.html

@@ -2,28 +2,38 @@
 {% 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="title">{% trans "Все фильтры" %}</div>
+    <div class="overlay"></div>
-    <form name="filter_routes">
+    <div class="b_filter_routes_content">
-        <div class="label" style="margin-bottom: 16px;">{% trans "Способ перевозки" %}</div>
+        <div class="title">{% trans "Все фильтры" %}</div>
-        <div class="field_container line" data-type="checkbox" data-name="type_transport">
+        <form name="filter_routes">
-            <div class="checkbox{% if route_form.initial.type_transport %} checked{% endif %}" data-value="road" onclick="chooseCheckbox(this)"></div>
+            <div class="label" style="margin-bottom: 16px;">{% trans "Способ перевозки" %}</div>
-            <div class="checkbox_label" onclick="chooseCheckbox(this)">{% trans "Автоперевозка" %}</div>
+            <div class="field_container line" data-type="checkbox" data-name="type_transport">
-            {% if route_form.errors.type_transport %}<div class="error_container">{{ route_form.errors.type_transport.0 }}</div>{% endif %}
+                <div class="checkbox{% if route_form.initial.type_transport %} checked{% endif %}" data-value="road" onclick="chooseCheckbox(this)"></div>
-        </div>
+                <div class="checkbox_label" onclick="chooseCheckbox(this)">{% trans "Автоперевозка" %}</div>
-        <div class="field_container line" data-type="checkbox" data-name="type_transport">
+                {% if route_form.errors.type_transport %}<div class="error_container">{{ route_form.errors.type_transport.0 }}</div>{% endif %}
-            <div class="checkbox{% if route_form.initial.type_transport %} checked{% endif %}" data-value="avia" onclick="chooseCheckbox(this)"></div>
+            </div>
-            <div class="checkbox_label" onclick="chooseCheckbox(this)">{% trans "Авиатранспорт" %}</div>
+            <div class="field_container line" data-type="checkbox" data-name="type_transport">
-            {% if route_form.errors.type_transport %}<div class="error_container">{{ route_form.errors.type_transport.0 }}</div>{% endif %}
+                <div class="checkbox{% if route_form.initial.type_transport %} checked{% endif %}" data-value="avia" onclick="chooseCheckbox(this)"></div>
-        </div>
+                <div class="checkbox_label" onclick="chooseCheckbox(this)">{% trans "Авиатранспорт" %}</div>
-        <div class="field_container" data-type="select" data-name="cargo_type">
+                {% if route_form.errors.type_transport %}<div class="error_container">{{ route_form.errors.type_transport.0 }}</div>{% endif %}
-            <label for="id_cargo_type">{% trans "Тип посылки" %}</label>
+            </div>
-            <select name="cargo_type" id="id_cargo_type">
+            <div class="field_container" data-type="select" data-name="cargo_type">
-                <option value="">{% trans "Любой" %}</option>
+                <label for="id_cargo_type">{% trans "Тип посылки" %}</label>
-                {% for cargo_type in route_form.fields.cargo_type.choices %}
+                <select name="cargo_type" id="id_cargo_type">
-                    <option value="{{ cargo_type.0 }}">{{ cargo_type.1 }}</option>
+                    <option value="">{% trans "Любой" %}</option>
-                {% endfor %}
+                    {% for cargo_type in route_form.fields.cargo_type.choices %}
-            </select>
+                        <option value="{{ cargo_type.0 }}">{{ cargo_type.1 }}</option>
-        </div>
+                    {% endfor %}
-    </form>
+                </select>
+            </div>
+        </form>
+    </div>
 </div>

templates/v2/content_widgets/w_route_card/route_card_info_data_for_search.html

@@ -56,7 +56,7 @@
         </div>
     </div>
     <div class="card_owner_name">{{ route.owner }}</div>
-    <div class="route_card_text_container">
+    <div class="route_card_text_container{% if not user.if_authenticated %} msg{% endif %}">
         <div class="route_card_text_container_txt">
             {% if route.comment %}
                 {{ route.comment|linebreaksbr }}
@@ -65,10 +65,15 @@
             {% endif %}
         </div>
         {% if not user.if_authenticated %}
-            <div class="route_msg_for_unregistered_user">
+            <div class="route_msg_for_unregistered_user" onclick="clickedUnregisteredMsgRoute(this)">
                 <img src="{% static "v2/icons/widgets/w_route_card/unregistered.svg" %}" alt="">
                 <div>{% trans "Текст сообщения доступен только авторизированным пользователям." %}</div>
             </div>
+            <div class="route_clicked_msg_for_unregistered_user">
+                <img src="{% static "v2/icons/widgets/w_route_card/lock.png" %}" alt="">
+                <div>{% trans "Текст сообщения доступен только авторизированным пользователям." %}</div>
+                <a class="default_btn" href="{% url "login_profile" %}">{% trans "Войти" %}</a>
+            </div>
         {% endif %}
     </div>
     <div class="route_number">{% trans "Объявление №" %} {{ route.id }}</div>

templates/v2/content_widgets/w_route_card/route_card_route_data.html

@@ -1,77 +1,8 @@
 {% load static %}
 {% load i18n %}
 
-<div class="route_card_route_data">
+<div class="route_card_route_data_cont">
-    <div class="from_to_place_data">
+    <div class="route_card_route_data">
-        <div class="label departure_from">{% trans "Забрать из:" %}</div>
-        <div class="place">
-            <div class="country">
-                <img src="{{ route.from_city.country.flag.url }}" alt="">
-                <div class="country_code">{{ route.from_city.country.code }}</div>
-            </div>
-            <div class="place_title">
-                {{ route.from_city.name }}
-            </div>
-        </div>
-        {% if route.owner_type == 'mover' %}
-            <div class="route_date_data" style="--route-date-data-justify: left;--route-date-data-margin: 10px 0 0 0;">
-                {% trans "Отправка:" %}
-                <div class="date_data_value">{{ route.departure_DT|date:'j E Y' }}</div>
-            </div>
-        {% endif %}
-    </div>
-    <div class="route_way_data">
-        <div class="route_transport">
-            <div class="route_transport_name">{{ route.get_type_transport_display }}</div>
-            {% if route.type_transport == '' %}
-                <img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
-                <img src="{% static "v2/icons/widgets/w_route_card/car.svg" %}" alt="">
-            {% elif route.type_transport == 'road' %}
-                <img src="{% static "v2/icons/widgets/w_route_card/car.svg" %}" alt="">
-            {% elif route.type_transport == 'avia' %}
-                <img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
-            {% endif %}
-        </div>
-        <div class="way_progress_line_container">
-            <div class="way_progress_round"></div>
-            <div class="way_progress_line"></div>
-            <div class="way_progress_arrows_line"></div>
-            <div class="way_progress_round"></div>
-        </div>
-        {% if route.owner_type == 'customer' %}
-            <div class="route_date_data">
-                {% trans "Дата доставки:" %}
-                <div class="date_data_value">{{ route.arrival_DT|date:'j E Y' }}</div>
-            </div>
-        {% endif %}
-    </div>
-    <div class="from_to_place_data">
-        <div class="label arrival_to">{% trans "Доставить в:" %}</div>
-        <div class="place">
-            <div class="country">
-                <img src="{{ route.to_city.country.flag.url }}" alt="">
-                <div class="country_code">{{ route.to_city.country.code }}</div>
-            </div>
-            <div class="place_title">
-                {{ route.to_city.name }}
-            </div>
-        </div>
-        {% if route.owner_type == 'mover' %}
-            <div class="route_date_data" style="--route-date-data-justify: right;--route-date-data-margin: 10px 0 0 0;">
-                {% trans "Прибытие:" %}
-                <div class="date_data_value">{{ route.arrival_DT|date:'j E Y' }}</div>
-            </div>
-        {% endif %}
-    </div>
-</div>
-<div class="route_card_route_data mobile">
-    <div class="way_progress_line_container mobile">
-        <div class="way_progress_round"></div>
-        <div class="way_progress_line"></div>
-        <div class="way_progress_arrows_line"></div>
-        <div class="way_progress_round"></div>
-    </div>
-    <div class="right_part_route_card">
         <div class="from_to_place_data">
             <div class="label departure_from">{% trans "Забрать из:" %}</div>
             <div class="place">
@@ -80,7 +11,7 @@
                     <div class="country_code">{{ route.from_city.country.code }}</div>
                 </div>
                 <div class="place_title">
-                    {{ route.from_city.name }}/{{ route.from_city.country.name }}
+                    {{ route.from_city.name }}
                 </div>
             </div>
         </div>
@@ -96,21 +27,17 @@
                     <img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
                 {% endif %}
             </div>
-            <div class="route_date_splitter"></div>
+            <div class="way_progress_line_container">
+                <div class="way_progress_round"></div>
+                <div class="way_progress_line"></div>
+                <div class="way_progress_arrows_line"></div>
+                <div class="way_progress_round"></div>
+            </div>
             {% if route.owner_type == 'customer' %}
                 <div class="route_date_data">
                     {% trans "Дата доставки:" %}
                     <div class="date_data_value">{{ route.arrival_DT|date:'j E Y' }}</div>
                 </div>
-            {% else %}
-                <div class="route_date_data">
-                    {% trans "Отправка:" %}
-                    <div class="date_data_value">{{ route.departure_DT|date:'j E Y' }}</div>
-                </div>
-                <div class="route_date_data">
-                    {% trans "Прибытие:" %}
-                    <div class="date_data_value">{{ route.arrival_DT|date:'j E Y' }}</div>
-                </div>
             {% endif %}
         </div>
         <div class="from_to_place_data">
@@ -121,7 +48,87 @@
                     <div class="country_code">{{ route.to_city.country.code }}</div>
                 </div>
                 <div class="place_title">
-                    {{ route.to_city.name }}/{{ route.to_city.country.name }}
+                    {{ route.to_city.name }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="dates_inf_cont">
+        {% if route.owner_type == 'mover' %}
+            <div class="route_date_data" style="--route-date-data-justify: left;--route-date-data-margin: 10px 0 0 0;">
+                {% trans "Отправка:" %}
+                <div class="date_data_value">{{ route.departure_DT|date:'j E Y' }}</div>
+            </div>
+        {% endif %}
+        {% if route.owner_type == 'mover' %}
+            <div class="route_date_data" style="--route-date-data-justify: right;--route-date-data-margin: 10px 0 0 0;">
+                {% trans "Прибытие:" %}
+                <div class="date_data_value">{{ route.arrival_DT|date:'j E Y' }}</div>
+            </div>
+        {% endif %}
+    </div>
+</div>
+
+<div class="route_card_route_data_cont mobile">
+    <div class="route_card_route_data">
+        <div class="way_progress_line_container mobile">
+            <div class="way_progress_round"></div>
+            <div class="way_progress_line"></div>
+            <div class="way_progress_arrows_line"></div>
+            <div class="way_progress_round"></div>
+        </div>
+        <div class="right_part_route_card">
+            <div class="from_to_place_data">
+                <div class="label departure_from">{% trans "Забрать из:" %}</div>
+                <div class="place">
+                    <div class="country">
+                        <img src="{{ route.from_city.country.flag.url }}" alt="">
+                        <div class="country_code">{{ route.from_city.country.code }}</div>
+                    </div>
+                    <div class="place_title">
+                        {{ route.from_city.name }}/{{ route.from_city.country.name }}
+                    </div>
+                </div>
+            </div>
+            <div class="route_way_data">
+                <div class="route_transport">
+                    <div class="route_transport_name">{{ route.get_type_transport_display }}</div>
+                    {% if route.type_transport == '' %}
+                        <img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
+                        <img src="{% static "v2/icons/widgets/w_route_card/car.svg" %}" alt="">
+                    {% elif route.type_transport == 'road' %}
+                        <img src="{% static "v2/icons/widgets/w_route_card/car.svg" %}" alt="">
+                    {% elif route.type_transport == 'avia' %}
+                        <img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
+                    {% endif %}
+                </div>
+                <div class="route_date_splitter"></div>
+                {% if route.owner_type == 'customer' %}
+                    <div class="route_date_data">
+                        {% trans "Дата доставки:" %}
+                        <div class="date_data_value">{{ route.arrival_DT|date:'j E Y' }}</div>
+                    </div>
+                {% else %}
+                    <div class="route_date_data">
+                        {% trans "Отправка:" %}
+                        <div class="date_data_value">{{ route.departure_DT|date:'j E Y' }}</div>
+                    </div>
+                    <div class="route_date_data">
+                        {% trans "Прибытие:" %}
+                        <div class="date_data_value">{{ route.arrival_DT|date:'j E Y' }}</div>
+                    </div>
+                {% endif %}
+            </div>
+            <div class="from_to_place_data">
+                <div class="label arrival_to">{% trans "Доставить в:" %}</div>
+                <div class="place">
+                    <div class="country">
+                        <img src="{{ route.to_city.country.flag.url }}" alt="">
+                        <div class="country_code">{{ route.to_city.country.code }}</div>
+                    </div>
+                    <div class="place_title">
+                        {{ route.to_city.name }}/{{ route.to_city.country.name }}
+                    </div>
                 </div>
             </div>
         </div>

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