sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-283: end editors pages

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-22 08:59:49 +03:00
parent b98a4a5364
commit f3c78f0575
11 changed files with 399 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
static/css/moover.css
View File

@@ -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;

24
static/css/moover/cards.css
View File

@@ -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;
}
}

6
static/css/moover/easy.css
View File

@@ -156,6 +156,12 @@
}
}
@media (max-width: 991.98px) {
.easy__item--fir p {
max-width: 78%;
}
}
.easy__item--sec {
grid-area: b;
position: relative;

8
static/css/moover/header.css
View File

@@ -123,7 +123,13 @@
height: initial;
}
.header .dropdown img {
@media (max-width: 575px) {
.header .dropdown-content {
right: 0;
}
}
.header img {
width: 25px;
height: 25px;
}

86
static/css/moover/uses.css
View File

@@ -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;
}
}

37
styles/moover/cards.scss
View File

@@ -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;
}
}
}
}

6
styles/moover/easy.scss
View File

@@ -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%;
}
}
}
}

12
styles/moover/header.scss
View File

@@ -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;
}
}

99
styles/moover/uses.scss
View File

@@ -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;
}
}
}
}

41
templates/pages/p_customer_landing_page.html
View File

@@ -41,18 +41,18 @@
{% translate "Маленькая история о том, как работает наш сервис" %}
</p>
{############cards###############}
<div class="presentation__cards cards">
<div class="presentation__cards cards cards--cstmr">
<div class="cards__list">
<div class="cards__item">
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/mover/image1.webp" %}" alt="img1"/>
<img class="cards__img" src="{% static "img/webp/customer/image1.webp" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Олег планирует поездку в&nbsp;другой город, задался вопросом, как окупить стоимость дороги?" %}
</p>
</div>
<div class="cards__item">
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/mover/image2.webp" %}" alt="img1"/>
<img class="cards__img" src="{% static "img/webp/customer/image2.webp" %}" alt="img2"/>
<p class="cards__desc">
{% translate "Олег зашел на сайт " %}
@@ -62,13 +62,13 @@
</div>
<div class="cards__item">
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/mover/image3.webp" %}" alt="img1"/>
<img class="cards__img" src="{% static "img/webp/customer/image3.webp" %}" alt="img3"/>
<p class="cards__desc">
{% translate "На&nbsp;объявление Олега откликнулась Аня, ей&nbsp;как раз и&nbsp;нужно отправить посылку своему другу в&nbsp;город, куда следует Олег, но&nbsp;обычными почтовыми сервисами очень дорого и&nbsp;долго ждать." %}
</p>
</div>
<div class="cards__item">
<img class="cards__img" src="{% static "img/webp/mover/image4.webp" %}" alt="img1"/>
<img class="cards__img" src="{% static "img/webp/customer/image4.webp" %}" alt="img4"/>
<p class="cards__desc">
{% translate "Аня с Олегом созвонились, обсудили условия и договорились о месте и времени передачи посылки." %}
</p>
@@ -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 @@
<div class="subtitle">
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
</div>
<a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<a href="{% url "registration_page" %}" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section>
<section class="use">
@@ -180,9 +180,9 @@
<div class="h3">
{% translate "Хотите перевезти посылку и окупить стоимость дороги, топлива?" %}
</div>
<a href="{% url "registration_page" %}"> class="use__btn btn btn--primary">{% translate "Найти посылку" %}</a>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Найти посылку" %}</a>
<br/>
<a href="{% url "registration_page" %}"> class="use__link">{% translate "Зарегистрироваться" %}</a>
<a href="{% url "registration_page" %}" class="use__link">{% translate "Зарегистрироваться" %}</a>
</section>
<section class="benefits" id="benefits">
@@ -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 @@
<div class="subtitle">
{% translate "Зарегистрируйся на&nbsp;<a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и&nbsp;получи отклики от&nbsp;людей с&nbsp;посылками" %}
</div>
<a href="{% url "registration_page" %}"> class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
const animate = document.querySelectorAll('.animate');
@@ -414,7 +407,7 @@
<div class="title">
{% translate "Размести свое объявление какую посылку ты можешь перевезти прямо сейчас " %}
</div>
<a href="{% url "registration_page" %}"> class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section>
<section class="sore">
@@ -434,7 +427,7 @@
<div class="h3">
{% translate "Зарегистрируйся бесплатно прямо сейчас и начни размещать объявления о перевозки посылки" %}
</div>
<a href="{% url "registration_page" %}"> class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
<a href="{% url "registration_page" %}" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
<br/>
</div>
</section>

21
templates/pages/p_mover_landing_page.html
View File

@@ -87,11 +87,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();
}
}
@@ -106,7 +106,7 @@
function initStagesSlider() {
if (!list[0].slick) {
console.log('init')
{#console.log('init')#}
list.slick({
autoplay: false,
dots: true,
@@ -273,7 +273,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], {
@@ -289,7 +289,7 @@
}
function initSlider() {
console.log($('.slick-slider'))
{#console.log($('.slick-slider'))#}
$('.slick-slider')
.not('.slick-initialized').slick({
centerMode: true,
@@ -298,12 +298,9 @@
infinite: false,
initialSlide: 1,
responsive: [
{
breakpoint: 768,
settings: {
{#slidesToShow: 1,#}
{#slidesToScroll: 1,#}
draggable: true,
appendArrows: $('.chatterbox__mbtns'),
},
@@ -311,12 +308,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]);
});
}
@@ -351,7 +344,7 @@
const observer = new IntersectionObserver(
(entries, interserctionObserver) => {
entries.forEach(entry => {
console.log('or', entry)
{#console.log('or', entry)#}
if (entry.isIntersecting) {
counter++;
const el = entry.target;