diff --git a/RoutesApp/funcs.py b/RoutesApp/funcs.py index 58fe39a..424b9b9 100644 --- a/RoutesApp/funcs.py +++ b/RoutesApp/funcs.py @@ -107,7 +107,7 @@ def get_profile_new_route_page_html(request, data): # form.errors.append({'__all__': f'Ошибка: {str(e)}'}) print(str(e)) - html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request) + html = render_to_string('v2/blocks/b_make_poster_order.html', Dict, request=request) return html diff --git a/RoutesApp/js_views.py b/RoutesApp/js_views.py index a4e226f..751396a 100644 --- a/RoutesApp/js_views.py +++ b/RoutesApp/js_views.py @@ -382,7 +382,7 @@ def create_or_change_route_ajax(request, route_id=None): 'owner_type': data['owner_type'], }) - html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request) + html = render_to_string('v2/blocks/b_make_poster_order.html', Dict, request=request) return JsonResponse({'html': html}, status=400) obj = form.save(commit=False) @@ -420,7 +420,7 @@ def create_or_change_route_ajax(request, route_id=None): if 'errors' in routes_Dict: form.errors.update(routes_Dict['errors']) Dict.update({'form': form}) - html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request) + html = render_to_string('v2/blocks/b_make_poster_order.html', Dict, request=request) return JsonResponse({'html': html}, status=400) html = render_to_string('blocks/profile/b_my_routes.html', routes_Dict, request=request) @@ -443,5 +443,5 @@ def create_or_change_route_ajax(request, route_id=None): } # Dict = {'form': errors_Dict} Dict.update({'form': errors_Dict}) - html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request) + html = render_to_string('v2/blocks/b_make_poster_order.html', Dict, request=request) return JsonResponse({'html': html}, status=400) \ No newline at end of file diff --git a/static/v2/css/blocks/b_make_poster_order.css b/static/v2/css/blocks/b_make_poster_order.css new file mode 100644 index 0000000..563d3e9 --- /dev/null +++ b/static/v2/css/blocks/b_make_poster_order.css @@ -0,0 +1,13 @@ +.b_make_poster_order { + --title-font-size: 44px; + --title-font-weight: 700; + --title-margin-bottom: 60px; + + .make_poster_order_title{ + width: 100%; + font-size: var(--title-font-size); + font-weight: var(--title-font-weight); + margin-bottom: var(--title-margin-bottom); + text-align: center; + } +} \ No newline at end of file diff --git a/static/v2/css/forms.css b/static/v2/css/forms.css new file mode 100644 index 0000000..7707082 --- /dev/null +++ b/static/v2/css/forms.css @@ -0,0 +1,49 @@ +.field_container{ + --input-border: #E6E6E6; + --input-font-size: 16px; + --input-border-radius: 10px; + + --placeholder-color: #27242499; + --placeholder-font-size: 16px; + + --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; + } + .required_field_icon{ + color: var(--label-required-color); + } + } + + input{ + padding: 20px 10px; + border: 1px solid var(--input-border); + border-radius: var(--input-border-radius); + font-size: var(--input-font-size); + &::placeholder{ + font-size: var(--placeholder-font-size); + color: var(--placeholder-color); + } + } +} + +.form_line{ + --display: flex; + &._50_grid { + --display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px; + } + display: var(--display); + justify-content: space-between; + +} diff --git a/static/v2/css/widgets/w_select_country.css b/static/v2/css/widgets/w_select_country.css new file mode 100644 index 0000000..4d6ba96 --- /dev/null +++ b/static/v2/css/widgets/w_select_country.css @@ -0,0 +1,59 @@ +.w_select_country { + position: relative; + --header-padding: 10px 20px; + --select-border: #E6E6E6; + --select-border-radius: 10px; + + .w_select_country_header{ + display: flex; + align-items: center; + gap: 10px; + justify-content: space-between; + border: 1px solid var(--select-border); + border-radius: var(--select-border-radius); + padding: 10px; + + .select_country_header_left_part{ + display: flex; + align-items: center; + gap: 10px; + width: calc(100% - 36px); + + .container_inf_about_country{ + display: none; + align-items: center; + gap: 5px; + &:has(img[src]){ + display: flex; + } + img{ + height: 12px; + width: 24px; + object-fit: contain; + } + div{ + color: #27242499; + font-size: 14px; + } + } + input{ + border: none; + outline: none; + background: none; + padding: 0; + flex-grow: 1; + border-radius: 0; + } + } + .w_select_country_icon{ + height: 26px; + } + } + .w_select_country_content{ + position: absolute; + top: 60px; + } + &.closed{ + .w_select_country_content{display: none} + } +} \ No newline at end of file diff --git a/static/v2/icons/widgets/w_select_country/pin.svg b/static/v2/icons/widgets/w_select_country/pin.svg new file mode 100644 index 0000000..e6aec51 --- /dev/null +++ b/static/v2/icons/widgets/w_select_country/pin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/v2/js/service/api.js b/static/v2/js/service/api.js new file mode 100644 index 0000000..532d5fa --- /dev/null +++ b/static/v2/js/service/api.js @@ -0,0 +1,33 @@ +class api { + constructor(props) { + this.url = props.url; + this.data = props.data; + this.data_type = props.data_type; + this.type = props.type || 'POST'; + this.success_callback = props.success; + this.error_callback = props.error_callback; + } + + ajaxRequest (){ + if (!this.url) return; + + let request_data = { + headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()}, + url: this.url, + type: this.type, + data: this.data, + success: function (data) { + if (this.success_callback) this.success_callback(data) + }, error: function (data) { + if (this.error_callback) this.error_callback(data) + } + } + + if (this.data_type === 'formData'){ + request_data.processData = false + request_data.contentType = false + } + + $.ajax(request_data); + } +} \ No newline at end of file diff --git a/static/v2/js/widgets/w_select_country.js b/static/v2/js/widgets/w_select_country.js new file mode 100644 index 0000000..8d4a3f0 --- /dev/null +++ b/static/v2/js/widgets/w_select_country.js @@ -0,0 +1,42 @@ +function toggleSelectCountry(el, callback) { + if (!el) return; + + let $parent = el.closest('.w_select_country'); + if (!$parent) return; + + if ($parent.classList.contains('closed')) { + openSelectCountry(el, callback) + } else { + closeSelectCountry(el, callback); + } +} + +function openSelectCountry(el, callback) { + let $parent = el.closest('.w_select_country'); + if (!$parent) return; + + $parent.classList.remove('closed'); + + if (callback) callback('opened', $parent); +} + +function closeSelectCountry(el, callback) { + let $parent = el.closest('.w_select_country'); + if (!$parent) return; + + $parent.classList.add('closed'); + + if (callback) callback('closed', $parent); +} + +function searchCountry(el) { + let request = new api({ + url: '', + data: '', + data_type: 'formData', + success: function (data) { + }, error: function (data) { + } + }); + request.ajaxRequest() +} \ No newline at end of file diff --git a/templates/tb_base.html b/templates/tb_base.html index 04d6377..997732f 100644 --- a/templates/tb_base.html +++ b/templates/tb_base.html @@ -20,7 +20,7 @@ {% include "inter/meta_OpenGraph_Schema.html" %} - + diff --git a/templates/v2/blocks/b_make_poster_order.html b/templates/v2/blocks/b_make_poster_order.html new file mode 100644 index 0000000..4d911d3 --- /dev/null +++ b/templates/v2/blocks/b_make_poster_order.html @@ -0,0 +1,10 @@ +{% load static %} +{% load i18n %} + + + + +
+
{% trans "Заполните форму, чтобы отправить посылку" %}
+ {% include 'v2/forms/f_make_poster_order.html' %} +
\ No newline at end of file diff --git a/templates/v2/forms/f_make_poster_order.html b/templates/v2/forms/f_make_poster_order.html new file mode 100644 index 0000000..0ce60d3 --- /dev/null +++ b/templates/v2/forms/f_make_poster_order.html @@ -0,0 +1,13 @@ +{% load static %} +{% load i18n %} + +
+ {% trans "Укажите город" as placeholder_for_city %} + +
+
+ + {% include 'v2/widgets/w_select_country.html' with name='from_city' placeholder=placeholder_for_city %} +
+
+
\ No newline at end of file diff --git a/templates/v2/widgets/w_select_country.html b/templates/v2/widgets/w_select_country.html new file mode 100644 index 0000000..4b23203 --- /dev/null +++ b/templates/v2/widgets/w_select_country.html @@ -0,0 +1,17 @@ +{% load static %} +{% load i18n %} + +
+
+
+
+ +
+
+ +
+ +
+
+
+
\ No newline at end of file