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

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

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent bc0c849ccd
commit 469a231256
4 changed files with 176 additions and 7 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. 57
      assets/css/gp-style-desktop.css
  2. 73
      assets/css/gp-style-mobile.css
  3. 36
      assets/css/gp-style-tablet.css
  4. 17
      registration.html

57
assets/css/gp-style-desktop.css
Unescape View File

@ -1268,11 +1268,41 @@ main{
display: flex;
justify-content: space-between;
}
.cabinet__control{
margin: 24px;
margin-bottom: 0;
display: none;
}
.cabinet-control__button{
margin-left: 8px;
padding: 12px 16px;
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
background: var(--background-white);
border: 2px solid var(--text-black);
border-radius: 48px;
transition: opacity .2s ease-out;
}
.cabinet-control__button.active{
background: var(--background-black);
color: var(--text-white);
}
.cabinet-control__button:hover{
opacity: .8;
}
.cabinet__orders{
width: calc((100% - 48px) / 3);
width: calc(((100% - 48px) / 3) * 2);
}
.cabinet__profile{
width: calc(((100% - 48px) / 3) * 2);
width: calc((100% - 48px) / 3);
}
.cabinet-card{
@ -1464,6 +1494,27 @@ main{
.cabinet-card__button:hover{
opacity: .8;
}
.cabinet-card__confirm{
margin-top: 16px;
border-radius: 20px;
padding: 4px 24px;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
background: var(--background-black);
color: var(--text-white);
border: none;
transition: opacity .2s ease-out;
}
.cabinet-card__confirm:hover{
opacity: .8;
}
.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{
margin-top: 8px;
}
@ -1637,6 +1688,8 @@ main{
.cabinet-card-order__payment{
display: flex;
align-items: flex-end;
transition: margin .2s ease-out;
}
.cabinet-card-order-payment__title{
font-family: var(--font-family);

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

@ -113,6 +113,61 @@
width: 31%;
}
/* detail */
/* cabinet */
.cabinet-card__title{
font-size: 20px;
}
.cabinet-card__no-orders{
margin-top: 16px;
}
.cabinet-card-order__header{
flex-direction: column;
}
.cabinet-card-order__payment{
margin-top: 16px;
}
.cabinet-card-order-detail__main{
flex-direction: column;
}
.cabinet-card-order-detail-main__links{
margin-top: 24px;
align-items: start;
}
.cabinet-card-order-detail-main-product__img{
width: 70px;
height: 70px;
}
.cabinet-card-order-detail-main__product{
margin-top: 16px;
align-items: start;
}
.cabinet-card-order-detail-main-product__content{
margin-left: 16px;
flex-wrap: wrap;
position: relative;
}
.cabinet-card-order-detail-main-product__description{
width: 100%;
}
.cabinet-card-order-detail-main-product__count{
position: absolute;
left: 116px;
bottom: 0;
}
.cabinet-card-order-detail-main-product__price{
position: absolute;
left: 153px;
bottom: 0;
}
/* .cabinet-card__order.active */
/* .cabinet-card__order.active */
/* cabinet */
}
@media only screen and (max-width: 576px) {
@ -141,4 +196,22 @@
.detail-block-form__submit{
min-width: 100%;
}
/* detail */
/* cabinet */
.cabinet-card-order-detail-main-product__img{
width: 40px;
height: 40px;
}
.cabinet-card-order-detail-main-product__count{
left: auto;
right: 71px;
}
.cabinet-card-order-detail-main-product__price{
left: auto;
right: 0;
}
/* cabinet */
}

36
assets/css/gp-style-tablet.css
Unescape View File

@ -106,6 +106,20 @@ main{
padding-right: 0;
}
/* modal */
/* cabinet */
.cabinet{
flex-direction: column;
}
.cabinet__control{
display: flex;
align-items: center;
}
.cabinet__orders, .cabinet__profile{
width: 100%;
}
/* cabinet */
}
@media only screen and (max-width: 980px) {
@ -214,3 +228,25 @@ main{
}
/* detail */
}
@media only screen and (max-width: 750px) {
/* cabinet */
.cabinet-card-order__open-detail{
margin-top: 144px;
}
.cabinet-card-order__detail-short{
right: auto;
left: 0;
bottom: 48px;
}
.cabinet-card-order-detail-short__item{
margin-left: -27px;
}
.cabinet-card-order-detail-short__item:first-child{
margin-left: 0;
}
.cabinet-card__order.active .cabinet-card-order__open-detail{
margin-top: 24px;
}
/* cabinet */
}

17
registration.html
Unescape View File

@ -225,8 +225,12 @@
</header>
<main class="wrapper">
<div class="cabinet__control">
<button class="cabinet-control__button active">Заказы</button>
<button class="cabinet-control__button">Профиль</button>
</div>
<div class="cabinet">
<div class="cabinet__orders">
<div class="cabinet__profile">
<div class="cabinet-card cabinet-card--green">
<div class="cabinet-card__content">
<div class="cabinet-card__element">
@ -241,8 +245,11 @@
<div class="cabinet-card__element">
<p class="cabinet-card__label">Почта:</p>
<p class="cabinet-card__text">example@example.com</p>
<p class="cabinet-card__status cabinet-card__status--chek">Почта подтверждена</p>
<!-- <p class="cabinet-card__status cabinet-card__status--cancelled">Почта не подтверждена</p> -->
<!-- <p class="cabinet-card__status cabinet-card__status--chek">Почта подтверждена</p> -->
<p class="cabinet-card__status cabinet-card__status--cancelled">Почта не подтверждена</p>
<button class="cabinet-card__confirm">
Подтвердить
</button>
</div>
<div class="cabinet-card__element">
@ -343,7 +350,7 @@
</div>
</div>
</div>
<div class="cabinet__profile">
<div class="cabinet__orders">
<div class="cabinet-card cabinet-card--green-white">
<div class="cabinet-card__content">
<p class="cabinet-card__title">
@ -474,7 +481,7 @@
<p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
</div>
<div class="cabinet-card-order__block-detail" style="height: 308px;">
<div class="cabinet-card-order__block-detail" style="height: 457px;">
<div class="cabinet-card-order__detail">
<div class="cabinet-card-order-detail__address">
<p class="cabinet-card-order-detail-address__title">Адрес доставки: </p>

Write Preview
Loading…
Cancel
Save