diff --git a/static/v2/css/blocks/b_filter_routes.css b/static/v2/css/blocks/b_filter_routes.css new file mode 100644 index 0000000..1b4f274 --- /dev/null +++ b/static/v2/css/blocks/b_filter_routes.css @@ -0,0 +1,20 @@ +.b_filter_routes{ + --form-title-font-size: 24px; + + padding: 20px; + background: #FFFFFF; + + border-radius: 10px; + .title{ + font-size: var(--form-title-font-size); + font-weight: 700; + margin-bottom: 20px; + margin-top: 0; + } + + form{ + .field_container{ + margin: 0 0 10px 0; + } + } +} \ No newline at end of file diff --git a/static/v2/css/forms.css b/static/v2/css/forms.css index fe3dd52..31fc3d8 100644 --- a/static/v2/css/forms.css +++ b/static/v2/css/forms.css @@ -24,7 +24,7 @@ --error-color: #FF0000; box-sizing: border-box; - + &.line{ display: flex; align-items: center; @@ -110,44 +110,85 @@ font-size: var(--error-font-size); color: var(--error-color); } -} -.form_line{ - --display: flex; - &._50_grid { - --display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 40px; + select{ + --select-padding: 14px 10px; + --select-bg: #FFFFFF; + --select-border: #E6E6E6; + --select-font-size: 14px; + --select-border-radius: 10px; + --select-width: 100%; + + width: var(--select-width); + padding: var(--select-padding); + background: var(--select-bg); + border: 1px solid var(--select-border); + border-radius: var(--select-border-radius); + font-size: var(--select-font-size); + outline: none; + appearance: none; + background: white url(/static/img/png/icon-arrow.svg) no-repeat calc(100% - 15px) center; } - display: var(--display); - justify-content: space-between; } -button[type="submit"]{ - --submit-button-bg: #FF613A; - --submit-button-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); +form { - --submit-button-border: none; - --submit-button-border-radius: 10px; - --submit-button-font-size: 18px; - --submit-button-color: #FFFFFF; - --submit-button-font-weight: 600; + .form_line{ + --display: flex; + &._50_grid { + --display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px; + } + display: var(--display); + justify-content: space-between; + } - --submit-button-width: 100%; /* initial */ - --submit-button-padding: 17px; + button[type="submit"]{ + --submit-button-bg: #FF613A; + --submit-button-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); - outline: none; + --submit-button-border: none; + --submit-button-border-radius: 10px; + --submit-button-font-size: 18px; + --submit-button-color: #FFFFFF; + --submit-button-font-weight: 600; - background: var(--submit-button-bg); - box-shadow: var(--submit-button-box-shadow); + --submit-button-width: 100%; /* initial */ + --submit-button-padding: 17px; - width: var(--submit-button-width); - padding: var(--submit-button-padding); + outline: none; - border: var(--submit-button-border); - border-radius: var(--submit-button-border-radius); + background: var(--submit-button-bg); + box-shadow: var(--submit-button-box-shadow); - color: var(--submit-button-color); - font-size: var(--submit-button-font-size); - font-weight: var(--submit-button-font-weight); + width: var(--submit-button-width); + padding: var(--submit-button-padding); + + border: var(--submit-button-border); + border-radius: var(--submit-button-border-radius); + + color: var(--submit-button-color); + font-size: var(--submit-button-font-size); + font-weight: var(--submit-button-font-weight); + } + + --label-color: #000; + --label-required-color: #FF613A; + --label-font-size: 16px; + --label-font-weight: 500; + + .label{ + display: block; + color: var(--label-color); + font-weight: var(--label-font-weight); + &:has(div){ + display: flex; + align-items: center; + gap: 5px; + } + .required_field_icon{ + color: var(--label-required-color); + } + } } \ 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 f583d12..fa12574 100644 --- a/static/v2/css/pages/p_search_route_results.css +++ b/static/v2/css/pages/p_search_route_results.css @@ -5,4 +5,10 @@ margin-top: 60px; width: 100%; text-align: center; +} + +.routes_content_part{ + margin-top: 50px; + display: grid; + grid-template-columns: 30% calc(100% - 30%); } \ No newline at end of file diff --git a/static/v2/css/widgets/w_datarangepicker.css b/static/v2/css/widgets/w_datarangepicker.css index 485a197..3441f44 100644 --- a/static/v2/css/widgets/w_datarangepicker.css +++ b/static/v2/css/widgets/w_datarangepicker.css @@ -7,7 +7,7 @@ gap: 10px; border: 2px solid var(--range-picker-border); border-radius: var(--range-picker-border-radius); - padding: 24px 10px; + padding: 22px 10px; background: #FFFFFF; input{ width: calc(100% - 28px); diff --git a/templates/v2/blocks/b_filter_routes.html b/templates/v2/blocks/b_filter_routes.html new file mode 100644 index 0000000..f58d8ce --- /dev/null +++ b/templates/v2/blocks/b_filter_routes.html @@ -0,0 +1,29 @@ +{% load static %} +{% load i18n %} + + +
+
{% 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/pages/p_search_route_results.html b/templates/v2/pages/p_search_route_results.html index d91f483..42ab478 100644 --- a/templates/v2/pages/p_search_route_results.html +++ b/templates/v2/pages/p_search_route_results.html @@ -17,6 +17,9 @@
{% trans "Поиск посылки" %}
{% include 'v2/blocks/b_search_routes.html' %}
+ {% include "v2/blocks/b_filter_routes.html" %} +
+
{% endblock %} \ No newline at end of file