sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.46 w route card

Browse Source
This commit is contained in:
SBD
2025-01-17 20:49:35 +03:00
parent 01ffddf9ef
commit 3c1f03de26
2 changed files with 194 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
static/v2/css/widgets/w_route_card.css
View File

@@ -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;
}
}

76
templates/v2/widgets/w_customer_route_card.html
View File

@@ -12,7 +12,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 inactive" style="--route-btn-width: max-content;--route-btn-height: min-content;--route-btn-padding: 7.5px 11px;">
<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>
@@ -76,6 +76,60 @@
</div>
</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">
<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:'d F 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>
</div>
<div class="route_card_actions_container">
<div class="delete_route" onclick="deleteRoute(this)">{% trans "Удалить" %}</div>
<div class="right_part_action_btns">
@@ -92,4 +146,24 @@
</div>
</div>
</div>
<div class="route_btn phone mobile inactive" style="--route-btn-width: 100%;--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 class="route_card_actions_container mobile">
<div class="route_btn solid" style="--route-btn-width: auto;" data-action="change" onclick="changeRoute(this)">
<div class="route_btn_title">{% trans "Редактировать" %}</div>
</div>
<div class="container_actions_mobile">
<div class="route_btn" style="--route-btn-height: fit-content;--route-btn-width: auto;" data-action="raise" onclick="raiseRoute(this)">
<div class="route_btn_title">{% trans "Поднять" %}</div>
<div class="route_btn_data">Осталось поднятий: 2</div>
</div>
<div class="route_btn" style="--route-btn-height: fit-content;--route-btn-width: auto;" data-action="highlight" onclick="highlightRoute(this)">
<div class="route_btn_title">{% trans "Выделить цветом" %}</div>
<div class="route_btn_data">Осталось выделений: 0</div>
</div>
</div>
<div class="delete_route" onclick="deleteRoute(this)">{% trans "Удалить" %}</div>
</div>
</div>