leto/shkola
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Лагерь: Секция программы

Browse Source
This commit is contained in:
Dekart Deploy Bot 2026-05-10 23:07:59 +03:00
parent 0af82b233d
commit 97c25af060
3 changed files with 145 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
wp-content/themes/dekart/assets/css/camp.css
View File

@ -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 {
display: flex; grid-template-columns: repeat(2, 1fr);
flex-direction: column; gap: 24px;
gap: 20px; }
} }
.programs__item_img { @media (min-width: 1024px) {
border-radius: 30px; .programs__grid {
width: auto; grid-template-columns: repeat(3, 1fr);
height: 350px; gap: 30px;
object-fit: cover; }
} }
.programs__item p { .programs__card {
margin: 0; display: flex;
flex-direction: column;
border-radius: 20px;
background: #fff;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease;
} }
.scroll-icon-wrapper { .programs__card:hover {
display: none; transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
} }
.programs__item_title { .programs__image {
font-size: 26px; width: 100%;
line-height: 1.2; aspect-ratio: 16 / 10;
color: #212121; object-fit: cover;
font-weight: 600; display: block;
flex: 1;
} }
.programs__item_date { .programs__body {
font-weight: 600; display: flex;
font-size: 18px; flex-direction: column;
gap: 8px;
padding: 20px;
flex: 1;
} }
.programs__item_text { .programs__name {
font-size: 16px; font-family: Montserrat, sans-serif;
line-height: 1.3; font-size: 20px;
color: #212121; font-weight: 600;
font-weight: 500; line-height: 1.25;
color: #1c2b2d;
margin: 0;
} }
.programs__item_price { @media (min-width: 641px) {
font-size: 26px; .programs__name { font-size: 20px; }
color: #212121;
font-weight: 600;
} }
.btn-details { @media (min-width: 1024px) {
width: fit-content; .programs__name { font-size: 22px; }
color: #ffffff;
border: 2px solid #3bb273;
background-color: #3bb273;
font-weight: 600;
text-transform: uppercase;
border-radius: 30px;
padding: 15px 30px;
transition: .3s;
} }
.btn-details:hover { .programs__date {
background-color: transparent; font-size: 14px;
color: #212121; font-weight: 400;
color: #999;
margin: 0;
} }
.modal-programs, .programs__desc {
.modal-mentors { font-size: 15px;
position: fixed; line-height: 1.4;
top: -12px; color: #555;
right: -28px; font-weight: 400;
bottom: 0; margin: 0;
left: 0; flex: 1;
display: none;
align-items: center;
justify-content: center;
background-color: #000000ce;
z-index: 100;
} }
.modal-programs.open { .programs__footer {
display: flex; display: flex;
align-items: baseline;
gap: 10px;
margin-top: 4px;
} }
.modal-mentors.open { .programs__price {
display: flex; font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 700;
color: #3bb273;
line-height: 1.2;
} }
.modal-programs-wrapper { .programs__duration {
position: relative; font-size: 14px;
display: flex; color: #999;
gap: 30px; font-weight: 400;
border-radius: 30px;
background-color: #fff;
padding: 40px;
max-width: 90%;
max-height: 90%;
} }
.modal-programs__content p { .programs__btn {
margin-bottom: 15px; width: 100%;
padding: 14px 20px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
color: #3bb273;
border: 2px solid #3bb273;
background: transparent;
border-radius: 100px;
cursor: pointer;
transition: .2s;
margin-top: 12px;
} }
.programs__content { .programs__btn:hover,
white-space: pre-line; .programs__btn:focus-visible {
background: #3bb273;
color: #fff;
outline: none;
} }
.btn-close-modal { @media (min-width: 641px) {
position: absolute; .programs__btn { width: 100%; }
bottom: 100%;
left: 100%;
} }
.btn-close-mentors { @media (min-width: 1024px) {
position: absolute; .programs__btn { width: 100%; }
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;

13
wp-content/themes/dekart/assets/js/camp.js
View File

@ -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';
}); });
})(); })();

65
wp-content/themes/dekart/page-camp.php
View File

@ -260,34 +260,39 @@ $metrics = [
</section> </section>
<section class="programs" itemscope itemtype="https://schema.org/ItemList"> <section class="programs" itemscope itemtype="https://schema.org/ItemList">
<h2 class="camp_title" itemprop="name">Летние программы</h2> <div class="container">
<div class="scroll-icon-wrapper" style="mix-blend-mode: multiply;"> <h2 class="camp_title" itemprop="name">Летние программы</h2>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/scroll-hand.svg" alt="" width="42" height="42" loading="lazy"> <div class="programs__grid">
</div> <?php
<div class="programs-wrapper"> $programs = carbon_get_post_meta($post_id, 'programs');
<?php if (is_array($programs)) {
$programs = carbon_get_post_meta($post_id, 'programs' ); foreach ($programs as $item) {
if (is_array($programs)) { $programs_img = $item['programs_img'];
foreach ($programs as $item) { $programs_title = $item['programs_title'];
$programs_img = $item['programs_img']; $programs_date = $item['programs_date'];
$programs_title = $item['programs_title']; $programs_text = $item['programs_text'];
$programs_date = $item['programs_date']; $programs_price = $item['programs_price'];
$programs_text = $item['programs_text']; $programs_days = $item['programs_days'];
$programs_price = $item['programs_price']; $programs_content = $item['programs_content'];?>
$programs_days = $item['programs_days']; <article class="programs__card">
$programs_content = $item['programs_content'];?> <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); ?>">
<div class="programs__item"> <div class="programs__body">
<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 ); ?>"> <h3 class="programs__name"><?php echo esc_html($programs_title); ?></h3>
<p class="programs__item_title"><?php echo esc_html($programs_title); ?></p> <p class="programs__date"><?php echo esc_html($programs_date); ?></p>
<p class="programs__item_date"><?php echo esc_html($programs_date); ?></p> <p class="programs__desc"><?php echo esc_html($programs_text); ?></p>
<p class="programs__item_text"><?php echo esc_html($programs_text); ?></p> <div class="programs__footer">
<p class="programs__item_price">от <?php echo number_format((int)$programs_price, 0, ',', ' '); ?> ₽ / <?php echo esc_html($programs_days); ?></p> <span class="programs__price"><?php echo number_format((int)$programs_price, 0, ',', ' '); ?> ₽</span>
<div class="programs_content" style="display: none;"><?php echo wp_kses_post($programs_content); ?></div> <span class="programs__duration"><?php echo esc_html($programs_days); ?></span>
<button class="btn-details btn-program">Подробнее</button> </div>
</div> <div class="programs_content" style="display: none;"><?php echo wp_kses_post($programs_content); ?></div>
<?php } <button class="programs__btn btn-program" aria-label="Подробнее о программе <?php echo esc_attr($programs_title); ?>">Подробнее</button>
} ?> </div>
</div> </article>
<?php
}
} ?>
</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">