0.0.52 w route card

static/v2/css/widgets/w_route_card.css

@@ -61,7 +61,42 @@
         --route-text-img-filter: unset;
     }
     .route_card_info_data{
+        &.mobile{display: none}
+        @media (max-width: 1024px) {
+            display: none;
+            &.mobile {
+                display: block;
+                --route-text-container-margin: 50px 0 0 51px;
+
+                .route_card_owner_info {
+                    height: unset;
+                    margin-left: 0;
+                    margin-bottom: 10px;
+                    --medium-font-size: 12px;
+                }
+                .route_card_text_img{
+                    top: 25px;
+                }
+                .route_card_owner_avatar{
+                    top: 31px;
+                }
+                .card_owner_name{
+                    position: absolute;
+                    top: 40px;
+                    left: 74px;
+                    --big-font-size: 12px;
+                }
+            }
+        }
+
+        /* mobile end !!!*/
+
         position: relative;
+
+        .card_owner_name{
+            font-weight: 600;
+            font-size: var(--big-font-size);
+        }
         .route_card_text_img{
             position: absolute;
             top: 5px;
@@ -81,6 +116,9 @@
             z-index: 10;
         }
         .route_card_text_container{
+            @media (max-width: 992px) {
+                --big-font-size: 14px;
+            }
             background: var(--route-text-container-bg);
             padding: var(--route-text-container-padding);
             margin: var(--route-text-container-margin);
@@ -98,10 +136,6 @@
                 display: flex;
                 align-items: center;
                 gap: 10px;
-                .card_owner_name{
-                    font-weight: 600;
-                    font-size: var(--big-font-size);
-                }
                 .card_splitter{
                     height: 22px;
                     width: 2px;
@@ -183,6 +217,9 @@
             }
         }
         .from_to_place_data{
+            @media (max-width: 992px) {
+                --big-font-size: 14px;
+            }
             &:has(.arrival_to){
                 .place{justify-content: right}
             } &:has(.departure_from){
@@ -229,6 +266,9 @@
             }
         }
         .route_way_data{
+            @media (max-width: 992px) {
+                --medium-font-size: 12px;
+            }
             flex-grow: 1;
             .route_transport{
                 display: flex;
@@ -361,6 +401,10 @@
             }
         }
         .route_btn_title{
+            @media (max-width: 768px) {
+                --big-font-size: 14px;
+                --medium-font-size: 12px;
+            }
             color: var(--route-btn-title-color);
             font-size: var(--medium-font-size);
             &.big{

templates/v2/widgets/w_customer_route_card.html

@@ -26,6 +26,29 @@
         </div>
         <div class="route_number">{% trans "Объявление №" %} {{ route.id }}</div>
     </div>
+    <div class="route_card_info_data mobile">
+        <img class="route_card_text_img" src="{% static "v2/icons/widgets/w_route_card/route_card_avatar_spline.svg" %}">
+        <img class="route_card_owner_avatar" src="{{ route.owner.user_profile.avatar.url }}">
+        <div class="route_card_owner_info">
+            <div class="route_card_info_left_part">
+                <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;">
+                <img src="{% static "v2/icons/widgets/w_route_card/phone_half_opacity.svg" %}" alt="">
+                <div class="route_btn_title big">{{ route.phone }}</div>
+            </div>
+        </div>
+        <div class="card_owner_name">{{ route.owner }}</div>
+        <div class="route_card_text_container">
+            {% if route.comment %}
+            	{{ route.comment|linebreaksbr }}
+            {% else %}
+                {% trans "Комментарий отсутствует" %}
+            {% endif %}
+        </div>
+        <div class="route_number">{% trans "Объявление №" %} {{ route.id }}</div>
+    </div>
     <div class="route_card_route_data">
         <div class="from_to_place_data">
             <div class="label departure_from">{% trans "Забрать из:" %}</div>