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

переделал логику на tabs

Browse Source
This commit is contained in:
Kirill Pet
2024-10-31 13:42:31 +03:00
parent f662641ca8
commit 615ec2ff91
3 changed files with 50 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -694,7 +694,7 @@ button{
.form-input-phone-list-item__code::before{
content: '+';
}
.form-input__two{
.form-input__tabs{
padding: 2px;
display: flex;
@@ -704,24 +704,8 @@ button{
position: relative;
}
.form-input-two__oval{
position: absolute;
top: 2px;
left: 2px;
width: 50%;
height: calc(100% - 4px);
border-radius: 18px;
background: var(--background-white);
transition: left .2s ease-out;
}
.form-input-two__input:checked + .form-input-two__oval{
left: calc(50% - 2px);
}
.form-input-two__button{
width: 50%;
.form-input-tabs__button{
width: 100%;
padding: 10px;
@@ -730,13 +714,18 @@ button{
font-size: 20px;
line-height: 120%;
color: var(--text-black);
text-align: center;
background: none;
border: none;
border-radius: 18px;
z-index: 2;
transition: background-color .2s ease-out;
}
.form-input-two__input{
.form-input-tabs__button.active{
background-color: var(--background-white);
}
.form-input-tabs__input{
display: none;
}
.form-input__radio{

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

@@ -73,35 +73,26 @@ function checkPhone(input) {
})
}
inputTwo('.form-input__two', '.form-input-two__input')
inputTabs('.form-input__tabs', '.form-input-tabs__button');
function inputTwo(main, inputTwo) {
let buttons = document.querySelectorAll(main);
function inputTabs(main, button) {
let mains = document.querySelectorAll(main);
mains.forEach(main => {
let buttons = main.querySelectorAll(button);
buttons.forEach(button => {
let input = button.querySelector(inputTwo);
button.onclick = function () {
input.checked = (input.checked == false) ? true : false;
main.querySelector('.active').classList.remove('active');
if (button.dataset.content) {
let content = button.dataset.content,
childrens = document.querySelector(`.${content}`).children;
Object.keys(childrens).forEach(blockId => {
let block = childrens[blockId];
if (block.classList.contains('active')) {
block.classList.remove('active');
}else{
block.classList.add('active');
button.classList.add('active');
}
})
}
}
})
}
inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')
function inputRadio(main ,item, textClass, input) {

43
registration.html
View File

@@ -801,12 +801,16 @@
<form class="modal-form__content check" method="post" action="/send-telegram.php">
<div class="modal-form-content__line">
<label for="" class="label-name">Вид животного</label>
<div class="form-input__two">
<input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div>
<div class="form-input__tabs">
<label for="cat" class="form-input-tabs__button active">
Кошка
<input type="radio" checked name="pet" id="cat" class="form-input-tabs__input">
</label>
<button class="form-input-two__button">Кошка</button>
<button class="form-input-two__button ">Собака</button>
<label for="dog" class="form-input-tabs__button">
Собака
<input type="radio" name="pet" id="dog" class="form-input-tabs__input">
</label>
</div>
</div>
@@ -828,13 +832,17 @@
<div class="modal-form-content__line">
<label for="" class="label-name">Пол вашего питомца</label>
<div class="form-input__two">
<input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div>
<button class="form-input-two__button">Мальчик</button>
<button class="form-input-two__button ">Девочка</button>
<div class="form-input__tabs">
<label for="boy" class="form-input-tabs__button active">
Мальчик
<input type="radio" checked name="floor" id="boy" class="form-input-tabs__input">
</label>
<label for="girl" class="form-input-tabs__button">
Девочка
<input type="radio" name="floor" id="girl" class="form-input-tabs__input">
</label>
</div>
</div>
@@ -944,13 +952,16 @@
<div class="modal-form-content__line">
<label for="" class="label-name">Возраст питомца</label>
<div class="form-input__two" data-content="modal__age">
<input type="radio" class="form-input-two__input">
<div class="form-input__tabs" data-content="modal__age">
<label for="exemplary" class="form-input-tabs__button active">
Примерный
<input type="radio" checked name="weight" id="exemplary" class="form-input-tabs__input">
</label>
<div class="form-input-two__oval"></div>
<button class="form-input-two__button">Примерный</button>
<button class="form-input-two__button ">Точный</button>
<label for="accurate" class="form-input-tabs__button">
Точный
<input type="radio" name="weight" id="accurate" class="form-input-tabs__input">
</label>
</div>
</div>