Good-Production
/
cosmopet-architecture
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Task:6783 | Правка поп-апов

Browse Source
pull/32/head
Максим Максимов 2 months ago
parent 2f8042ea60
commit a56660f5fd
8 changed files with 253 additions and 93 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. 4
      wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css
  2. 39
      wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
  3. 91
      wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-desktop.css
  4. 72
      wp-content/themes/cosmopet/modules/popup/assets/js/modal.js
  5. 44
      wp-content/themes/cosmopet/static/css/front-page.css
  6. 84
      wp-content/themes/cosmopet/templates/_pages/front-page.twig
  7. 6
      wp-content/themes/cosmopet/templates/modal.twig
  8. 2
      wp-content/themes/cosmopet/templates/modal/login.twig

4
wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css
Unescape View File

@ -151,7 +151,7 @@
text-decoration: underline;
}
/* Footer end */
.modal__aside {
/* .modal__aside {
position: fixed;
top: 0;
right: 0;
@ -159,7 +159,7 @@
height: 100%;
overflow: hidden;
transition: width .4s ease-out;
}
} */
.modal__item {
height: 100%;

39
wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
Unescape View File

@ -2238,6 +2238,45 @@ textarea{
margin-bottom: 6px;
}
.discount_block {
background: radial-gradient(250% 285% at 120% -27.98%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%)!important;
}
.section_wrap {
margin-top: -70px;
padding: 178px 0 90px;
background: radial-gradient(250% 285% at 120% -27.98%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%)!important;
}
.footer-contact {
width: 100%;
padding: 24px 24px 43px;
display: flex;
flex-direction: column;
border-radius: 24px;
background: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(117, 196, 240) 0%, rgb(126, 231, 225) 51.21689438819885%, rgb(181, 228, 180) 80.70731163024902%
80.7073%
, rgb(237, 244, 164) 91.14583134651184%)!important;
}
.footer-contact__submit {
width: 100%;
text-align: center;
height: 48px;
border-radius: 16px;
background: var(--main_black);
font-size: 20px;
font-weight: 400!important;
line-height: 24px;
color: var(--main_white);
}
@media only screen and (max-width: 1600px) {
.wrapper {
max-width: 1280px!important;
}
}
@media only screen and (max-width: 1200px) {
.footer {
margin-top: 0;

91
wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-desktop.css
Unescape View File

@ -0,0 +1,91 @@
.modal__aside {
position: fixed;
top: 0;
right: 0;
height: 100%;
transform: translateX(100%); /* Изначально скрыто справа */
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
background: white; /* Или твой стиль фона */
z-index: 1000;
}
.modal__aside.active {
transform: translateX(0); /* Показываем, сдвигая влево */
}
.modal__item {
opacity: 0;
filter: blur(10px);
transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.modal__item.active {
opacity: 1;
filter: blur(0);
}
@media (max-width: 720px) {
.modal__aside {
width: 100% !important; /* Полная ширина на мобильных */
}
}
@media (min-width: 721px) {
.modal__aside {
width: 400px; /* Минимальная ширина или твоя фиксированная ширина */
}
}
@media(max-width:768px){
.footer-top {
flex-direction: column;
}
.footer-bottom {
flex-direction: column;
}
.footer-content__wrap {
flex-direction: column;
}
.home__title.invisible {
font-size:28px;
}
.home .container {
padding: 0px 30px 180px!important;
}
.container {
max-width: 100%!important;
margin: 0!important;
}
.about_slider .carousel .carousel-item {
border-radius: 100% !important;
}
.about_slider .carousel .carousel-item img {
width: 99px!important;
height: 99px!important;
}
.reviews_block .reviews_items {
flex-wrap: unset;
gap: 20px!important;
}
.gift_line-img {
display: none!important;
}
.discount__sale .discount_text {
order: 1;
margin-top: 0;
font-size: 18px!important;
color: var(--interface-main_black, #121212);
font-family: "Craftwork Grotesk";
font-style: normal;
font-weight: 500;
line-height: normal;
max-width: 100%;
}
.discount__sale .discount_form {
flex-direction: column;
gap: 21px!important;
}
.modal__basket {
width: 100%!important;
}
}

72
wp-content/themes/cosmopet/modules/popup/assets/js/modal.js
Unescape View File

@ -15,11 +15,10 @@ modal.onclick = function (event) {
}
// function
function modalOpen(buttonElement, contentElement){
function modalOpen(buttonElement, contentElement) {
let modal = document.querySelector('.modal'),
aside = document.querySelector('.modal__aside'),
elements = document.querySelectorAll(buttonElement),
device = window.screen.width,
body = document.querySelector('body');
elements.forEach(e => {
@ -28,26 +27,15 @@ function modalOpen(buttonElement, contentElement){
e.onclick = function () {
body.classList.add('overflow-hidden');
modal.classList.add('active');
aside.classList.add('active'); // Активируем aside для анимации
thisContentElement.classList.add('active');
let width = thisContentElement.clientWidth;
if (width < 400){
width = 400
}
setTimeout(() => {
if (device <= 720) {
aside.style.width = `${device}px`;
thisContentElement.style.opacity = 1;
thisContentElement.style.filter = 'blur(0px)';
}else{
aside.style.width = `${width}px`;
thisContentElement.style.opacity = 1;
thisContentElement.style.filter = 'blur(0px)';
}
thisContentElement.style.opacity = 1;
thisContentElement.style.filter = 'blur(0px)';
}, 10);
}
})
};
});
}
function closeAllModals() {
@ -56,9 +44,6 @@ function closeAllModals() {
asideItems = document.querySelectorAll('.modal__item'),
body = document.querySelector('body');
aside.style.width = '0px';
body.classList.remove('overflow-hidden');
asideItems.forEach(item => {
if (item.classList.contains('active')) {
item.style.opacity = 0;
@ -66,11 +51,14 @@ function closeAllModals() {
}
});
aside.classList.remove('active'); // Скрываем aside с анимацией
setTimeout(() => {
asideItems.forEach(item => {
item.classList.remove('active');
});
modal.classList.remove('active');
body.classList.remove('overflow-hidden');
}, 300);
}
@ -82,35 +70,27 @@ function modalClose(buttonElement) {
}
// resize
window.addEventListener('resize', (e) => {
let width = window.screen.width;
window.addEventListener('resize', () => {
let width = window.innerWidth; // Используем innerWidth для актуальной ширины окна
let modalItem = document.querySelectorAll('.modal__item');
let aside = document.querySelector('.modal__aside');
modalItem.forEach(modal => {
if (modal.classList.contains('active')) {
if (width <= 720) {
aside.style.width = '100%'; // Полная ширина на мобильных
} else {
let openAside = document.querySelector('.modal__item.active'),
newWidth = openAside.clientWidth;
aside.style.width = newWidth < 400 ? '400px' : `${newWidth}px`;
}
}
});
// media
// Перерегистрируем события при ресайзе
modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket');
modalOpen('.open-to-know', '.modal__to-know');
modalOpen('.login-open', '.modal__login');
modalClose('.modal__close');
let modalItem = document.querySelectorAll('.modal__item');
// if (width <= 720) {
modalItem.forEach(modal => {
if (modal.classList.contains('active')) {
let aside = document.querySelector('.modal__aside');
if (width <= 720) {
aside.style.width = `${width}px`
}else{
let openAside = document.querySelector('.modal__item.active'),
newWidth = openAside.clientWidth;
if (newWidth < 400){
newWidth = 400
}
aside.style.width = `${newWidth}px`
}
}
})
// }
});
// resize

44
wp-content/themes/cosmopet/static/css/front-page.css
Unescape View File

@ -3513,7 +3513,46 @@ color: #f4f1f0;
text-wrap: nowrap;
}
@media(max-width:990px){
@media (min-width: 769px) and (max-width: 1200px) {
.home .container {
padding: 88px 30px 180px !important;
}
.reviews_item .swiper-fade .swiper-slide {
width:100%!important;
}
.footer__wrapper {
width: 100%!important;
display: flex;
flex-direction: column;
}
.footer-bottom {
flex-direction: column;
}
.footer-content__wrap {
flex-direction: column;
}
.footer-content__wrap {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
width: 100%;
}
.reviews_item.reviews_item2 {
position: absolute;
max-width: 500px;
height: 360px;
right: 0%;
bottom: 25%;
}
.discount_top .discount_top-imgs {
position: absolute;
top: 20px;
right: -10px;
}
}
@media(max-width:768px){
.footer-top {
flex-direction: column;
}
@ -3562,4 +3601,7 @@ color: #f4f1f0;
flex-direction: column;
gap: 21px!important;
}
.modal__basket {
width: 100%!important;
}
}

84
wp-content/themes/cosmopet/templates/_pages/front-page.twig
Unescape View File

@ -788,53 +788,61 @@
</div>
</div>
</section>
</div>
{% endif %}
{% if show_blog %}
<section class="blog">
<div class="container">
<div class="blog_block">
<div class="blog_top">
<h2 class="blog_title">{{ function('pll_e', 'Наш блог') }}</h2>
</div>
<div class="blog__row">
<p class="blog_text">{{ function('pll_e', 'Новости рынка кормов и экологии, полезные статьи о здоровье домашних животных') }}</p>
<a href="/blog/" class="blog_link main_link"><span>{{ function('pll_e', 'Все статьи') }}</span></a>
{% if show_blog %}
<section class="blog">
<div class="container">
<div class="blog_block">
<div class="blog_top">
<h2 class="blog_title">{{ function('pll_e', 'Наш блог') }}</h2>
</div>
<div class="blog__row">
<p class="blog_text">{{ function('pll_e', 'Новости рынка кормов и экологии, полезные статьи о здоровье домашних животных') }}</p>
<a href="/blog/" class="blog_link main_link"><span>{{ function('pll_e', 'Все статьи') }}</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="blog_slider">
<div class="swiper blogSlider">
<div class="swiper-wrapper">
{% for post in blog_posts %}
<div class="swiper-slide">
<a class="blog_card" href="{{ post.link }}">
<div class="blog__card-wrapper">
<img src="{{ post.thumbnail }}" alt="{{ post.title }}" class="blog_card-img">
</div>
<div class="blog_card-info-wrap">
<div class="blog_card-info">
<h2 class="blog_card-title">{{ post.title }}</h2>
<p class="blog_card-text">{{ post.excerpt }} ...</p>
<div class="blog__card-btn">{{ function('pll_e', 'читать статью') }}</div>
</div>
<img src="{{ theme.link }}/static/img/card-line.svg" alt="" class="card-line-img">
<div class="blog_slider">
<div class="swiper blogSlider">
<div class="swiper-wrapper">
{% for post in blog_posts %}
<div class="swiper-slide">
<a class="blog_card" href="{{ post.link }}">
<div class="blog__card-wrapper">
<img src="{{ post.thumbnail }}" alt="{{ post.title }}" class="blog_card-img">
</div>
<div class="blog_card-info-wrap">
<div class="blog_card-info">
<h2 class="blog_card-title">{{ post.title }}</h2>
<p class="blog_card-text">
{% set words = post.excerpt|split(' ') %}
{% if words|length > 14 %}
{{ words|slice(0, 14)|join(' ') }}...
{% else %}
{{ post.excerpt }}...
{% endif %}
</p>
<div class="blog__card-btn">{{ function('pll_e', 'читать статью') }}</div>
</div>
<img src="{{ theme.link }}/static/img/card-line.svg" alt="" class="card-line-img">
</div>
</a>
</div>
</a>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="slider-arrows">
<button class="slider-arrow slider-arrow-prev blogSlider-prev"></button>
<button class="slider-arrow slider-arrow-next blogSlider-next"></button>
<div class="slider-arrows">
<button class="slider-arrow slider-arrow-prev blogSlider-prev"></button>
<button class="slider-arrow slider-arrow-next blogSlider-next"></button>
</div>
</div>
</div>
</div>
</section>
{% endif %}
</div>
</section>
{% endif %}
{% if reviews %}
<section class="reviews reviews-plus">
<div class="container">

6
wp-content/themes/cosmopet/templates/modal.twig
Unescape View File

@ -5,7 +5,7 @@
<aside class="modal__aside">
<div class="modal__item modal__filter">
<button class="modal__close">
<img src="{{ current_path }}assets/img/svg/main/black-x.svg" alt="">
<img src="/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg" alt="">
</button>
<div class="modal__header">
@ -18,7 +18,7 @@
<div class="modal__item modal__to-know modal__item--no-title">
<button class="modal__close">
<img src="{{ current_path }}assets/img/svg/main/black-x.svg" alt="">
<img src="/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg" alt="">
</button>
<div class="modal__header">
<p class="modal__small-title">{{ fn ('pll_e', 'Узнать о поступлении') }}</p>
@ -49,7 +49,7 @@
<div class="modal__item modal__to-know-submit modal__item--no-title">
<button class="modal__close">
<img src="assets/img/svg/main/black-x.svg" alt="">
<img src="/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg" alt="">
</button>
<div class="modal__header">
<p class="modal__small-title">{{ fn ('pll_e', 'Подписка на товар оформлена') }}</p>

2
wp-content/themes/cosmopet/templates/modal/login.twig
Unescape View File

@ -1,6 +1,6 @@
<div class="modal__item modal__login">
<button class="modal__close">
<img src="<?php bloginfo('template_url');?>/gp-include/assets/core/img/svg/main/black-x.svg" alt="">
<img src="/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg" alt="">
</button>
<div class="login_wrap login_forms">

Write Preview
Loading…
Cancel
Save