From f3c78f0575efdea0268921ff036f52645bff82ca Mon Sep 17 00:00:00 2001 From: Artyom Pratsko Date: Fri, 22 Nov 2024 08:59:49 +0300 Subject: [PATCH] TRI-283: end editors pages --- static/css/moover.css | 124 ++++++++++++++++++- static/css/moover/cards.css | 24 +++- static/css/moover/easy.css | 6 + static/css/moover/header.css | 8 +- static/css/moover/uses.css | 86 +++++++++++++ styles/moover/cards.scss | 37 ++++-- styles/moover/easy.scss | 6 +- styles/moover/header.scss | 12 +- styles/moover/uses.scss | 99 +++++++++++++-- templates/pages/p_customer_landing_page.html | 41 +++--- templates/pages/p_mover_landing_page.html | 21 ++-- 11 files changed, 399 insertions(+), 65 deletions(-) diff --git a/static/css/moover.css b/static/css/moover.css index 489792a..c160774 100644 --- a/static/css/moover.css +++ b/static/css/moover.css @@ -428,7 +428,13 @@ b { height: initial; } -.header .dropdown img { +@media (max-width: 575px) { + .header .dropdown-content { + right: 0; + } +} + +.header img { width: 25px; height: 25px; } @@ -645,6 +651,13 @@ b { } } +.slick-active .cards__item .cards__desc, .cards__item:hover .cards__desc, .cards__item:focus .cards__desc { + -webkit-line-clamp: initial; + /* number of lines to show */ + line-clamp: initial; + max-height: 17em; +} + .cards__img { margin-bottom: 5px; } @@ -682,12 +695,15 @@ b { .cards__desc { font-weight: 500; line-height: 22px; + padding: 0 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; /* number of lines to show */ line-clamp: 7; -webkit-box-orient: vertical; + transition: all 0.3s ease-in-out; + max-height: 10em; } @media (min-width: 1720px) { @@ -714,10 +730,11 @@ b { } } -.slick-active .cards__desc { +.slick-active .cards__desc, .cards__desc:hover, .cards__desc:focus { -webkit-line-clamp: initial; /* number of lines to show */ line-clamp: initial; + max-height: 999em; } .cards__desc a { @@ -796,6 +813,17 @@ b { background-color: var(--color-orange); } +.cards--cstmr .cards__desc { + padding: 0 50px; +} + +@media (max-width: 1304.98px) { + .cards--cstmr .cards__desc { + padding-left: 10px; + padding-right: 10px; + } +} + .easy { margin-bottom: 162px; } @@ -954,6 +982,12 @@ b { } } +@media (max-width: 991.98px) { + .easy__item--fir p { + max-width: 78%; + } +} + .easy__item--sec { grid-area: b; position: relative; @@ -2726,6 +2760,92 @@ b { } } +.uses__title { + font-size: 24px; + font-weight: 700; + line-height: 36px; + margin-bottom: 10px; +} + +.uses--cstmr .uses__item { + text-align: center; + padding: 0 15px; +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__item { + margin-bottom: 42px; + min-height: 255px; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .uses__item { + margin-bottom: 25px; + min-height: 194px; + } +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__item p { + max-width: 90%; + margin: 0 auto; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .uses__item p { + max-width: 100%; + } +} + +.uses--cstmr .uses__icon { + width: 118px; + height: 118px; +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__icon { + width: 142px; + height: 142px; + margin-bottom: 23px; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .uses__icon { + width: 117px; + height: 117px; + margin-bottom: 8px; + } +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 1304.98px) { + .uses--cstmr .title { + margin-bottom: 61px; + max-width: 80%; + } +} + +@media (max-width: 991.98px) { + .uses--cstmr .title { + margin-bottom: 44px; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .title { + max-width: 90%; + margin-bottom: 31px; + } +} + .sore { margin-bottom: 160px; margin-top: 1px; diff --git a/static/css/moover/cards.css b/static/css/moover/cards.css index 3abe5d7..a2acbce 100644 --- a/static/css/moover/cards.css +++ b/static/css/moover/cards.css @@ -20,6 +20,13 @@ } } +.slick-active .cards__item .cards__desc, .cards__item:hover .cards__desc, .cards__item:focus .cards__desc { + -webkit-line-clamp: initial; + /* number of lines to show */ + line-clamp: initial; + max-height: 17em; +} + .cards__img { margin-bottom: 5px; } @@ -57,12 +64,15 @@ .cards__desc { font-weight: 500; line-height: 22px; + padding: 0 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; /* number of lines to show */ line-clamp: 7; -webkit-box-orient: vertical; + transition: all 0.3s ease-in-out; + max-height: 10em; } @media (min-width: 1720px) { @@ -89,10 +99,11 @@ } } -.slick-active .cards__desc { +.slick-active .cards__desc, .cards__desc:hover, .cards__desc:focus { -webkit-line-clamp: initial; /* number of lines to show */ line-clamp: initial; + max-height: 999em; } .cards__desc a { @@ -170,3 +181,14 @@ .cards .slick-dots li.slick-active button { background-color: var(--color-orange); } + +.cards--cstmr .cards__desc { + padding: 0 50px; +} + +@media (max-width: 1304.98px) { + .cards--cstmr .cards__desc { + padding-left: 10px; + padding-right: 10px; + } +} diff --git a/static/css/moover/easy.css b/static/css/moover/easy.css index b0621f9..0056e25 100644 --- a/static/css/moover/easy.css +++ b/static/css/moover/easy.css @@ -156,6 +156,12 @@ } } +@media (max-width: 991.98px) { + .easy__item--fir p { + max-width: 78%; + } +} + .easy__item--sec { grid-area: b; position: relative; diff --git a/static/css/moover/header.css b/static/css/moover/header.css index 902e7b9..9af2752 100644 --- a/static/css/moover/header.css +++ b/static/css/moover/header.css @@ -123,7 +123,13 @@ height: initial; } -.header .dropdown img { +@media (max-width: 575px) { + .header .dropdown-content { + right: 0; + } +} + +.header img { width: 25px; height: 25px; } diff --git a/static/css/moover/uses.css b/static/css/moover/uses.css index baebd86..6ca2ed0 100644 --- a/static/css/moover/uses.css +++ b/static/css/moover/uses.css @@ -101,3 +101,89 @@ margin-bottom: 30px; } } + +.uses__title { + font-size: 24px; + font-weight: 700; + line-height: 36px; + margin-bottom: 10px; +} + +.uses--cstmr .uses__item { + text-align: center; + padding: 0 15px; +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__item { + margin-bottom: 42px; + min-height: 255px; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .uses__item { + margin-bottom: 25px; + min-height: 194px; + } +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__item p { + max-width: 90%; + margin: 0 auto; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .uses__item p { + max-width: 100%; + } +} + +.uses--cstmr .uses__icon { + width: 118px; + height: 118px; +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__icon { + width: 142px; + height: 142px; + margin-bottom: 23px; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .uses__icon { + width: 117px; + height: 117px; + margin-bottom: 8px; + } +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 1304.98px) { + .uses--cstmr .title { + margin-bottom: 61px; + max-width: 80%; + } +} + +@media (max-width: 991.98px) { + .uses--cstmr .title { + margin-bottom: 44px; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .title { + max-width: 90%; + margin-bottom: 31px; + } +} diff --git a/styles/moover/cards.scss b/styles/moover/cards.scss index 9acbaef..a1fbb4c 100644 --- a/styles/moover/cards.scss +++ b/styles/moover/cards.scss @@ -16,6 +16,17 @@ max-width: 251px; margin-right: 18px; } + + .slick-active &, + &:hover, &:focus { + + .cards__desc { + -webkit-line-clamp: initial; /* number of lines to show */ + line-clamp: initial; + max-height: 17em; + + } + } } &__img { @@ -47,11 +58,15 @@ &__desc { font-weight: 500; line-height: 22px; + padding: 0 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; /* number of lines to show */ line-clamp: 7; -webkit-box-orient: vertical; + transition: all 0.3s ease-in-out; + max-height: 10em; + @media (min-width: 1720px) { font-size: 20px; @@ -71,14 +86,11 @@ padding-right: 8px; } - @media (max-width: 767.98px) { - //padding-left: 5px; - //padding-right: 5px; - } - - .slick-active & { + .slick-active &, + &:hover, &:focus { -webkit-line-clamp: initial; /* number of lines to show */ line-clamp: initial; + max-height: 999em; } a { @@ -131,7 +143,7 @@ @media (max-width: 767.98px) { margin: 0 0.31rem; -} + } } button { @@ -152,5 +164,16 @@ } } + + &--cstmr .cards { + &__desc { + padding: 0 50px; + + @media (max-width: 1304.98px) { + padding-left: 10px; + padding-right: 10px; + } + } + } } diff --git a/styles/moover/easy.scss b/styles/moover/easy.scss index 5a63626..c03fa48 100644 --- a/styles/moover/easy.scss +++ b/styles/moover/easy.scss @@ -120,6 +120,10 @@ width: 89%; margin-bottom: 53px; } + + @media (max-width: 991.98px) { + max-width: 78%; + } } } @@ -325,6 +329,6 @@ padding-right: 50px; margin-top: -8px; max-width: 100%; - } + } } } diff --git a/styles/moover/header.scss b/styles/moover/header.scss index 278746a..226370c 100644 --- a/styles/moover/header.scss +++ b/styles/moover/header.scss @@ -103,11 +103,15 @@ &-content { right: 0; height: initial; - } - img { - width: 25px; - height: 25px; + @media (max-width: 575px) { + right: 0; + } } } + + img { + width: 25px; + height: 25px; + } } diff --git a/styles/moover/uses.scss b/styles/moover/uses.scss index 900ce09..ab0db53 100644 --- a/styles/moover/uses.scss +++ b/styles/moover/uses.scss @@ -13,9 +13,9 @@ margin-bottom: 100px; } - @media (max-width: 479.98px) { - margin-bottom: 199px; - } + @media (max-width: 479.98px) { + margin-bottom: 199px; + } &__grid { text-align: left; @@ -29,10 +29,10 @@ column-gap: 15px; } - @media (max-width: 479.98px) { - display: block; - text-align: center; - } + @media (max-width: 479.98px) { + display: block; + text-align: center; + } } @@ -54,7 +54,6 @@ margin-bottom: 0; } } - } &__icon { @@ -77,9 +76,87 @@ margin-bottom: 39px; } - @media (max-width: 479.98px) { - margin-bottom: 30px; - } + @media (max-width: 479.98px) { + margin-bottom: 30px; + } } + &__title { + font-size: 24px; + font-weight: 700; + line-height: 36px; + margin-bottom: 10px; + } + + + &--cstmr { + & .uses { + &__item { + text-align: center; + padding: 0 15px; + + @media (max-width: 991.98px) { + margin-bottom: 42px; + min-height: 255px; + } + + @media (max-width: 479.98px) { + margin-bottom: 25px; + min-height: 194px; + } + + p { + @media (max-width: 991.98px) { + max-width: 90%; + margin: 0 auto; + } + + @media (max-width: 479.98px) { + max-width: 100%; + } + } + } + + &__icon { + width: 118px; + height: 118px; + + @media (max-width: 991.98px) { + width: 142px; + height: 142px; + margin-bottom: 23px; + } + + @media (max-width: 479.98px) { + width: 117px; + height: 117px; + margin-bottom: 8px; + } + } + + + &__grid { + @media (max-width: 991.98px) { + grid-template-columns: 1fr; + } + } + } + + .title { + + @media (max-width: 1304.98px) { + margin-bottom: 61px; + max-width: 80%; + } + + @media (max-width: 991.98px) { + margin-bottom: 44px; + } + + @media (max-width: 479.98px) { + max-width: 90%; + margin-bottom: 31px; + } + } + } } \ No newline at end of file diff --git a/templates/pages/p_customer_landing_page.html b/templates/pages/p_customer_landing_page.html index c9f4402..4059208 100644 --- a/templates/pages/p_customer_landing_page.html +++ b/templates/pages/p_customer_landing_page.html @@ -41,18 +41,18 @@ {% translate "Маленькая история о том, как работает наш сервис" %}

{############cards###############} -
+
- img1 + img1

{% translate "Олег планирует поездку в другой город, задался вопросом, как окупить стоимость дороги?" %}

- img1 + img2

{% translate "Олег зашел на сайт " %} @@ -62,13 +62,13 @@

- img1 + img3

{% translate "На объявление Олега откликнулась Аня, ей как раз и нужно отправить посылку своему другу в город, куда следует Олег, но обычными почтовыми сервисами очень дорого и долго ждать." %}

- img1 + img4

{% translate "Аня с Олегом созвонились, обсудили условия и договорились о месте и времени передачи посылки." %}

@@ -86,11 +86,11 @@ } function checkAdaptive() { - if (window.innerWidth <= 1000) { - console.log('init check') + if (window.innerWidth <= 991.98) { + {#console.log('init check')#} initStagesSlider(); } else { - console.log('rem') + {#console.log('rem')#} removeSlider(); } } @@ -105,7 +105,7 @@ function initStagesSlider() { if (!list[0].slick) { - console.log('init') + {#console.log('init')#} list.slick({ autoplay: false, dots: true, @@ -165,7 +165,7 @@
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
- {% translate "Разместить объявление" %} + {% translate "Разместить объявление" %}
@@ -180,9 +180,9 @@
{% translate "Хотите перевезти посылку и окупить стоимость дороги, топлива?" %}
- class="use__btn btn btn--primary">{% translate "Найти посылку" %} + {% translate "Найти посылку" %}
- class="use__link">{% translate "Зарегистрироваться" %} + {% translate "Зарегистрироваться" %}
@@ -260,7 +260,7 @@ if (!vtns.length) return; vtns.off('click.load-lazy').on('click.load-lazy', (e) => { const vtn = e.target; - console.log('!!!!!!!', vtn,) + {#console.log('!!!!!!!', vtn,)#} vtn.nextElementSibling.querySelector('video'); vtn.closest('.slick-slide').classList.contains('slick-current') && LazyLoad.load($(vtn).siblings().find('video')[0], { @@ -276,7 +276,7 @@ } function initSlider() { - console.log($('.slick-slider')) + {#console.log($('.slick-slider'))#} $('.slick-slider') .not('.slick-initialized').slick({ centerMode: true, @@ -285,12 +285,9 @@ infinite: false, initialSlide: 1, responsive: [ - { breakpoint: 768, settings: { - {#slidesToShow: 1,#} - {#slidesToScroll: 1,#} draggable: true, appendArrows: $('.chatterbox__mbtns'), }, @@ -298,12 +295,8 @@ ], }) .on('beforeChange', function (event, slick, currentSlide, nextSlide) { - console.log([slick.$slides[currentSlide].querySelector('video')]) slick.$slides[currentSlide]?.querySelector('video')?.pause(); slick.$slides[nextSlide]?.querySelector('video')?.pause(); - - - console.log('edge was hit', nextSlide, currentSlide, slick.$slides[currentSlide]); }); } @@ -332,7 +325,7 @@
{% translate "Зарегистрируйся на Trip With Bonus прямо сейчас, размести бесплатно объявление и получи отклики от людей с посылками" %}
- class="use__btn btn btn--primary">{% translate "Разместить объявление" %} + {% translate "Разместить объявление" %}