0.0.52 w route card
This commit is contained in:
@@ -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{
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user