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

сделал адаптивность подписок

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 3 months ago
parent e3e8e3a187
commit be438d43d2
4 changed files with 762 additions and 14 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. 63
      assets/css/gp-style-mobile.css
  2. 2
      assets/js/toggle.js
  3. 674
      subscription-first.html
  4. 37
      subscription-last.html

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

@ -268,3 +268,66 @@
}
/* cabinet */
}
@media only screen and (max-width: 720px) {
.subscription__item{
flex-direction: column;
}
.subscription__item > p:first-child{
font-size: 16px;
color: var(--text-6);
}
.subscription__item > p:last-child{
margin-top: 6px;
}
.subscription__toggle-title {
font-size: 20px;
}
.subscription__toggle-product{
flex-wrap: wrap;
}
.subscription__toggle-product > *:not(:first-child){
padding-top: 0;
}
.subscription__toggle-product .cabinet-card-order-detail-main-product__img{
width: 73px;
height: 66px;
}
.subscription__toggle-product .cabinet-card-order-detail-main-product-description__what{
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.subscription__toggle-product .cabinet-card-order-detail-main-product-description__with-what{
margin-top: 8px;
font-size: 12px;
}
.subscription__toggle-product .cabinet-card-order-detail-main-product__description {
width: calc(100% - 73px);
}
.subscription__toggle-product .cabinet-card-order-detail-main-product__content{
position: static;
margin-top: -10px;
margin-left: auto;
width: calc(100% - 73px);
display: flex;
justify-content: space-between;
align-items: center;
}
.subscription__toggle-product .cabinet-card-order-detail-main-product__count{
position: static;
font-size: 12px;
}
.subscription__toggle-product .cabinet-card-order-detail-main-product__price{
position: static;
font-size: 16px;
}
}

2
assets/js/toggle.js
Unescape View File

@ -41,8 +41,6 @@ class Toggle{
wrapperElement.classList.toggle(this.stateClasses.isActive, isActive);
if (isActive) {
console.log(this.contentElements[index]);
wrapperElement.style.height = `${newHeight}px`;
setTimeout(() => {

674
subscription-first.html
View File

File diff suppressed because one or more lines are too long

37
subscription-2.html → subscription-last.html
Unescape View File

@ -49,7 +49,6 @@
</head>
<body>
<header class="header">
<div class="header__content wrapper">
<button class="header__open-menu" id="phone-menu">
@ -228,6 +227,20 @@
<main class="wrapper">
<div class="cabinet">
<div class="cabinet__profile cabinet-content">
<div>
<div class="form-input__tabs">
<label for="boy" class="form-input-tabs__button">
Заказы
<input type="radio" ed="" name="floor" id="boy" class="form-input-tabs__input">
</label>
<label for="girl" class="form-input-tabs__button active">
Подписки
<input type="radio" name="floor" id="girl" class="form-input-tabs__input">
</label>
</div>
</div>
<div class="cabinet-card cabinet-card--green">
<div class="cabinet-card__content">
<div class="cabinet-card__element">
@ -512,28 +525,28 @@
<form action="">
<div class="modal-form-content__line">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Адрес доставки</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить ваш адрес" required="">
<label for="firstname" class="label-name modal-form-content-line__element--arrow">Пункт выдачи</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить адрес" required="">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div>
</form>
</div>
<div class="tabs__content" data-js-tabs-content>
<form action="">
<div class="modal-form-content__line">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Комментарий для доставки</label>
<textarea id="firstname" class="form__input form__input--textarea-72" type="text" name="name" placeholder="Для служьы доставки"></textarea>
<label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить ваш адрес" required="">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div>
</form>
</div>
<div class="tabs__content" data-js-tabs-content>
<form action="">
<div class="modal-form-content__line">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Пункт выдачи</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить адрес" required="">
<label for="firstname" class="label-name">Комментарий для доставки</label>
<textarea id="firstname" class="form__input form__input--textarea-72" type="text" name="name" placeholder="Для служьы доставки"></textarea>
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div>
@ -709,7 +722,7 @@
new TogglesCollection();
new TabsCollection();
</script>
<script type="module" src="assets/js/gp-cabinet.js"></script>
<!-- <script type="module" src="assets/js/gp-cabinet.js"></script> -->
<script src="assets/js/gp-form.js"></script>
Write Preview
Loading…
Cancel
Save