Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

fix 16.11

Browse Source
This commit is contained in:
Kirill Pet
2024-11-16 17:50:55 +03:00
parent fe7909e9cc
commit c344dbcd43
5 changed files with 82 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/gp-style-core.css
View File

@@ -1781,6 +1781,8 @@ button{
background-position: center; background-position: center;
transition: opacity .2s ease-out; transition: opacity .2s ease-out;
z-index: 10;
} }
.modal-form__close--white{ .modal-form__close--white{
background-image: url(../img/svg/main/white-x.svg); background-image: url(../img/svg/main/white-x.svg);
@@ -1856,6 +1858,10 @@ button{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.modal-form-content__line--two-mobile{
display: flex;
justify-content: space-between;
}
.modal-form-content-line__element{ .modal-form-content-line__element{
position: relative; position: relative;
} }

4
assets/css/gp-style-mobile.css
View File

@@ -99,6 +99,9 @@
.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ .modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
width: 82px; width: 82px;
} }
.modal-form-content__line--two-mobile .modal-form-content-line__element{
width: calc(50% - 12px);
}
.form__input{ .form__input{
padding: 12px 14px; padding: 12px 14px;
} }
@@ -204,6 +207,7 @@
.cabinet-card__content{ .cabinet-card__content{
padding-right: 19px; padding-right: 19px;
} }
/* .cabinet-card__order.active */ /* .cabinet-card__order.active */
/* .cabinet-card__order.active */ /* .cabinet-card__order.active */
/* cabinet */ /* cabinet */

16
assets/css/gp-style-order.css
View File

@@ -92,6 +92,14 @@
line-height: 133%; line-height: 133%;
color: var(--text-6); color: var(--text-6);
} }
.order-your-products__description span{
font-weight: 700;
}
.order-your-products__description span::before{
margin-left: 3px;
content: 'x ';
}
.order-your-products__right{ .order-your-products__right{
display: flex; display: flex;
} }
@@ -198,6 +206,8 @@
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
.order__title{ .order__title{
max-width: 181px;
font-size: 20px; font-size: 20px;
line-height: 120%; line-height: 120%;
} }
@@ -219,4 +229,10 @@
width: 100%; width: 100%;
} }
.order-your-products__content{
max-width: 164px;
}
.order-your-products__count, .order-your-products__price{
flex-shrink: 0;
}
} }

59
assets/js/gp-form.js
View File

@@ -173,9 +173,6 @@ function remoteControl(main, button) {
subject = document.querySelector(`.${subjectClass}`), subject = document.querySelector(`.${subjectClass}`),
buttons = Array.from(main.querySelectorAll(button)); buttons = Array.from(main.querySelectorAll(button));
console.log(main);
main.addEventListener('click', function (eventMain) { main.addEventListener('click', function (eventMain) {
setTimeout(() => { setTimeout(() => {
let indexActive = buttons.findIndex((button, index) => { let indexActive = buttons.findIndex((button, index) => {
@@ -194,18 +191,52 @@ function remoteControl(main, button) {
}) })
} }
// formCheck('.modal-form__content', 'input[type=submit]'); formCheck('.modal-form__content', 'input[type=submit]');
// formCheck('.modal-map__form', 'input[type=submit]'); formCheck('.modal-map__form', 'input[type=submit]');
// function formCheck(form, submit) { function formCheck(form, submit) {
// let forms = document.querySelectorAll(form); let forms = document.querySelectorAll(form);
// forms.forEach(form => { forms.forEach(form => {
// let thisSubmit = form.querySelector(submit); let thisSubmit = form.querySelector(submit);
// thisSubmit.onclick = function () { thisSubmit.onclick = function () {
// form.classList.add('check') form.classList.add('check')
// } }
// }) })
// } }
inputPhoneNoFlag('.no-flag');
function inputPhoneNoFlag(input){
let inputs = document.querySelectorAll(input);
inputs.forEach(input => {
let code = '+' + input.dataset.code;
input.onfocus = function () {
if (input.value == '') {
input.value = code;
}
}
input.addEventListener('input', function(event) {
let text = event.target.value;
let length = text.length;
let newSymbol = event.data;
if (isNaN(event.data) || event.data == ' ') {
event.target.value = text.slice(0, -1);
return;
}
if (length == 3 || length == 7 || length == 11) {
if (newSymbol != null) {
event.target.value = text.slice(0, -1) + ' ' + newSymbol;
}
}
})
})
}

66
order.html
View File

@@ -238,7 +238,7 @@
</button> </button>
</div> </div>
<form action="" class="order-contacts__form modal-form__content"> <form action="" class="order-contacts__form">
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Имя и фамилия</label> <label for="firstname" class="label-name">Имя и фамилия</label>
@@ -265,55 +265,11 @@
</div> </div>
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<div class="modal-form-content__line"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Телефон</label> <label for="firstname" class="label-name">Телефон</label>
<div class="form-input__phone"> <input id="firstname" class="form__input no-flag" type="text" maxlength="15" minlength="15" name="name" pattern="7\s[0-9]{3}\s[0-9]{3}\s[0-9]{4}" placeholder="+7 ___ ___ ____" required="" data-code="7">
<div class="form-input-phone__icon" style="background-image: url(assets/img/svg/country/ru.svg);"></div> <span class="form-input__error form-input__error--absolute">Номер телефона введен неверно</span>
<p class="form-input-phone__code">7</p> </div>
<input type="text" placeholder="___ ___ ____" pattern="[0-9]{3}\s[0-9]{3}\s[0-9]{4}" minlength="12" maxlength="12" class="form-input-phone__input" required="">
<div class="form-input__error form-input__error--absolute">Номер введён неверно</div>
<div class="form-input-phone__list">
<input type="text" placeholder="Поиск" class="form-input-phone-list__search">
<div class="form-input-phone-list__content">
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ru.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Россия</p>
<p class="form-input-phone-list-item__code">7</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
</div>
</div>
</div>
</div>
</div> </div>
<div class="modal-form-content__line"> <div class="modal-form-content__line">
@@ -422,7 +378,7 @@
<div class="order-contacts-deliver__item"> <div class="order-contacts-deliver__item">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Комментарий для доставки</label> <label for="firstname" class="label-name">Комментарий для доставки</label>
<textarea id="firstname" class="form__input form__input--textarea-72 form__input--grey" type="text" name="name" placeholder="Для служьы доставки" required="" ></textarea> <textarea id="firstname" class="form__input form__input--textarea-72 form__input--grey" type="text" name="name" placeholder="Для службы доставки" required="" ></textarea>
</div> </div>
</div> </div>
</div> </div>
@@ -480,7 +436,7 @@
<div class="order-your-products__content"> <div class="order-your-products__content">
<p class="order-your-products__name">Сухой корм, для крупных и средних пород </p> <p class="order-your-products__name">Сухой корм, для крупных и средних пород </p>
<p class="order-your-products__description">Индейка, 2 кг </p> <p class="order-your-products__description">Индейка, 2 кг<span>1</span></p>
</div> </div>
</div> </div>
@@ -631,12 +587,12 @@
<div class="modal-form modal-form--cdek form__full-mobile modal-form--white modal-form--height-100-phone form-point"> <div class="modal-form modal-form--cdek form__full-mobile modal-form--white modal-form--height-100-phone form-point">
<button class="modal-form__close"></button> <button class="modal-form__close"></button>
iframe <div style="position:relative;overflow:hidden;"><a href="https://yandex.ru/maps/213/moscow/?utm_medium=mapframe&amp;utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Москва</a><a href="https://yandex.ru/maps/213/moscow/?ll=37.710230%2C55.812249&amp;mode=whatshere&amp;utm_medium=mapframe&amp;utm_source=maps&amp;whatshere%5Bpoint%5D=37.622787%2C55.774846&amp;whatshere%5Bzoom%5D=6.31&amp;z=12.54" style="color:#eee;font-size:12px;position:absolute;top:14px;">Яндекс&nbsp;Карты — транспорт, навигация, поиск мест</a><iframe src="https://yandex.ru/map-widget/v1/?ll=37.710230%2C55.812249&amp;mode=whatshere&amp;whatshere%5Bpoint%5D=37.622787%2C55.774846&amp;whatshere%5Bzoom%5D=6.31&amp;z=12.54" width="560" height="400" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe></div>
</div> </div>
<div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-address"> <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-address">
<button class="modal-form__close"></button> <button class="modal-form__close"></button>
<p class="modal-form__title">Изменить мои данные</p> <p class="modal-form__title">АДРЕС</p>
<form class="modal-form__content " method="post" action="/send-telegram.php"> <form class="modal-form__content " method="post" action="/send-telegram.php">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
@@ -645,7 +601,7 @@
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span> <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div> </div>
<div class="modal-form-content__line modal-form-content__line--two"> <div class="modal-form-content__line modal-form-content__line--two-mobile">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Квартира</label> <label for="firstname" class="label-name">Квартира</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Квартира" required=""> <input id="firstname" class="form__input" type="text" name="name" placeholder="Квартира" required="">
@@ -659,7 +615,7 @@
</div> </div>
</div> </div>
<div class="modal-form-content__line modal-form-content__line--two"> <div class="modal-form-content__line modal-form-content__line--two-mobile">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Подъезд</label> <label for="firstname" class="label-name">Подъезд</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Подъезд" required=""> <input id="firstname" class="form__input" type="text" name="name" placeholder="Подъезд" required="">