diff --git a/static/v2/css/blocks/b_filter_routes.css b/static/v2/css/blocks/b_filter_routes.css index ae1e688..b674f83 100644 --- a/static/v2/css/blocks/b_filter_routes.css +++ b/static/v2/css/blocks/b_filter_routes.css @@ -1,12 +1,21 @@ .b_filter_routes{ --form-title-font-size: 24px; - padding: 20px; - background: #FFFFFF; - border-radius: 10px; height: fit-content; box-sizing: border-box; + + .overlay{ + --bg: #F8F8F8CC; + --backdrop-filter: blur(2px); + } + + .b_filter_routes_content{ + box-sizing: border-box; + border-radius: 10px; + padding: 20px; + background: #FFFFFF; + } .title{ font-size: var(--form-title-font-size); font-weight: 700; @@ -19,4 +28,98 @@ margin: 0 0 10px 0; } } + + @media (max-width: 800px) { + --modal-width: calc(100% - 32px); + position: fixed; + top: 0; + left: 0; + .b_filter_routes_content{ + width: var(--modal-width); + position: fixed; + top: 169px; + z-index: 100000000; + left: calc(50dvw - (var(--modal-width) / 2)); + } + } +} + +.b_filter_routes_modal_handler{ + --bg: #FF613A; + --border-radius: 0 10px 10px 0; + --left: 0; + --top: calc(50% - 63.5px); + --width: 25px; + --height: 127px; + + --color: #fff; + + background: var(--bg); + border-radius: var(--border-radius); + + display: none; + position: fixed; + + left: var(--left); + top: var(--top); + width: var(--width); + height: var(--height); + + .b_filter_routes_modal_handler_content{ + position: relative; + height: 127px; + rotate: 0deg; + top: 0; + left: 0; + } + img{ + --filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(74deg) brightness(122%) contrast(112%); + --rotate: 0; + + filter: var(--filter); + rotate: var(--rotate); + width: 7px; + display: block; + position: absolute; + left: 8px; + &:first-of-type{ + top: 19px; + } + &:last-of-type{ + top: 94px; + } + } + div{ + --rotate: 270deg; + --top: 56px; + --left: -9px; + + color: var(--color); + font-size: 12px; + position: absolute; + + rotate: var(--rotate); + top: var(--top); + left: var(--left); + } + + z-index: 10000000000000; + + &.active{ + --bg: #E6E6E6; + --color: #27242499; + --border-radius: 10px 0 0 10px; + --left: calc(100% - var(--width)); + div{ + --rotate: 90deg; + } + img{ + --rotate: 180deg; + --filter: brightness(0) saturate(100%) invert(16%) sepia(6%) saturate(406%) hue-rotate(2deg) brightness(96%) contrast(82%); + } + } + + @media (max-width: 800px) { + display: block; + } } \ No newline at end of file diff --git a/static/v2/css/pages/p_search_route_results.css b/static/v2/css/pages/p_search_route_results.css index 5b5469b..9c61aa3 100644 --- a/static/v2/css/pages/p_search_route_results.css +++ b/static/v2/css/pages/p_search_route_results.css @@ -12,4 +12,7 @@ display: grid; grid-template-columns: 30% calc(100% - 30% - 41px); gap: 41px; + @media (max-width: 800px) { + grid-template-columns: 1fr; + } } \ No newline at end of file diff --git a/static/v2/css/service/btns.css b/static/v2/css/service/btns.css index f49d020..09c24fc 100644 --- a/static/v2/css/service/btns.css +++ b/static/v2/css/service/btns.css @@ -68,4 +68,5 @@ display: var(--display); cursor: pointer; -} \ No newline at end of file +} + diff --git a/static/v2/css/service/modal.css b/static/v2/css/service/modal.css index 0353526..630b3d5 100644 --- a/static/v2/css/service/modal.css +++ b/static/v2/css/service/modal.css @@ -4,12 +4,16 @@ display: block; } .overlay{ + --bg: #0000009C; + --backdrop-filter: none; + position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: #0000009C; + background: var(--bg); + backdrop-filter: var(--backdrop-filter); z-index: 10000000; } } \ No newline at end of file diff --git a/static/v2/css/widgets/w_route_card.css b/static/v2/css/widgets/w_route_card.css index b2e5f9c..cef9e59 100644 --- a/static/v2/css/widgets/w_route_card.css +++ b/static/v2/css/widgets/w_route_card.css @@ -50,6 +50,9 @@ --route-number-margin-top: 5px; --from-to-place-data-width: 205px; + @media (max-width: 1160px) { + --from-to-place-data-width: 100%; + } background: var(--route-card-bg); margin: var(--route-card-margin); @@ -91,8 +94,6 @@ } } - /* mobile end !!!*/ - position: relative; .card_owner_name{ @@ -157,6 +158,15 @@ overflow-wrap: break-word; color: #27242499; } + @media (max-width: 800px) { + div{ + font-size: 10px; + } + img{ + width: 24px; + height: 24px; + } + } } .route_clicked_msg_for_unregistered_user{ display: none; @@ -213,139 +223,167 @@ } } } - .route_card_route_data{ - margin-top: var(--route_card_route_data-margin-top); - display: flex; - justify-content: space-between; - gap: 60px; - + .route_card_route_data_cont{ &.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; - background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow_mobile.svg"); - background-size: 4px; - } - } - .route_transport, .route_date_data{ - &.route_transport{ - margin-bottom: 0; - margin-top: 35px; - } - &.route_date_data{ - margin-top: 0; - margin-bottom: 5px; - &:last-of-type{ - margin-bottom: 39px; + display: block; + .route_card_route_data { + 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; + background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow_mobile.svg"); + background-size: 4px; } } - justify-content: left!important; - } - .arrival_to { - text-align: left!important; + + .place_title{ + width: 100%; + --max-width: var(--from-to-place-data-width)!important; + background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF var(--max-width))!important; + } + + .route_transport, .route_date_data { + &.route_transport { + margin-bottom: 0; + margin-top: 35px; + } + + &.route_date_data { + margin-top: 0; + margin-bottom: 5px; + + &:last-of-type { + margin-bottom: 39px; + } + } + + justify-content: left !important; + } + + .arrival_to { + text-align: left !important; + } } } } - .from_to_place_data{ - width: var(--from-to-place-data-width); - @media (max-width: 992px) { - --big-font-size: 14px; - } - &:has(.arrival_to){ - .place{justify-content: right} - } &:has(.departure_from){ - .place{justify-content: left} - } - @media (max-width: 1160px) {.place{justify-content: left!important;}} - .label{ - color: #27242499; - font-size: var(--big-font-size); - font-weight: 600; - margin-bottom: 10px; - &.departure_from{ - text-align: left; - } &.arrival_to{ - text-align: right; + .route_card_route_data{ + margin-top: var(--route_card_route_data-margin-top); + display: flex; + justify-content: space-between; + gap: 60px; + + .from_to_place_data{ + width: var(--from-to-place-data-width); + @media (max-width: 992px) { + --big-font-size: 14px; } - } - .place{ - display: flex; - align-items: center; - gap: 10px; - .country{ + &:has(.arrival_to){ + .place{justify-content: right} + } &:has(.departure_from){ + .place{justify-content: left} + } + @media (max-width: 1160px) {.place{justify-content: left!important;}} + .label{ + color: #27242499; + font-size: var(--big-font-size); + font-weight: 600; + margin-bottom: 10px; + &.departure_from{ + text-align: left; + } &.arrival_to{ + text-align: right; + } + } + .place{ display: flex; align-items: center; - gap: 5px; + gap: 10px; + .country{ + display: flex; + align-items: center; + gap: 5px; + img{ + width: 16px; + height: 12px; + display: block; + object-fit: contain; + box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1); + } + .country_code{ + color: #27242499; + font-size: var(--medium-font-size); + } + } + .place_title{ + --max-width: calc(var(--from-to-place-data-width) - 45.3px); + font-size: var(--big-font-size); + font-weight: 800; + max-width: var(--max-width); + overflow: hidden; + white-space: nowrap; + color: transparent; + background-clip: text; + -webkit-background-clip: text; + background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF calc(var(--max-width) - 30px)); + } + } + } + .route_way_data{ + @media (max-width: 992px) { + --medium-font-size: 12px; + } + flex-grow: 1; + .route_transport{ + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + margin-bottom: 10px; + margin-top: 8px; + .route_transport_name{ + font-size: var(--medium-font-size); + font-weight: 600; + } img{ - width: 16px; height: 12px; display: block; - object-fit: contain; - box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1); } - .country_code{ - color: #27242499; - font-size: var(--medium-font-size); - } - } - .place_title{ - font-size: var(--big-font-size); - font-weight: 800; - color: #272424; - max-width: calc(100% - 45.3px); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - .route_way_data{ - @media (max-width: 992px) { - --medium-font-size: 12px; - } - flex-grow: 1; - .route_transport{ - display: flex; - align-items: center; - justify-content: center; - gap: 5px; - margin-bottom: 10px; - margin-top: 8px; - .route_transport_name{ - font-size: var(--medium-font-size); - font-weight: 600; - } - img{ - height: 12px; - display: block; } } } } + .dates_inf_cont{ + display: flex; + justify-content: space-between; + } .way_progress_line_container{ position: relative; width: 100%; diff --git a/static/v2/icons/blocks/b_filter_routes/arrow.svg b/static/v2/icons/blocks/b_filter_routes/arrow.svg new file mode 100644 index 0000000..9b9cd65 --- /dev/null +++ b/static/v2/icons/blocks/b_filter_routes/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/v2/js/blocks/b_filter_routes.js b/static/v2/js/blocks/b_filter_routes.js new file mode 100644 index 0000000..a93831a --- /dev/null +++ b/static/v2/js/blocks/b_filter_routes.js @@ -0,0 +1,27 @@ +function toggleFiltersModal(el) { + if (!el) return; + + if (el.classList.contains('active')) { + closeFiltersModal(el) + } else { + openFiltersModal(el) + } +} + +function openFiltersModal(el) { + if (!el) return; + + el.classList.add('active'); + + let $modal = $(".b_filter_routes.modal") + $modal.addClass('open'); +} + +function closeFiltersModal(el) { + if (!el) return; + + el.classList.remove('active'); + + let $modal = $(".b_filter_routes.modal") + $modal.removeClass('open'); +} \ No newline at end of file diff --git a/static/v2/js/pages/p_search_route_results.js b/static/v2/js/pages/p_search_route_results.js index 853cddf..1b48f89 100644 --- a/static/v2/js/pages/p_search_route_results.js +++ b/static/v2/js/pages/p_search_route_results.js @@ -1,4 +1,8 @@ $(document).ready(function() { + if (window.innerWidth < 800) { + $(".b_filter_routes").addClass('modal'); + return; + } let header_height = $("#header_bg")[0].offsetHeight; let _scroll = new scroll({ attach_top: header_height + 20, diff --git a/static/v2/js/service/scroll.js b/static/v2/js/service/scroll.js index a97ca3e..83feed5 100644 --- a/static/v2/js/service/scroll.js +++ b/static/v2/js/service/scroll.js @@ -19,7 +19,7 @@ class scroll{ $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.getPropertyValue('margin-top'); $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.split('p') $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.length > 0? $unnatach_bottom_el_margin_top[0] : 0; - this.$el.style.top = (window.scrollY - $unnatach_bottom_el_margin_top) + 'px'; + this.$el.style.top = (window.scrollY - $unnatach_bottom_el_margin_top) + this.top + 'px'; this.$el.style.position = "absolute"; this.attached_by_bottom_el = true; return; diff --git a/templates/tb_base.html b/templates/tb_base.html index 5c23975..b63fbe6 100644 --- a/templates/tb_base.html +++ b/templates/tb_base.html @@ -216,13 +216,13 @@ function gtag_report_conversion(url) { {# #} {# #} -
-
- - - -
-
+{#
#} +{#
#} +{# #} +{# #} +{# #} +{#
#} +{#
#} {% endif %}
diff --git a/templates/v2/blocks/b_filter_routes.html b/templates/v2/blocks/b_filter_routes.html index 219e604..5d839b7 100644 --- a/templates/v2/blocks/b_filter_routes.html +++ b/templates/v2/blocks/b_filter_routes.html @@ -2,28 +2,38 @@ {% load i18n %} +
+
+ +
{% trans "Фильтр" %}
+ +
+
-
{% trans "Все фильтры" %}
-
-
{% trans "Способ перевозки" %}
-
-
-
{% trans "Автоперевозка" %}
- {% if route_form.errors.type_transport %}
{{ route_form.errors.type_transport.0 }}
{% endif %} -
-
-
-
{% trans "Авиатранспорт" %}
- {% if route_form.errors.type_transport %}
{{ route_form.errors.type_transport.0 }}
{% endif %} -
-
- - -
-
+
+
+
{% trans "Все фильтры" %}
+
+
{% trans "Способ перевозки" %}
+
+
+
{% trans "Автоперевозка" %}
+ {% if route_form.errors.type_transport %}
{{ route_form.errors.type_transport.0 }}
{% endif %} +
+
+
+
{% trans "Авиатранспорт" %}
+ {% if route_form.errors.type_transport %}
{{ route_form.errors.type_transport.0 }}
{% endif %} +
+
+ + +
+
+
\ No newline at end of file diff --git a/templates/v2/content_widgets/w_route_card/route_card_info_data_for_search.html b/templates/v2/content_widgets/w_route_card/route_card_info_data_for_search.html index 67b330a..b64906a 100644 --- a/templates/v2/content_widgets/w_route_card/route_card_info_data_for_search.html +++ b/templates/v2/content_widgets/w_route_card/route_card_info_data_for_search.html @@ -56,7 +56,7 @@
{{ route.owner }}
-
+
{% if route.comment %} {{ route.comment|linebreaksbr }} @@ -65,10 +65,15 @@ {% endif %}
{% if not user.if_authenticated %} -
+
{% trans "Текст сообщения доступен только авторизированным пользователям." %}
+
+ +
{% trans "Текст сообщения доступен только авторизированным пользователям." %}
+ {% trans "Войти" %} +
{% endif %}
{% trans "Объявление №" %} {{ route.id }}
diff --git a/templates/v2/content_widgets/w_route_card/route_card_route_data.html b/templates/v2/content_widgets/w_route_card/route_card_route_data.html index 7689d64..a70a826 100644 --- a/templates/v2/content_widgets/w_route_card/route_card_route_data.html +++ b/templates/v2/content_widgets/w_route_card/route_card_route_data.html @@ -1,77 +1,8 @@ {% load static %} {% load i18n %} -
-
-
{% trans "Забрать из:" %}
-
-
- -
{{ route.from_city.country.code }}
-
-
- {{ route.from_city.name }} -
-
- {% if route.owner_type == 'mover' %} -
- {% trans "Отправка:" %} -
{{ route.departure_DT|date:'j E Y' }}
-
- {% endif %} -
-
-
-
{{ 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:'j E Y' }}
-
- {% endif %} -
-
-
{% trans "Доставить в:" %}
-
-
- -
{{ route.to_city.country.code }}
-
-
- {{ route.to_city.name }} -
-
- {% if route.owner_type == 'mover' %} -
- {% trans "Прибытие:" %} -
{{ route.arrival_DT|date:'j E Y' }}
-
- {% endif %} -
-
-
-
-
-
-
-
-
-
+
+
{% trans "Забрать из:" %}
@@ -80,7 +11,7 @@
{{ route.from_city.country.code }}
- {{ route.from_city.name }}/{{ route.from_city.country.name }} + {{ route.from_city.name }}
@@ -96,21 +27,17 @@ {% endif %}
-
+
+
+
+
+
+
{% if route.owner_type == 'customer' %}
{% trans "Дата доставки:" %}
{{ route.arrival_DT|date:'j E Y' }}
- {% else %} -
- {% trans "Отправка:" %} -
{{ route.departure_DT|date:'j E Y' }}
-
-
- {% trans "Прибытие:" %} -
{{ route.arrival_DT|date:'j E Y' }}
-
{% endif %}
@@ -121,7 +48,87 @@
{{ route.to_city.country.code }}
- {{ route.to_city.name }}/{{ route.to_city.country.name }} + {{ route.to_city.name }} +
+
+
+
+
+ {% if route.owner_type == 'mover' %} +
+ {% trans "Отправка:" %} +
{{ route.departure_DT|date:'j E Y' }}
+
+ {% endif %} + {% if route.owner_type == 'mover' %} +
+ {% trans "Прибытие:" %} +
{{ route.arrival_DT|date:'j E Y' }}
+
+ {% endif %} +
+ + +
+
+
+
+
+
+
+
+
+
+
{% 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:'j E Y' }}
+
+ {% else %} +
+ {% trans "Отправка:" %} +
{{ route.departure_DT|date:'j E Y' }}
+
+
+ {% trans "Прибытие:" %} +
{{ route.arrival_DT|date:'j E Y' }}
+
+ {% endif %} +
+
+
{% trans "Доставить в:" %}
+
+
+ +
{{ route.to_city.country.code }}
+
+
+ {{ route.to_city.name }}/{{ route.to_city.country.name }} +
diff --git a/templates/v2/pages/p_search_route_results.html b/templates/v2/pages/p_search_route_results.html index 73b41e7..320ef50 100644 --- a/templates/v2/pages/p_search_route_results.html +++ b/templates/v2/pages/p_search_route_results.html @@ -14,6 +14,7 @@ + {% endblock %} {% block content %}