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

@@ -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{
+    select{
-    --display: flex;
+        --select-padding: 14px 10px;
-    &._50_grid {
+        --select-bg: #FFFFFF;
-        --display: grid;
+        --select-border: #E6E6E6;
-        grid-template-columns: repeat(2, 1fr);
+        --select-font-size: 14px;
-        gap: 40px;
+        --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"]{
+form {
-    --submit-button-bg: #FF613A;
-    --submit-button-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
 
-    --submit-button-border: none;
+    .form_line{
-    --submit-button-border-radius: 10px;
+        --display: flex;
-    --submit-button-font-size: 18px;
+        &._50_grid {
-    --submit-button-color: #FFFFFF;
+            --display: grid;
-    --submit-button-font-weight: 600;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 40px;
+        }
+        display: var(--display);
+        justify-content: space-between;
+    }
 
-    --submit-button-width: 100%; /* initial */
+    button[type="submit"]{
-    --submit-button-padding: 17px;
+        --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);
+        --submit-button-width: 100%; /* initial */
-    box-shadow: var(--submit-button-box-shadow);
+        --submit-button-padding: 17px;
 
-    width: var(--submit-button-width);
+        outline: none;
-    padding: var(--submit-button-padding);
 
-    border: var(--submit-button-border);
+        background: var(--submit-button-bg);
-    border-radius: var(--submit-button-border-radius);
+        box-shadow: var(--submit-button-box-shadow);
 
-    color: var(--submit-button-color);
+        width: var(--submit-button-width);
-    font-size: var(--submit-button-font-size);
+        padding: var(--submit-button-padding);
-    font-weight: var(--submit-button-font-weight);
+
+        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);
+        }
+    }
 }

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

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 %}