0.0.132 search routes

static/v2/css/widgets/w_route_card.css

@@ -195,6 +195,8 @@
                         height: calc(100% - 10px);
                         width: 4px;
                         background-repeat: repeat-y;
+                        background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow_mobile.svg");
+                        background-size: 4px;
                     }
                 }
                 .route_transport, .route_date_data{
@@ -358,11 +360,11 @@
         }
     }
     .route_btn{
-        @media (max-width: 1160px) {
-            &.phone{display: none;};
-            &.mobile{display: flex!important;}
-        }
         &.mobile{display: none;}
+        @media (max-width: 1160px) {
+            &.mobile{display: flex;}
+            &.hide_in_mobile{display: none!important;};
+        }
 
         cursor: pointer;
         &.solid{
@@ -384,6 +386,7 @@
         height: var(--route-btn-height);
         margin: var(--route-btn-margin);
         text-align: center;
+        justify-content: center;
         transition: 200ms all;
         &:has(img){
             display: flex;
@@ -456,6 +459,11 @@
         margin-top: var(--route-number-margin-top);
     }
     .respond_route_cont{
+        &.mobile{display: none;}
+        @media (max-width: 1160px) {
+            display: none;
+            &.mobile{display: grid;}
+        }
         display: grid;
         grid-template-columns: calc(100% - 47px) 37px;
         gap: 10px;

static/v2/js/widgets/w_route_card.js

@@ -118,8 +118,9 @@ function highlightRoute(el) {
 
 function respondBtnClickEvent(el) {
     if (!el) return;
-    let $parent = el.closest(".route_card_owner_info")
+    let $parent = el.closest(".w_route_card")
     let $responde_cont = $parent.querySelector(".respond_route_cont")
+    if (window.innerWidth < 1160) $responde_cont = $parent.querySelector(".respond_route_cont.mobile")
 
     $(el).fadeOut(500);
     sleep(500).then(() => {

templates/v2/content_widgets/w_route_card/route_card_actions_container.html

@@ -17,7 +17,7 @@
         </div>
     </div>
 </div>
-<div class="route_btn phone mobile inactive" style="--route-btn-width: auto;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;--route-btn-margin: 20.5px 0 0 0;">
+<div class="route_btn mobile inactive" style="--route-btn-width: auto;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;--route-btn-margin: 20.5px 0 0 0;">
     <img src="{% static "v2/icons/widgets/w_route_card/phone_half_opacity.svg" %}" alt="">
     <div class="route_btn_title big">{{ route.phone }}</div>
 </div>

templates/v2/content_widgets/w_route_card/route_card_actions_container_for_search.html

@@ -0,0 +1,15 @@
+{% load static %}
+{% load i18n %}
+
+<div class="respond_route_cont mobile" style="display: none;margin-top: 23px;">
+    <div class="route_btn unhovered" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
+        <img src="{% static "v2/icons/widgets/w_route_card/phone.svg" %}" alt="">
+        <div class="route_btn_title big">{{ route.phone|truncatechars:20 }}</div>
+    </div>
+    <div class="chat_btn">
+        <img src="{% static "v2/icons/widgets/w_route_card/chat.png" %}" alt="">
+    </div>
+</div>
+<div class="route_btn mobile solid" onclick="respondBtnClickEvent(this)" style="--route-btn-margin: 23px 0 0 0;--route-btn-width: 100%;--route-btn-height: min-content;--route-btn-padding: 7.5px 0;">
+    <div class="route_btn_title big">{% trans "Откликнуться" %}</div>
+</div>

templates/v2/content_widgets/w_route_card/route_card_info_data.html

@@ -11,7 +11,7 @@
             <div class="card_owner_type {{ route.owner_type }}">{% if route.owner_type == 'customer' %}{% trans "Нужен перевозчик" %}{% else %}{% trans "Могу перевезти" %}{% endif %}</div>
             <div class="card_cargo_type">{% trans "Тип посылки:" %} <div class="orange">{{ route.get_cargo_type_display }}</div></div>
         </div>
-        <div class="route_btn phone inactive" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
+        <div class="route_btn inactive" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
             <img src="{% static "v2/icons/widgets/w_route_card/phone_half_opacity.svg" %}" alt="">
             <div class="route_btn_title big">{{ route.phone }}</div>
         </div>
@@ -33,7 +33,7 @@
             <div class="card_owner_type {{ route.owner_type }}">{% if route.owner_type == 'customer' %}{% trans "Нужен перевозчик" %}{% else %}{% trans "Могу перевезти" %}{% endif %}</div>
             <div class="card_cargo_type">{% trans "Тип посылки:" %} <div class="orange">{{ route.get_cargo_type_display }}</div></div>
         </div>
-        <div class="route_btn phone inactive" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
+        <div class="route_btn inactive" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
             <img src="{% static "v2/icons/widgets/w_route_card/phone_half_opacity.svg" %}" alt="">
             <div class="route_btn_title big">{{ route.phone }}</div>
         </div>

templates/v2/content_widgets/w_route_card/route_card_info_data_for_search.html

@@ -12,7 +12,7 @@
             <div class="card_cargo_type">{% trans "Тип посылки:" %} <div class="orange">{{ route.get_cargo_type_display }}</div></div>
         </div>
         <div class="respond_route_cont" style="display: none;">
-            <div class="route_btn phone unhovered" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
+            <div class="route_btn unhovered" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
                 <img src="{% static "v2/icons/widgets/w_route_card/phone.svg" %}" alt="">
                 <div class="route_btn_title big">{{ route.phone|truncatechars:20 }}</div>
             </div>
@@ -20,7 +20,7 @@
                 <img src="{% static "v2/icons/widgets/w_route_card/chat.png" %}" alt="">
             </div>
         </div>
-        <div class="route_btn solid" onclick="respondBtnClickEvent(this)" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 38.5px;">
+        <div class="route_btn hide_in_mobile solid" onclick="respondBtnClickEvent(this)" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 38.5px;">
             <div class="route_btn_title big">{% trans "Откликнуться" %}</div>
         </div>
     </div>

templates/v2/widgets/w_route_card_for_search.html

@@ -4,5 +4,5 @@
 <div class="w_customer_route_card w_route_card" data-route_id="{{ route.id }}" data-owner_type="{{ route.owner_type }}">
     {% include 'v2/content_widgets/w_route_card/route_card_info_data_for_search.html' %}
     {% include 'v2/content_widgets/w_route_card/route_card_route_data.html' %}
-
+    {% include 'v2/content_widgets/w_route_card/route_card_actions_container_for_search.html' %}
 </div>