0.0.142 routes

static/v2/css/blocks/b_filter_routes.css

@@ -1,12 +1,16 @@
 .b_filter_routes{
     --form-title-font-size: 24px;
 
-    padding: 20px;
-    background: #FFFFFF;
-
     border-radius: 10px;
     height: fit-content;
     box-sizing: border-box;
+
+    .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 +23,18 @@
             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));
+        }
+    }
 }

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

@@ -69,3 +69,4 @@
 
     cursor: pointer;
 }
+

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,36 +223,38 @@
             }
         }
     }
-    .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: block;
+                .route_card_route_data {
                     display: grid;
                     grid-template-columns: 20px calc(100% - 30px);
                     gap: 10px;
-                .way_progress_line_container{
+
+                    .way_progress_line_container {
                         margin-top: 20px;
                         height: calc(100% - 20px);
-                    .way_progress_round:first-of-type{
+
+                        .way_progress_round:first-of-type {
                             left: unset;
                             top: 0;
                         }
-                    .way_progress_round:last-of-type{
+
+                        .way_progress_round:last-of-type {
                             right: unset;
                             top: calc(100% - 20px);
                         }
-                    .way_progress_line{
+
+                        .way_progress_line {
                             background: linear-gradient(180deg, rgba(6, 91, 255, 1) 0%, rgba(69, 194, 38, 1) 100%);
                             height: calc(100% - 10px);
                             width: 4px;
                         }
-                    .way_progress_arrows_line{
+
+                        .way_progress_arrows_line {
                             height: calc(100% - 10px);
                             width: 4px;
                             background-repeat: repeat-y;
@@ -250,25 +262,43 @@
                             background-size: 4px;
                         }
                     }
-                .route_transport, .route_date_data{
+
-                    &.route_transport{
+                    .place_title{
+                        width: 100%;
+                        --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{
+
+                        &.route_date_data {
                             margin-top: 0;
                             margin-bottom: 5px;
-                        &:last-of-type{
+
+                            &:last-of-type {
                                 margin-bottom: 39px;
                             }
                         }
-                    justify-content: left!important;
+
+                        justify-content: left !important;
                     }
+
                     .arrival_to {
-                    text-align: left!important;
+                        text-align: left !important;
                     }
                 }
             }
+        }
+        .route_card_route_data{
+            margin-top: var(--route_card_route_data-margin-top);
+            display: flex;
+            justify-content: space-between;
+            gap: 60px;
+
             .from_to_place_data{
                 width: var(--from-to-place-data-width);
                 @media (max-width: 992px) {
@@ -313,13 +343,16 @@
                         }
                     }
                     .place_title{
+                        --max-width: calc(var(--from-to-place-data-width) - 45.3px);
                         font-size: var(--big-font-size);
                         font-weight: 800;
-                    color: #272424;
+                        max-width: var(--max-width);
-                    max-width: calc(100% - 45.3px);
                         overflow: hidden;
-                    text-overflow: ellipsis;
                         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));
                     }
                 }
             }
@@ -346,6 +379,11 @@
                 }
             }
         }
+    }
+    .dates_inf_cont{
+        display: flex;
+        justify-content: space-between;
+    }
     .way_progress_line_container{
         position: relative;
         width: 100%;

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

@@ -3,6 +3,8 @@
 <link rel="stylesheet" href="{% static "v2/css/blocks/b_filter_routes.css" %}">
 
 <div class="b_filter_routes">
+    <div class="overlay"></div>
+    <div class="b_filter_routes_content">
         <div class="title">{% trans "Все фильтры" %}</div>
         <form name="filter_routes">
             <div class="label" style="margin-bottom: 16px;">{% trans "Способ перевозки" %}</div>
@@ -26,4 +28,5 @@
                 </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,7 +1,8 @@
 {% load static %}
 {% load i18n %}
 
-<div class="route_card_route_data">
+<div class="route_card_route_data_cont">
+    <div class="route_card_route_data">
         <div class="from_to_place_data">
             <div class="label departure_from">{% trans "Забрать из:" %}</div>
             <div class="place">
@@ -13,12 +14,6 @@
                     {{ 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">
@@ -56,6 +51,15 @@
                     {{ 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 "Прибытие:" %}
@@ -64,7 +68,9 @@
         {% endif %}
     </div>
 </div>
-<div class="route_card_route_data mobile">
+
+<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>
@@ -126,4 +132,5 @@
                 </div>
             </div>
         </div>
+    </div>
 </div>