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

save

Browse Source
This commit is contained in:
Kirill Pet
2024-10-28 15:52:23 +03:00
parent 928d5c1ffa
commit d9907a0ccd
4 changed files with 145 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -406,6 +406,9 @@ button{
height: 96px;
resize: none;
}
.form__input--center{
text-align: center;
}
.form__button{
width: 100%;
@@ -738,6 +741,9 @@ button{
}
.form-input__radio{
padding: 16px;
display: flex;
flex-direction: column;
}
.form-input-radio__item{
margin-top: 14px;
@@ -1780,6 +1786,29 @@ button{
.modal-form-content__line--two .modal-form-content-line__element{
width: calc(50% - 12px);
}
.modal-form-content__line--three{
display: flex;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){
width: 85px;
flex-shrink: 0;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){
margin-left: 8px;
width: 100%;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
margin-left: 8px;
width: 85px;
flex-shrink: 0;
}
.modal-form-content__line--margin-top-16{
margin-top: 16px;
}
.modal-form__buttons{
margin-top: 32px;
}
@@ -1933,6 +1962,15 @@ button{
.modal-map__map iframe{
height: 650px;
}
.modal__age{
}
.modal__age > div{
display: none;
}
.modal__age > div.active{
display: flex;
}
/* modal */
/* toggle */

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

@@ -89,6 +89,19 @@
border-radius: 0;
border: none;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){
width: 69px;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
width: 82px;
}
.form__input{
padding: 12px 14px;
}
/* modal */
/* footer */

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

@@ -83,9 +83,27 @@ function inputTwo(main, inputTwo) {
button.onclick = function () {
input.checked = (input.checked == false) ? true : false;
}
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');
}
})
// .forEach(block => {
//
// })
}
}
})
}

101
notification-form-pet.html
View File

@@ -376,7 +376,7 @@
<div class="modal-form-content__line">
<label for="" class="label-name">Возраст питомца</label>
<div class="form-input__two">
<div class="form-input__two" data-content="modal__age">
<input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div>
@@ -386,36 +386,85 @@
</div>
</div>
<div class="form-input__radio">
<div class="form-input-radio__item active">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
<div class="modal__age">
<div class="form-input__radio active">
<div class="form-input-radio__item active">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">Малыш <span>(от 0 до 1 года)</span></p>
</div>
<p class="form-input-radio__title">Малыш <span>(от 0 до 1 года)</span></p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">Взрослый <span>(от 1 года до 7 лет)</span></p>
</div>
<p class="form-input-radio__title">Взрослый <span>(от 1 года до 7 лет)</span></p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">Пожилой <span>(от 7 до 12 лет)</span></p>
</div>
<p class="form-input-radio__title">Пожилой <span>(от 7 до 12 лет)</span></p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">Стареющий <span>(от 12 лет и старше)</span></p>
</div>
<input type="text" value="Малыш (от 0 до 1 года)" class="form-input-radio__input">
</div>
<div class="modal-form-content__line modal-form-content__line--three modal-form-content__line--margin-top-16">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">День</label>
<input id="firstname" class="form__input form__input--center" pattern="[0-9]{2}" maxlength="2" type="text" name="name" placeholder="ДД" >
</div>
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Месяц</label>
<div class="form-input__list">
<input type="text" placeholder="Месяц" class="form-input-list__input" readonly="">
<div class="form-input-list__block-content">
<div class="form-input-list__content">
<button class="form-input-list__item">
<p class="form-input-list-item__text">Июнь</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Июль</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Август</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Год</label>
<input id="firstname" class="form__input form__input--center" pattern="[0-9]{4}" maxlength="4" type="text" name="name" placeholder="ГГГГ" >
</div>
<p class="form-input-radio__title">Стареющий <span>(от 12 лет и старше)</span></p>
</div>
<input type="text" class="form-input-radio__input">
</div>
<div class="modal-form__buttons">