0.0.130 search routes

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

static/v2/css/forms.css

@@ -110,9 +110,30 @@
         font-size: var(--error-font-size);
         color: var(--error-color);
     }
+
+    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;
+    }
 }
 
-.form_line{
+form {
+
+    .form_line{
         --display: flex;
         &._50_grid {
             --display: grid;
@@ -121,9 +142,9 @@
         }
         display: var(--display);
         justify-content: space-between;
-}
+    }
 
-button[type="submit"]{
+    button[type="submit"]{
         --submit-button-bg: #FF613A;
         --submit-button-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
 
@@ -150,4 +171,24 @@ button[type="submit"]{
         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);
+        }
+    }
 }

static/v2/css/pages/p_search_route_results.css

@@ -6,3 +6,9 @@
     width: 100%;
     text-align: center;
 }
+
+.routes_content_part{
+    margin-top: 50px;
+    display: grid;
+    grid-template-columns: 30% calc(100% - 30%);
+}

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);

templates/v2/blocks/b_filter_routes.html

@@ -0,0 +1,29 @@
+{% load static %}
+{% load i18n %}
+<link rel="stylesheet" href="{% static "v2/css/blocks/b_filter_routes.css" %}">
+
+<div class="b_filter_routes">
+    <div class="title">{% trans "Все фильтры" %}</div>
+    <form name="filter_routes">
+        <div class="label" style="margin-bottom: 16px;">{% trans "Способ перевозки" %}</div>
+        <div class="field_container line" data-type="checkbox" data-name="type_transport">
+            <div class="checkbox{% if route_form.initial.type_transport %} checked{% endif %}" onclick="chooseCheckbox(this)"></div>
+            <div class="checkbox_label" onclick="chooseCheckbox(this)">{% trans "Автоперевозка" %}</div>
+            {% if route_form.errors.type_transport %}<div class="error_container">{{ route_form.errors.type_transport.0 }}</div>{% endif %}
+        </div>
+        <div class="field_container line" data-type="checkbox" data-name="type_transport">
+            <div class="checkbox{% if route_form.initial.type_transport %} checked{% endif %}" onclick="chooseCheckbox(this)"></div>
+            <div class="checkbox_label" onclick="chooseCheckbox(this)">{% trans "Авиатранспорт" %}</div>
+            {% if route_form.errors.type_transport %}<div class="error_container">{{ route_form.errors.type_transport.0 }}</div>{% endif %}
+        </div>
+        <div class="field_container" data-type="select" data-name="cargo_type">
+            <label for="id_cargo_type">{% trans "Тип посылки" %}</label>
+            <select name="cargo_type" id="id_cargo_type">
+                <option value="">{% trans "Любой" %}</option>
+                {% for cargo_type in route_form.fields.cargo_type.choices %}
+                    <option value="{{ cargo_type.0 }}">{{ cargo_type.1 }}</option>
+                {% endfor %}
+            </select>
+        </div>
+    </form>
+</div>

templates/v2/pages/p_search_route_results.html

@@ -17,6 +17,9 @@
     <div class="title">{% trans "Поиск посылки" %}</div>
     {% include 'v2/blocks/b_search_routes.html' %}
     <div class="routes_content_part">
+        {% include "v2/blocks/b_filter_routes.html" %}
+        <div>
 
         </div>
+    </div>
 {% endblock %}