sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.04 form poster

Browse Source
This commit is contained in:
SBD
2025-01-10 00:57:31 +03:00
parent 75a312c1d6
commit 72f04e0d48
28 changed files with 331 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/styles(boris).css
View File

@@ -28,7 +28,7 @@
}
.wrapper_main{
max-width: 1280px;
max-width: 1720px;
margin: auto;
}

2
static/css/styles.css
View File

@@ -153,7 +153,7 @@ html, body{
.wrapper_content {
margin: 20px;
max-width: 1280px;
max-width: 1720px;
position: relative;
min-height: 695px;
max-height: 100%;

36
static/v2/css/forms.css
View File

@@ -11,6 +11,12 @@
--label-font-size: 16px;
--label-font-weight: 500;
--textarea-min-width: 100%;
--textarea-max-width: 100%;
--textarea-width: 100%;
--textarea-height: unset;
--textarea-resize: none;
box-sizing: border-box;
label{
display: block;
@@ -27,9 +33,37 @@
input{
padding: 20px 10px;
border: 1px solid var(--input-border);
border: 2px solid var(--input-border);
border-radius: var(--input-border-radius);
font-size: var(--input-font-size);
font-family: var(--main-font-family), serif;
box-sizing: border-box;
outline: none;
&.dropped{
border: none;
outline: none;
background: none;
padding: 0;
border-radius: 0;
}
&::placeholder{
font-size: var(--placeholder-font-size);
color: var(--placeholder-color);
}
}
textarea{
padding: 20px 10px;
border: 2px solid var(--input-border);
border-radius: var(--input-border-radius);
font-size: var(--input-font-size);
font-family: var(--main-font-family), serif;
min-width: var(--textarea-min-width);
max-width: var(--textarea-max-width);
width: var(--textarea-width);
height: var(--textarea-height);
resize: var(--textarea-resize);
outline: none;
box-sizing: border-box;
&::placeholder{
font-size: var(--placeholder-font-size);
color: var(--placeholder-color);

9
static/v2/css/forms/f_make_poster_order.css Normal file
View File

@@ -0,0 +1,9 @@
.f_make_poster_order{
.form_line{
padding: 40px 0;
border-bottom: 1px solid #E6E6E6;
&:last-of-type{
border-bottom: none;
}
}
}

7
static/v2/css/twb.css Normal file
View File

@@ -0,0 +1,7 @@
:root{
--main-font-family: 'Inter';
}
.trans_block{
display: none!important;
}

20
static/v2/css/widgets/w_datarangepicker.css Normal file
View File

@@ -0,0 +1,20 @@
.w_daterangepicker{
--range-picker-border: #E6E6E6;
--range-picker-border-radius: 10px;
.date_range_input_cont{
display: flex;
justify-content: space-between;
gap: 10px;
border: 2px solid var(--range-picker-border);
border-radius: var(--range-picker-border-radius);
padding: 24px 10px;
background: #FFFFFF;
input{
width: calc(100% - 28px);
}
img{
width: 18px;
height: 20px;
}
}
}

15
static/v2/css/widgets/w_pay_attention.css Normal file
View File

@@ -0,0 +1,15 @@
.w_pay_attention {
--pay-attenttion-text-color: #27242499;
display: flex;
align-items: center;
gap: 5px;
margin-top: 20px;
img{
height: 24px;
width: 24px;
display: block;
}
div{
color: var(--pay-attenttion-text-color);
}
}

29
static/v2/css/widgets/w_radio_inputs.css Normal file
View File

@@ -0,0 +1,29 @@
.w_radio_inputs{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px 40px;
margin-top: 20px;
--radio-font-size: 16px;
.cw_w_radio_inputs_radio_input{
display: flex;
align-items: center;
gap: 10px;
.radio{
background: #FFFFFF;
border: 1px solid #E6E6E6;
height: 30px;
width: 30px;
border-radius: 10px;
&:hover{
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
&.checked{
background: #FF613A;
box-shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2);
}
}
.radio_label{
font-size: var(--radio-font-size);
}
}
}

35
static/v2/css/widgets/w_select_country.css
View File

@@ -1,9 +1,9 @@
.w_select_country {
position: relative;
--header-padding: 10px 20px;
--header-padding: 20px 10px;
--select-border: #E6E6E6;
--select-border-radius: 10px 10px 0 0;
--select-height: 48px;
--select-height: 68px;
&.closed{
--select-border-radius: 10px;
@@ -15,9 +15,9 @@
align-items: center;
gap: 10px;
justify-content: space-between;
border: 1px solid var(--select-border);
border: 2px solid var(--select-border);
border-radius: var(--select-border-radius);
padding: 10px;
padding: 19px 10px;
background: #FFFFFF;
.select_country_header_left_part{
@@ -44,12 +44,7 @@
}
}
input{
border: none;
outline: none;
background: none;
padding: 0;
flex-grow: 1;
border-radius: 0;
}
}
.w_select_country_icon{
@@ -68,22 +63,14 @@
max-height: 200px;
overflow: auto;
&::-webkit-scrollbar-thumb {
background-color: #CCCED1FF;
border-radius: 5px;
width: 6px;
display: block;
border: 1px solid #EDEDEDFF;
transition: 200ms all;
}
&::-webkit-scrollbar {
background-color: #EDEDEDFF;
width: 8px;
display: block;
padding-left: 15px;
transition: 500ms all;
opacity: 100%;
border-radius: 5px;
width: 10px;
}
&::-webkit-scrollbar-thumb {
background-color: #FF613A;
border-radius: 20px;
border: 3px solid white;
}
}
.cw_w_select_widget_for_select{

10
static/v2/css/widgets/w_textarea_w_counter.css Normal file
View File

@@ -0,0 +1,10 @@
.w_textarea_w_counter {
--counter-font-size: 14px;
--counter-color: #27242499;
.symbols_counter{
width: 100%;
text-align: right;
font-size: var(--counter-font-size);
color: var(--counter-color);
}
}

3
static/v2/icons/widgets/w_datarangepicker/datarangepicker_icon.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9091 1V4.33333M5.09091 1V4.33333M1 7.66667H19M1.81818 2.66667H18.1818C18.6337 2.66667 19 3.03976 19 3.5V20.1667C19 20.6269 18.6337 21 18.1818 21H1.81818C1.36631 21 1 20.6269 1 20.1667V3.5C1 3.03976 1.36631 2.66667 1.81818 2.66667Z" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 433 B

5
static/v2/icons/widgets/w_pay_attention/attention_icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#FF613A" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M12 7.5V12.75" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 17.25C12.6213 17.25 13.125 16.7463 13.125 16.125C13.125 15.5037 12.6213 15 12 15C11.3787 15 10.875 15.5037 10.875 16.125C10.875 16.7463 11.3787 17.25 12 17.25Z" fill="#FF613A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 588 B

5
static/v2/js/service/trans.js Normal file
View File

@@ -0,0 +1,5 @@
function getTransFromEl (el) {
if (!el) return;
let trans_block = el.querySelector('.trans_block');
return trans_block.dataset.trans
}

51
static/v2/js/widgets/w_daterangepicker.js Normal file
View File

@@ -0,0 +1,51 @@
const locale_ru = new Object({
direction: "ltr",
format: "DD.MM.YYYY",
separator: " - ",
applyLabel: "Принять",
cancelLabel: "Отменить",
weekLabel: "Н",
customRangeLabel: "Custom Range",
});
const locale_en = new Object({
direction: "ltr",
format: "DD.MM.YYYY",
separator: " - ",
applyLabel: "Apply",
cancelLabel: "Cancel",
weekLabel: "W",
customRangeLabel: "Custom Range",
});
let last_opened_daterangepicker = false;
function setLocalSets() {
let locale_lang = document.documentElement.lang === 'ru'? locale_ru : locale_en;
let lang = document.documentElement.lang;
moment.locale(lang);
return locale_lang
}
$(function (){daterangepickerInit($('.date_range_input_cont input'), daterangepickerInit)})
function daterangepickerInit(el, callback) {
$('.date_range_input_cont input').daterangepicker({
"autoapply": true,
"linkedCalendars": false,
"singleDatePicker": true,
"timePicker": false,
"timePicker24Hour": false,
"minDate": moment(),
"locale": setLocalSets(),
}, function (start, end, label) {
let $parent = el.closest('.w_daterangepicker')
if (last_opened_daterangepicker) $parent = last_opened_daterangepicker.closest('.w_daterangepicker');
let $input = $parent.find(".date_range_input_cont input")
$input.val(start.format('DD.MM.YYYY'));
if (callback) callback(el)
});
}

14
static/v2/js/widgets/w_radio_inputs.js Normal file
View File

@@ -0,0 +1,14 @@
function chooseRadioInput(el, callback){
if (!el) return;
let $parent = el.closest('.w_radio_inputs');
if (!$parent) return;
let $radios = $parent.querySelectorAll('.radio');
$radios.forEach(radio => {
radio.classList.remove('checked')
})
el.classList.toggle("checked");
let checked_state = el.classList.contains("checked");
if (callback) callback(checked_state)
}

5
static/v2/js/widgets/w_select_country.js
View File

@@ -39,11 +39,15 @@ let search_country_timeout = false;
function searchCountry(el) {
resetCountrySelect(el)
closeSelectCountry(el)
if (el && el.value.length < 3) closeSelectCountry(el)
if (!el || el.value.length < 3) return;
let $parent = el.closest('.w_select_country');
let $search_icon_cont = $parent.querySelector('.w_select_country_icon');
let $content_part = $parent.querySelector('.w_select_country_content');
$search_icon_cont.src = '/static/v2/loaders/search_spinner.svg'
if (search_country_timeout) {
clearTimeout(search_country_timeout);
search_country_timeout = false;
@@ -59,6 +63,7 @@ function searchCountry(el) {
data_type: 'json',
success: function (data) {
if (!data.res_search_list && data.res_search_list !== '') console.log(`request data has not html => ${url}`);
$search_icon_cont.src = '/static/v2/icons/widgets/w_select_country/pin.svg'
$content_part.innerHTML = data.res_search_list;
openSelectCountry(el)
}, error: function (data) {

15
static/v2/js/widgets/w_textarea_w_counter.js Normal file
View File

@@ -0,0 +1,15 @@
function textareaInputE (el, callback){
if (!el) return;
let $counter = $(".symbols_counter")[0]
let $parent = el.closest(".w_textarea_w_counter")
if (el.value.length > $parent.dataset.max_val){
el.value = el.value.slice(0, -1)
return;
}
let str = `${el.value.length} ${getTransFromEl($parent)} ${$parent.dataset.max_val}`
$counter.innerHTML = str
if (callback) callback(str)
}

1
static/v2/loaders/search_spinner.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="32px" height="32px" viewBox="0 0 128 128" xml:space="preserve"><script type="text/ecmascript" xlink:href="//faviconer.net/jscripts/smil.user.js"/><g><circle cx="16" cy="64" r="16" fill="#ff613a"/><circle cx="16" cy="64" r="16" fill="#ff967c" transform="rotate(45,64,64)"/><circle cx="16" cy="64" r="16" fill="#ffbdac" transform="rotate(90,64,64)"/><circle cx="16" cy="64" r="16" fill="#ffdfd8" transform="rotate(135,64,64)"/><circle cx="16" cy="64" r="16" fill="#ffece8" transform="rotate(180,64,64)"/><circle cx="16" cy="64" r="16" fill="#ffece8" transform="rotate(225,64,64)"/><circle cx="16" cy="64" r="16" fill="#ffece8" transform="rotate(270,64,64)"/><circle cx="16" cy="64" r="16" fill="#ffece8" transform="rotate(315,64,64)"/><animateTransform attributeName="transform" type="rotate" values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64" calcMode="discrete" dur="720ms" repeatCount="indefinite"></animateTransform></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
templates/pages/profile/p_user_profile.html
View File

@@ -31,6 +31,9 @@
<script src='{% static "js/user_profile_2.js" %}'> </script>
<script src='{% static "v2/js/widgets/w_select_country.js" %}'></script>
<script src='{% static "v2/js/widgets/w_radio_inputs.js" %}'></script>
<script src='{% static "v2/js/widgets/w_daterangepicker.js" %}'></script>
<script src='{% static "v2/js/widgets/w_textarea_w_counter.js" %}'></script>
{% include "connect_ws_js.html" %}

3
templates/tb_base.html
View File

@@ -84,6 +84,7 @@ function gtag_report_conversion(url) {
<link rel="stylesheet" href="{% static 'v2/css/twb.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/styles(boris).css' %}" >
<link rel="stylesheet" href="{% static 'css/mobile_styles.css' %}">
@@ -95,6 +96,7 @@ function gtag_report_conversion(url) {
<script src='{% static "js/find_route.js" %}'></script>
<script src="{% static "js/filters_functions_find_route.js" %}"></script>
<script src="{% static "js/dynamic_loading_routes.js" %}"></script>
<script src="{% static "v2/js/service/trans.js" %}"></script>
<script src="{% static "js/user_profile.js" %}"></script>
<script src="{% static "js/user_profile_2.js" %}"></script>
<script src="{% static "js/ion.rangeSlider.min.js" %}"></script>
@@ -102,7 +104,6 @@ function gtag_report_conversion(url) {
{# <script src="{% static "js/range_calendar.js" %}"></script>#}
<script src="{% static "js/range_calendar.js" %}"></script>
<link rel="icon" href="{% static 'favicon/favicon.svg' %}" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" sizes="57x57" href={% static 'favicon/apple-icon-57x57.png'%} >

8
templates/v2/blocks/b_make_poster_order.html
View File

@@ -1,8 +1,14 @@
{% load static %}
{% load i18n %}
<link rel="stylesheet" href="{% static "v2/css/forms.css" %}">
<link rel="stylesheet" href="{% static "v2/css/widgets/w_select_country.css" %}">
<link rel="stylesheet" href="{% static "v2/css/blocks/b_make_poster_order.css" %}">
<link rel="stylesheet" href="{% static "v2/css/forms/f_make_poster_order.css" %}">
<link rel="stylesheet" href="{% static "v2/css/widgets/w_select_country.css" %}">
<link rel="stylesheet" href="{% static "v2/css/widgets/w_radio_inputs.css" %}">
<link rel="stylesheet" href="{% static "v2/css/widgets/w_datarangepicker.css" %}">
<link rel="stylesheet" href="{% static "v2/css/widgets/w_pay_attention.css" %}">
<link rel="stylesheet" href="{% static "v2/css/widgets/w_textarea_w_counter.css" %}">
<div class="b_make_poster_order">
<div class="make_poster_order_title">{% trans "Заполните форму, чтобы отправить посылку" %}</div>

7
templates/v2/content_widgets/cw_w_radio_inputs_radio_input.html Normal file
View File

@@ -0,0 +1,7 @@
{% load static %}
{% load i18n %}
<div class="cw_w_radio_inputs_radio_input" data-name="{{ item.0 }}">
<div class="radio" onclick="chooseRadioInput(this)"></div>
<div class="radio_label">{{ item.1 }}</div>
</div>

45
templates/v2/forms/f_make_poster_order.html
View File

@@ -5,13 +5,54 @@
{% trans "Укажите город" as placeholder_for_city %}
<div class="form_line _50_grid">
<div class="field_container">
<div class="field_container" data-name="from_city">
<label for="id_from_city"><div class="required_field_icon">*</div> {% trans "Откуда забрать посылку" %}</label>
{% include 'v2/widgets/w_select_country.html' with name='from_city' placeholder=placeholder_for_city %}
</div>
<div class="field_container">
<div class="field_container" data-name="to_city">
<label for="id_from_city"><div class="required_field_icon">*</div> {% trans "Куда доставить посылку" %}</label>
{% include 'v2/widgets/w_select_country.html' with name='to_city' placeholder=placeholder_for_city %}
</div>
</div>
<div class="form_line">
<div class="field_container" data-name="cargo_type">
<label for="id_cargo_type"><div class="required_field_icon">*</div> {% trans "Выберите кого (что) вы можете перевезти:" %}</label>
{% include 'v2/widgets/w_radio_inputs.html' with name='cargo_type' list=form.fields.cargo_type.choices %}
</div>
</div>
<div class="form_line _50_grid">
<div class="field_container" data-name="cargo_type">
<label for="id_cargo_type"><div class="required_field_icon">*</div> {% trans "Дата доставки посылки" %}</label>
{% include 'v2/widgets/w_daterangepicker.html' with name='arrival_DT' %}
</div>
</div>
<div class="form_line">
<div class="field_container" data-name="type_transport">
{% trans "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" as attention_type_transport %}
<label for="id_cargo_type"><div class="required_field_icon">*</div> {% trans "Каким способом Вы хотите отправить?" %}</label>
{% include 'v2/widgets/w_radio_inputs.html' with name='type_transport' list=form.fields.type_transport.choices %}
{% include 'v2/widgets/w_pay_attention.html' with text=attention_type_transport %}
</div>
</div>
<div class="form_line">
<div class="field_container" style="width: 100%" data-name="phone">
{% trans "Если вы оставите это поле пустым - перевозчики смогут только написать вам в личные сообщения на нашем сайте TripWB.com" as attention_phone %}
<label for="id_cargo_type">{% trans "Контактный номер телефона, по которому с Вами могут связаться перевозчики" %}</label>
<input style="height: unset;width: calc(50% - 40px);" type="text" name="phone" id="id_phone" placeholder="{% trans 'Укажите телефон' %}">
{% include 'v2/widgets/w_pay_attention.html' with text=attention_phone %}
</div>
</div>
<div class="form_line">
<div class="field_container" style="width: 100%;--textarea-height: 130px;" data-name="comment">
{% trans 'Если желаете, то здесь можно указать важную информацию, например: вес, габариты посылки, количество попутчиков и т.д.)' as comment_placeholder %}
<label for="id_cargo_type">{% trans "Примечание (необязательно)" %}</label>
{% include 'v2/widgets/w_textarea_w_counter.html' with name='comment' placeholder=comment_placeholder max_val='300' %}
</div>
</div>
<div class="form_line">
<div class="field_container line" data-name="comment">
<div class="checkbox"></div>
</div>
</div>
</form>

9
templates/v2/widgets/w_daterangepicker.html Normal file
View File

@@ -0,0 +1,9 @@
{% load static %}
{% load i18n %}
<div class="w_daterangepicker">
<div class="date_range_input_cont">
<input class="dropped" type="text" name="{{ name }}" id="id_{{ name }}">
<img src="{% static "v2/icons/widgets/w_datarangepicker/datarangepicker_icon.svg" %}" alt="">
</div>
</div>

7
templates/v2/widgets/w_pay_attention.html Normal file
View File

@@ -0,0 +1,7 @@
{% load static %}
{% load i18n %}
<div class="w_pay_attention">
<img src="{% static "v2/icons/widgets/w_pay_attention/attention_icon.svg" %}" alt="">
<div>{{ text }}</div>
</div>

8
templates/v2/widgets/w_radio_inputs.html Normal file
View File

@@ -0,0 +1,8 @@
{% load static %}
{% load i18n %}
<div class="w_radio_inputs">
{% for item in list %}
{% include 'v2/content_widgets/cw_w_radio_inputs_radio_input.html' %}
{% endfor %}
</div>

2
templates/v2/widgets/w_select_country.html
View File

@@ -8,7 +8,7 @@
<img class="country_flag_img_container">
<div class="country_code"></div>
</div>
<input type="text" name="{{ name }}" id="id_{{ name }}" placeholder="{{ placeholder }}" oninput="searchCountry(this)" data-value="" data-id="">
<input class="dropped" type="text" name="{{ name }}" id="id_{{ name }}" placeholder="{{ placeholder }}" oninput="searchCountry(this)" data-value="" data-id="">
</div>
<img class="w_select_country_icon" src="{% static "v2/icons/widgets/w_select_country/pin.svg" %}" alt="">
</div>

7
templates/v2/widgets/w_textarea_w_counter.html Normal file
View File

@@ -0,0 +1,7 @@
{% load static %}
{% load i18n %}
<div class="w_textarea_w_counter" data-max_val="{{ max_val }}">
<div class="trans_block" data-trans="{% trans 'из' %}"></div>
<textarea name="{{ name }}" id="id_{{ name }}" oninput="textareaInputE(this)"></textarea>
<div class="symbols_counter">0 {% trans "из" %} {{ max_val }}</div>
</div>