Лагерь: Секция программы
This commit is contained in:
Dekart Deploy Bot
parent
0af82b233d
commit
97c25af060
@ -805,141 +805,137 @@ p {
|
|||||||
|
|
||||||
|
|
||||||
/* programs */
|
/* programs */
|
||||||
.programs-wrapper {
|
.programs__grid {
|
||||||
flex-wrap: wrap;
|
display: grid;
|
||||||
display: flex;
|
grid-template-columns: 1fr;
|
||||||
gap: 30px;
|
gap: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item {
|
@media (min-width: 641px) {
|
||||||
width: calc(33.33% - 20px);
|
.programs__grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.programs__grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.programs__card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
border-radius: 20px;
|
||||||
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform .25s ease, box-shadow .25s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item_img {
|
.programs__card:hover {
|
||||||
border-radius: 30px;
|
transform: translateY(-4px);
|
||||||
width: auto;
|
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
|
||||||
height: 350px;
|
}
|
||||||
|
|
||||||
|
.programs__image {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16 / 10;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item p {
|
.programs__body {
|
||||||
margin: 0;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
.scroll-icon-wrapper {
|
padding: 20px;
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.programs__item_title {
|
|
||||||
font-size: 26px;
|
|
||||||
line-height: 1.2;
|
|
||||||
color: #212121;
|
|
||||||
font-weight: 600;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item_date {
|
.programs__name {
|
||||||
|
font-family: Montserrat, sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 18px;
|
line-height: 1.25;
|
||||||
|
color: #1c2b2d;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item_text {
|
@media (min-width: 641px) {
|
||||||
font-size: 16px;
|
.programs__name { font-size: 20px; }
|
||||||
line-height: 1.3;
|
|
||||||
color: #212121;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item_price {
|
@media (min-width: 1024px) {
|
||||||
font-size: 26px;
|
.programs__name { font-size: 22px; }
|
||||||
color: #212121;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-details {
|
.programs__date {
|
||||||
width: fit-content;
|
font-size: 14px;
|
||||||
color: #ffffff;
|
font-weight: 400;
|
||||||
border: 2px solid #3bb273;
|
color: #999;
|
||||||
background-color: #3bb273;
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programs__desc {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: #555;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programs__footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programs__price {
|
||||||
|
font-family: Montserrat, sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #3bb273;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programs__duration {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programs__btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px 20px;
|
||||||
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
border-radius: 30px;
|
color: #3bb273;
|
||||||
padding: 15px 30px;
|
border: 2px solid #3bb273;
|
||||||
transition: .3s;
|
background: transparent;
|
||||||
|
border-radius: 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: .2s;
|
||||||
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-details:hover {
|
.programs__btn:hover,
|
||||||
background-color: transparent;
|
.programs__btn:focus-visible {
|
||||||
color: #212121;
|
background: #3bb273;
|
||||||
|
color: #fff;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-programs,
|
@media (min-width: 641px) {
|
||||||
.modal-mentors {
|
.programs__btn { width: 100%; }
|
||||||
position: fixed;
|
|
||||||
top: -12px;
|
|
||||||
right: -28px;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
display: none;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #000000ce;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-programs.open {
|
@media (min-width: 1024px) {
|
||||||
display: flex;
|
.programs__btn { width: 100%; }
|
||||||
}
|
|
||||||
|
|
||||||
.modal-mentors.open {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-programs-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
gap: 30px;
|
|
||||||
border-radius: 30px;
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 40px;
|
|
||||||
max-width: 90%;
|
|
||||||
max-height: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-programs__content p {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.programs__content {
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-close-modal {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 100%;
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-close-mentors {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 100%;
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-programs__img {
|
|
||||||
min-width: 260px;
|
|
||||||
height: 260px;
|
|
||||||
border-radius: 30px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-programs__img img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* programs END */
|
/* programs END */
|
||||||
@ -2059,11 +2055,13 @@ p {
|
|||||||
|
|
||||||
.programs__item_img {
|
.programs__item_img {
|
||||||
border-radius: clamp(20px, 2.5vw, 30px);
|
border-radius: clamp(20px, 2.5vw, 30px);
|
||||||
height: clamp(228px, 29.17vw, 350px);
|
aspect-ratio: 3 / 2;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item_title {
|
.programs__item_title {
|
||||||
font-size: clamp(17px, 2.17vw, 26px);
|
font-size: clamp(17px, 2.17vw, 26px);
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item_date {
|
.programs__item_date {
|
||||||
@ -2075,7 +2073,8 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.programs__item_price {
|
.programs__item_price {
|
||||||
font-size: clamp(17px, 2.17vw, 26px);
|
font-size: clamp(20px, 2.5vw, 28px);
|
||||||
|
color: #3bb273;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-details {
|
.btn-details {
|
||||||
@ -2526,21 +2525,11 @@ p {
|
|||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.programs .camp_title {
|
.programs .camp_title {
|
||||||
padding: 0 15px 25px 15px;
|
padding: 0 15px 25px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-icon-wrapper {
|
|
||||||
margin-top: -20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.programs-wrapper {
|
.programs-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -2566,17 +2555,15 @@ p {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item {
|
|
||||||
width: 100%;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.programs__item_img {
|
.programs__item_img {
|
||||||
height: 250px;
|
aspect-ratio: 3 / 2;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs__item_title {
|
.programs__item_title {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-details {
|
.btn-details {
|
||||||
@ -2783,11 +2770,6 @@ p {
|
|||||||
max-width: 95%;
|
max-width: 95%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.btn-close-modal,
|
|
||||||
.btn-close-mentors {
|
|
||||||
left: auto;
|
|
||||||
right: -28px;
|
|
||||||
}
|
|
||||||
.modal-programs__img {
|
.modal-programs__img {
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|||||||
@ -48,10 +48,11 @@ document.addEventListener("click", function (event) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (target.classList.contains("btn-program")) {
|
if (target.classList.contains("btn-program")) {
|
||||||
modalPrograms.querySelector('.modal-programs__img').innerHTML = target.parentNode.querySelector('.programs__item_img').outerHTML;
|
const card = target.closest('.programs__card');
|
||||||
modalPrograms.querySelector('.programs__item_title').textContent = target.parentNode.querySelector('.programs__item_title').textContent;
|
modalPrograms.querySelector('.modal-programs__img').innerHTML = card.querySelector('.programs__image').outerHTML;
|
||||||
modalPrograms.querySelector('.programs__item_price').textContent = target.parentNode.querySelector('.programs__item_price').textContent;
|
modalPrograms.querySelector('.programs__item_title').textContent = card.querySelector('.programs__name').textContent;
|
||||||
modalPrograms.querySelector('.programs__content').innerHTML = target.parentNode.querySelector('.programs_content').innerHTML;
|
modalPrograms.querySelector('.programs__item_price').textContent = card.querySelector('.programs__price').textContent;
|
||||||
|
modalPrograms.querySelector('.programs__content').innerHTML = card.querySelector('.programs_content').innerHTML;
|
||||||
modalPrograms.classList.add('open');
|
modalPrograms.classList.add('open');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -76,7 +77,7 @@ document.addEventListener("click", function (event) {
|
|||||||
'.hero-media-search__container',
|
'.hero-media-search__container',
|
||||||
'.about-us__wrapper',
|
'.about-us__wrapper',
|
||||||
'.infograph h2', '.infograph .camp_text', '.infograph-wrapper',
|
'.infograph h2', '.infograph .camp_text', '.infograph-wrapper',
|
||||||
'.programs h2', '.programs-wrapper > div',
|
'.programs h2', '\.programs__grid > article',
|
||||||
'.mentors h2', '.mentors-wrapper > div',
|
'.mentors h2', '.mentors-wrapper > div',
|
||||||
'.routine h2', '.routine__item',
|
'.routine h2', '.routine__item',
|
||||||
'.foto h2', '.camp-foto-wrapper',
|
'.foto h2', '.camp-foto-wrapper',
|
||||||
@ -102,7 +103,7 @@ document.addEventListener("click", function (event) {
|
|||||||
observer.observe(el);
|
observer.observe(el);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('.programs-wrapper > div, .mentors-wrapper > div').forEach((card, i) => {
|
document.querySelectorAll('.programs__grid > article, .mentors-wrapper > div').forEach((card, i) => {
|
||||||
card.style.transitionDelay = (i * 0.08) + 's';
|
card.style.transitionDelay = (i * 0.08) + 's';
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|||||||
@ -260,13 +260,11 @@ $metrics = [
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="programs" itemscope itemtype="https://schema.org/ItemList">
|
<section class="programs" itemscope itemtype="https://schema.org/ItemList">
|
||||||
|
<div class="container">
|
||||||
<h2 class="camp_title" itemprop="name">Летние программы</h2>
|
<h2 class="camp_title" itemprop="name">Летние программы</h2>
|
||||||
<div class="scroll-icon-wrapper" style="mix-blend-mode: multiply;">
|
<div class="programs__grid">
|
||||||
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/scroll-hand.svg" alt="" width="42" height="42" loading="lazy">
|
|
||||||
</div>
|
|
||||||
<div class="programs-wrapper">
|
|
||||||
<?php
|
<?php
|
||||||
$programs = carbon_get_post_meta($post_id, 'programs' );
|
$programs = carbon_get_post_meta($post_id, 'programs');
|
||||||
if (is_array($programs)) {
|
if (is_array($programs)) {
|
||||||
foreach ($programs as $item) {
|
foreach ($programs as $item) {
|
||||||
$programs_img = $item['programs_img'];
|
$programs_img = $item['programs_img'];
|
||||||
@ -276,18 +274,25 @@ $metrics = [
|
|||||||
$programs_price = $item['programs_price'];
|
$programs_price = $item['programs_price'];
|
||||||
$programs_days = $item['programs_days'];
|
$programs_days = $item['programs_days'];
|
||||||
$programs_content = $item['programs_content'];?>
|
$programs_content = $item['programs_content'];?>
|
||||||
<div class="programs__item">
|
<article class="programs__card">
|
||||||
<img class="programs__item_img" loading="lazy" width="360" height="350" src="<?php echo wp_get_attachment_url($programs_img); ?>" alt="<?php echo get_post_meta( $programs_img, '_wp_attachment_image_alt', true ); ?>">
|
<img class="programs__image" loading="lazy" width="360" height="225" src="<?php echo wp_get_attachment_url($programs_img); ?>" alt="<?php echo get_post_meta($programs_img, '_wp_attachment_image_alt', true); ?>">
|
||||||
<p class="programs__item_title"><?php echo esc_html($programs_title); ?></p>
|
<div class="programs__body">
|
||||||
<p class="programs__item_date"><?php echo esc_html($programs_date); ?></p>
|
<h3 class="programs__name"><?php echo esc_html($programs_title); ?></h3>
|
||||||
<p class="programs__item_text"><?php echo esc_html($programs_text); ?></p>
|
<p class="programs__date"><?php echo esc_html($programs_date); ?></p>
|
||||||
<p class="programs__item_price">от <?php echo number_format((int)$programs_price, 0, ',', ' '); ?> ₽ / <?php echo esc_html($programs_days); ?></p>
|
<p class="programs__desc"><?php echo esc_html($programs_text); ?></p>
|
||||||
<div class="programs_content" style="display: none;"><?php echo wp_kses_post($programs_content); ?></div>
|
<div class="programs__footer">
|
||||||
<button class="btn-details btn-program">Подробнее</button>
|
<span class="programs__price"><?php echo number_format((int)$programs_price, 0, ',', ' '); ?> ₽</span>
|
||||||
|
<span class="programs__duration"><?php echo esc_html($programs_days); ?></span>
|
||||||
</div>
|
</div>
|
||||||
<?php }
|
<div class="programs_content" style="display: none;"><?php echo wp_kses_post($programs_content); ?></div>
|
||||||
|
<button class="programs__btn btn-program" aria-label="Подробнее о программе <?php echo esc_attr($programs_title); ?>">Подробнее</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
} ?>
|
} ?>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<?php getBanner('', $post_id); ?>
|
<?php getBanner('', $post_id); ?>
|
||||||
@ -645,9 +650,9 @@ $metrics = [
|
|||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div class="modal-programs">
|
<div class="modal-programs" role="dialog" aria-modal="true" aria-label="Программа лагеря">
|
||||||
<div class="modal-programs-wrapper">
|
<div class="modal-programs-wrapper">
|
||||||
<button class="btn-close-modal btn-close-programs"><svg role="presentation"
|
<button class="btn-close-modal btn-close-programs" aria-label="Закрыть"><svg role="presentation"
|
||||||
class="t-popup__close-icon t-popup__close-icon_cross" width="23px" height="23px" viewBox="0 0 23 23"
|
class="t-popup__close-icon t-popup__close-icon_cross" width="23px" height="23px" viewBox="0 0 23 23"
|
||||||
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<g stroke="none" stroke-width="1" fill="#ffffff" fill-rule="evenodd">
|
<g stroke="none" stroke-width="1" fill="#ffffff" fill-rule="evenodd">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user