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

save

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 928d5c1ffa
commit d9907a0ccd
4 changed files with 145 additions and 27 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 38
      assets/css/gp-style-core.css
  2. 13
      assets/css/gp-style-mobile.css
  3. 22
      assets/js/gp-form.js
  4. 99
      notification-form-pet.html

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

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

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

@ -89,6 +89,19 @@
border-radius: 0; border-radius: 0;
border: none; 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 */ /* modal */
/* footer */ /* footer */

22
assets/js/gp-form.js
Unescape View File

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

99
notification-form-pet.html
Unescape View File

@ -376,7 +376,7 @@
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<label for="" class="label-name">Возраст питомца</label> <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"> <input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div> <div class="form-input-two__oval"></div>
@ -386,36 +386,85 @@
</div> </div>
</div> </div>
<div class="form-input__radio"> <div class="modal__age">
<div class="form-input-radio__item active"> <div class="form-input__radio active">
<div class="form-input-radio__circle"> <div class="form-input-radio__item active">
<div class="form-input-radio-circle__content"></div> <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> </div>
<div class="form-input-radio__item">
<p class="form-input-radio__title">Малыш <span>(от 0 до 1 года)</span></p> <div class="form-input-radio__circle">
</div> <div class="form-input-radio-circle__content"></div>
<div class="form-input-radio__item"> </div>
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div> <p class="form-input-radio__title">Взрослый <span>(от 1 года до 7 лет)</span></p>
</div> </div>
<div class="form-input-radio__item">
<p class="form-input-radio__title">Взрослый <span>(от 1 года до 7 лет)</span></p> <div class="form-input-radio__circle">
</div> <div class="form-input-radio-circle__content"></div>
<div class="form-input-radio__item"> </div>
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div> <p class="form-input-radio__title">Пожилой <span>(от 7 до 12 лет)</span></p>
</div> </div>
<div class="form-input-radio__item">
<p class="form-input-radio__title">Пожилой <span>(от 7 до 12 лет)</span></p> <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>
<div class="form-input-radio__item">
<div class="form-input-radio__circle"> <div class="modal-form-content__line modal-form-content__line--three modal-form-content__line--margin-top-16">
<div class="form-input-radio-circle__content"></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]{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> </div>
<p class="form-input-radio__title">Стареющий <span>(от 12 лет и старше)</span></p>
</div> </div>
<input type="text" class="form-input-radio__input">
</div> </div>
<div class="modal-form__buttons"> <div class="modal-form__buttons">

Write Preview
Loading…
Cancel
Save