From 3c1f03de2668991a50942b5fdf411f10020340cd Mon Sep 17 00:00:00 2001 From: SBD Date: Fri, 17 Jan 2025 20:49:35 +0300 Subject: [PATCH] 0.0.46 w route card --- static/v2/css/widgets/w_route_card.css | 160 +++++++++++++----- .../v2/widgets/w_customer_route_card.html | 76 ++++++++- 2 files changed, 194 insertions(+), 42 deletions(-) diff --git a/static/v2/css/widgets/w_route_card.css b/static/v2/css/widgets/w_route_card.css index decb59a..9f69b4b 100644 --- a/static/v2/css/widgets/w_route_card.css +++ b/static/v2/css/widgets/w_route_card.css @@ -1,5 +1,11 @@ .w_route_card { padding: 20px; + + --route-date_splitter-bg: #F1F1F1; + --route-date_splitter-width: 134px; + --route-date_splitter-height: 1.5px; + --route-date_splitter-margin: 5px 0; + --route-card-bg: #FFFFFF; --route-card-margin: 20px 0; --route-card-box_shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2); @@ -116,6 +122,51 @@ justify-content: space-between; gap: 60px; + &.mobile{display: none} + @media (max-width: 1160px) { + display: none; + &.mobile{ + display: grid; + grid-template-columns: 20px calc(100% - 30px); + gap: 10px; + .way_progress_line_container{ + margin-top: 20px; + height: calc(100% - 20px); + .way_progress_round:first-of-type{ + left: unset; + top: 0; + } + .way_progress_round:last-of-type{ + right: unset; + top: calc(100% - 20px); + } + .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{ + height: calc(100% - 10px); + width: 4px; + background-repeat: repeat-y; + } + } + .route_transport, .route_date_data{ + &.route_transport{ + margin-bottom: 0; + margin-top: 35px; + } + &.route_date_data{ + margin-top: 0; + margin-bottom: 39px; + } + justify-content: left!important; + } + .arrival_to { + text-align: left!important; + } + } + } .from_to_place_data{ .label{ color: #27242499; @@ -142,6 +193,7 @@ height: 12px; display: block; object-fit: contain; + box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1); } .country_code{ color: #27242499; @@ -173,48 +225,48 @@ display: block; } } - .way_progress_line_container{ - position: relative; - width: 100%; - height: 15px; - .way_progress_round{ - height: 20px; - width: 20px; - background: #FFFFFF; - border-radius: 100%; - position: absolute; - top: -10px; - z-index: 11; - &:first-of-type{ - border: 3px solid #065BFF; - left: 0; - } - &:last-of-type{ - border: 3px solid #45C226; - right: 0; - } - } - .way_progress_line{ - width: calc(100% - 10px); - margin-left: 10px; - height: 4px; - position: absolute; - top: 2px; - z-index: 1; - background: linear-gradient(90deg, rgba(6,91,255,1) 0%, rgba(69,194,38,1) 100%); - } - .way_progress_arrows_line{ - width: calc(100% - 10px); - margin-left: 10px; - height: 4px; - position: absolute; - top: 2px; - z-index: 10; - background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow.svg"); - background-repeat: repeat-x; - background-size: 10px; - } + } + } + .way_progress_line_container{ + position: relative; + width: 100%; + height: 15px; + .way_progress_round{ + height: 20px; + width: 20px; + background: #FFFFFF; + border-radius: 100%; + position: absolute; + top: -10px; + z-index: 11; + &:first-of-type{ + border: 3px solid #065BFF; + left: 0; } + &:last-of-type{ + border: 3px solid #45C226; + right: 0; + } + } + .way_progress_line{ + width: calc(100% - 10px); + margin-left: 10px; + height: 4px; + position: absolute; + top: 2px; + z-index: 1; + background: linear-gradient(90deg, rgba(6,91,255,1) 0%, rgba(69,194,38,1) 100%); + } + .way_progress_arrows_line{ + width: calc(100% - 10px); + margin-left: 10px; + height: 4px; + position: absolute; + top: 2px; + z-index: 10; + background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow.svg"); + background-repeat: repeat-x; + background-size: 10px; } } .route_card_actions_container{ @@ -222,6 +274,14 @@ display: flex; justify-content: space-between; align-items: center; + &.mobile{display: none;} + @media (max-width: 1160px) { + display: none; + &.mobile{ + display: block; + .delete_route{text-align: center} + } + } .delete_route{ cursor: pointer; color: #27242499; @@ -237,6 +297,12 @@ } } .route_btn{ + @media (max-width: 1160px) { + &.phone{display: none;}; + &.mobile{display: block;} + } + &.mobile{display: none;} + cursor: pointer; &.solid{ --route-btn-width: 222px; @@ -300,4 +366,16 @@ font-weight: 600; } } + .route_date_splitter{ + background: var(--route-date_splitter-bg); + width: var(--route-date_splitter-width); + height: var(--route-date_splitter-height); + margin: var(--route-date_splitter-margin); + } + .container_actions_mobile{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 21px; + margin: 20px 0; + } } \ No newline at end of file diff --git a/templates/v2/widgets/w_customer_route_card.html b/templates/v2/widgets/w_customer_route_card.html index d6bf267..50269e3 100644 --- a/templates/v2/widgets/w_customer_route_card.html +++ b/templates/v2/widgets/w_customer_route_card.html @@ -12,7 +12,7 @@
{% if route.owner_type == 'customer' %}{% trans "Нужен перевозчик" %}{% else %}{% trans "Могу перевезти" %}{% endif %}
{% trans "Тип посылки:" %}
{{ route.get_cargo_type_display }}
-
+
{{ route.phone }}
@@ -76,6 +76,60 @@
+
+
+
+
+
+
+
+
+
+
{% trans "Забрать из:" %}
+
+
+ +
{{ route.from_city.country.code }}
+
+
+ {{ route.from_city.name }}/{{ route.from_city.country.name }} +
+
+
+
+
+
{{ route.get_type_transport_display }}
+ {% if route.type_transport == '' %} + + + {% elif route.type_transport == 'road' %} + + {% elif route.type_transport == 'avia' %} + + {% endif %} +
+
+ {% if route.owner_type == 'customer' %} +
+ {% trans "Дата доставки:" %} +
{{ route.arrival_DT|date:'d F Y' }}
+
+ {% endif %} +
+
+
{% trans "Доставить в:" %}
+
+
+ +
{{ route.to_city.country.code }}
+
+
+ {{ route.to_city.name }}/{{ route.to_city.country.name }} +
+
+
+
+
{% trans "Удалить" %}
@@ -92,4 +146,24 @@
+
+ +
{{ route.phone }}
+
+
+
+
{% trans "Редактировать" %}
+
+
+
+
{% trans "Поднять" %}
+
Осталось поднятий: 2
+
+
+
{% trans "Выделить цветом" %}
+
Осталось выделений: 0
+
+
+
{% trans "Удалить" %}
+
\ No newline at end of file