diff --git a/static/v2/css/widgets/w_route_card.css b/static/v2/css/widgets/w_route_card.css index 7f6ad39..09ddf8d 100644 --- a/static/v2/css/widgets/w_route_card.css +++ b/static/v2/css/widgets/w_route_card.css @@ -6,7 +6,7 @@ --big-font-size: 16px; --medium-font-size: 14px; - --small-font-size: 12px; + --small-font-size: 10px; --route-text-container-bg: #F1F1F1; --route-text-container-padding: 15px; @@ -22,6 +22,16 @@ --route_card_route_data-margin-top: 30px; + --route-btn-border: 1.5px solid #FF613A; + --route-btn-border-radius: 10px; + --route-btn-padding: 7.5px 0; + --route-btn-width: 171px; + --route-btn-bg: #FFFFFF; + --route-btn-hover-bg: #FF613A; + --route-btn-hover-text-color: #FFFFFF; + --route-btn-title-color: #272424; + --route-btn-text-data-color: #27242499; + background: var(--route-card-bg); box-shadow: var(--route-card-box_shadow); border-radius: 10px; @@ -143,6 +153,7 @@ justify-content: center; gap: 5px; margin-bottom: 10px; + margin-top: 8px; .route_transport_name{ font-size: var(--medium-font-size); font-weight: 600; @@ -162,6 +173,7 @@ border-radius: 100%; position: absolute; top: -10px; + z-index: 2; &:first-of-type{ border: 3px solid #065BFF; left: 0; @@ -175,9 +187,62 @@ width: calc(100% - 10px); margin-left: 10px; height: 4px; + position: absolute; + top: 2px; + z-index: 1; background: linear-gradient(90deg, rgba(6,91,255,1) 0%, rgba(69,194,38,1) 100%); } } } } + .route_card_actions_container{ + margin-top: 23px; + display: flex; + justify-content: space-between; + align-items: center; + .delete_route{ + cursor: pointer; + color: #27242499; + font-size: var(--medium-font-size); + &:hover{ + color: #FF613A; + } + } + .right_part_action_btns{ + display: flex; + align-items: center; + gap: 20px; + } + .route_btn{ + cursor: pointer; + &.solid{ + --route-btn-width: 222px; + --route-btn-padding: 12px 0; + --route-btn-bg: #FF613A; + --route-btn-title-color: #ffffff; + } + width: var(--route-btn-width); + border: var(--route-btn-border); + border-radius: var(--route-btn-border-radius); + padding: var(--route-btn-padding); + background: var(--route-btn-bg); + height: 100%; + text-align: center; + transition: 200ms all; + &:hover{ + background: var(--route-btn-hover-bg); + .route_btn_title{color: var(--route-btn-hover-text-color);} + .route_btn_data{color: var(--route-btn-hover-text-color);} + box-shadow: 0 4px 4px rgba(189, 104, 104, 0.25); + } + .route_btn_title{ + color: var(--route-btn-title-color); + font-size: var(--medium-font-size); + } + .route_btn_data{ + font-size: var(--small-font-size); + color: var(--route-btn-text-data-color); + } + } + } } \ No newline at end of file diff --git a/static/v2/js/forms.js b/static/v2/js/forms.js index ad0d87d..0e222f3 100644 --- a/static/v2/js/forms.js +++ b/static/v2/js/forms.js @@ -117,4 +117,15 @@ function dataToFormData(data) { formData.append(key, data[key]); } return formData; +} + +function selectInputWContainer (el, callback) { + if (!el) return; + let $field = el.closest('.field_container'); + if (!$field) return; + + let $input = $field.querySelector('input'); + $input.focus() + + if (callback) callback(el); } \ No newline at end of file diff --git a/templates/v2/forms/f_create_customer_route.html b/templates/v2/forms/f_create_customer_route.html index 6130311..4931662 100644 --- a/templates/v2/forms/f_create_customer_route.html +++ b/templates/v2/forms/f_create_customer_route.html @@ -7,8 +7,8 @@ {% trans "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" as attention_type_transport %} {% include 'v2/widgets/w_radio_inputs.html' with name='type_transport' callback='updateCargoTypeInForm' list=form.fields.type_transport.choices initial=form.initial.type_transport %} - {% include 'v2/widgets/w_pay_attention.html' with text=attention_type_transport %} {% if form.errors.type_transport %}