Лагерь: Отзывы
This commit is contained in:
parent
9b44b1ac4e
commit
999ff72c7e
@ -1886,89 +1886,183 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* contact END */
|
/* contact END */
|
||||||
/* reviews */
|
/* ═══════════════════════════════════════════════
|
||||||
.camp-reviews-wrapper {
|
REVIEWS — Yandex-style via lazeweb utilities
|
||||||
position: relative;
|
═══════════════════════════════════════════════ */
|
||||||
|
.lw-scroll-x {
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
.lw-scroll-x::-webkit-scrollbar {
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
.lw-scroll-x::-webkit-scrollbar-thumb {
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-reviews-wrapper .reviews__item-client_name {
|
.lw-grid {
|
||||||
font-size: 16px;
|
display: grid;
|
||||||
font-weight: 400;
|
}
|
||||||
text-align: start;
|
.lw-grid--3 {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
.lw-grid--2 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
.lw-gap-20 {
|
||||||
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-reviews-wrapper .reviews__item-client_text {
|
.lw-flex {
|
||||||
text-align: start;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-reviews-wrapper .reviews-wrapper {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-reviews-wrapper .reviews__item,
|
|
||||||
.camp-reviews-wrapper .reviews__item-wrapper {
|
|
||||||
min-height: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.camp-reviews-wrapper .reviews__item-wrapper:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.camp-reviews-wrapper .custom-button-next,
|
|
||||||
.camp-reviews-wrapper .custom-button-prev {
|
|
||||||
position: absolute;
|
|
||||||
top: var(--swiper-navigation-top-offset, 50%);
|
|
||||||
width: 54px;
|
|
||||||
height: 54px;
|
|
||||||
margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
|
|
||||||
z-index: 10;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
}
|
||||||
|
.lw-flex--row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.lw-flex--col {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.lw-gap-12 {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.lw-gap-8 {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.lw-items-center {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
}
|
||||||
color: var(--swiper-navigation-color, var(--swiper-theme-color));
|
.lw-justify-between {
|
||||||
background-image: none;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-reviews-wrapper .custom-button-next {
|
.lw-card {
|
||||||
right: -50px;
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: box-shadow .2s;
|
||||||
}
|
}
|
||||||
.camp-reviews-wrapper .custom-button-prev {
|
.lw-card:hover {
|
||||||
left: -50px;
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-reviews-wrapper .custom-button-next:after {
|
.lw-avatar {
|
||||||
content: 'next';
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-reviews-wrapper .custom-button-next:after,
|
|
||||||
.camp-reviews-wrapper .custom-button-prev:after {
|
|
||||||
font-family: swiper-icons;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 26px;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 54px;
|
overflow: hidden;
|
||||||
width: 54px;
|
flex-shrink: 0;
|
||||||
|
background: #e8f5e9;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #3bb273;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
.lw-avatar--48 {
|
||||||
.camp-reviews-wrapper .custom-button-next:after {
|
width: 48px;
|
||||||
content: 'next';
|
height: 48px;
|
||||||
|
}
|
||||||
|
.lw-avatar__img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-reviews-wrapper .custom-button-prev:after {
|
.lw-text-dark {
|
||||||
content: 'prev';
|
color: #1c2b2d;
|
||||||
|
}
|
||||||
|
.lw-text-gray {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.lw-text-sm {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.lw-text-xs {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
.lw-font-medium {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.lw-font-semibold {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.lw-font-bold {
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-reviews-wrapper .swiper-button-disabled {
|
.lw-mt-8 {
|
||||||
opacity: 0;
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.lw-mb-8 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.lw-mb-12 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-left: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.lw-badge--verified {
|
||||||
|
background: #e8f5e9;
|
||||||
|
color: #2e7d32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-stars {
|
||||||
|
display: flex;
|
||||||
|
gap: 2px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.lw-star {
|
||||||
|
color: #e0e0e0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.lw-star--filled {
|
||||||
|
color: #FFD43E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-card__text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: #444;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.lw-grid--3,
|
||||||
|
.lw-grid--2 {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
overflow-x: auto;
|
||||||
|
scroll-snap-type: x mandatory;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
.lw-grid--3 .lw-card,
|
||||||
|
.lw-grid--2 .lw-card {
|
||||||
|
flex: 0 0 300px;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.lw-grid--3 .lw-card,
|
||||||
|
.lw-grid--2 .lw-card {
|
||||||
|
flex: 0 0 260px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* reviews END*/
|
/* reviews END*/
|
||||||
@ -2665,29 +2759,6 @@ html {
|
|||||||
height: clamp(292px, 37.5vw, 450px);
|
height: clamp(292px, 37.5vw, 450px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-reviews-wrapper .reviews__item-client_name {
|
|
||||||
font-size: clamp(10px, 1.33vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-reviews-wrapper .reviews__item-client_text {
|
|
||||||
font-size: clamp(10px, 1.33vw, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-reviews-wrapper .custom-button-next,
|
|
||||||
.camp-reviews-wrapper .custom-button-prev {
|
|
||||||
width: clamp(35px, 4.5vw, 54px);
|
|
||||||
height: clamp(35px, 4.5vw, 54px);
|
|
||||||
margin-top: calc(1px -(var(--swiper-navigation-size) / 2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-reviews-wrapper .custom-button-next:after,
|
|
||||||
.camp-reviews-wrapper .custom-button-prev:after {
|
|
||||||
font-size: clamp(17px, 2.17vw, 26px);
|
|
||||||
padding: clamp(3px, .42vw, 5px);
|
|
||||||
height: clamp(35px, 4.5vw, 54px);
|
|
||||||
width: clamp(35px, 4.5vw, 54px);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width < 780px) {
|
@media (width < 780px) {
|
||||||
@ -2909,11 +2980,6 @@ html {
|
|||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more .btn-more {
|
|
||||||
height: 24px;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-wrapper {
|
.faq-wrapper {
|
||||||
gap: 0;
|
gap: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -2964,14 +3030,6 @@ html {
|
|||||||
.mentors__item_img {
|
.mentors__item_img {
|
||||||
max-height: 195px;
|
max-height: 195px;
|
||||||
}
|
}
|
||||||
.camp-reviews-wrapper .custom-button-next {
|
|
||||||
right: -20px;
|
|
||||||
top: 40%;
|
|
||||||
}
|
|
||||||
.camp-reviews-wrapper .custom-button-prev {
|
|
||||||
left: -20px;
|
|
||||||
top: 40%;
|
|
||||||
}
|
|
||||||
.modal-mentors-wrapper {
|
.modal-mentors-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
@ -3027,12 +3085,6 @@ html {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
.camp-reviews-wrapper .custom-button-next:after, .camp-reviews-wrapper .custom-button-prev:after {
|
|
||||||
font-size: 12px;
|
|
||||||
height: 27px;
|
|
||||||
width: 27px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-camp-request-form {
|
.modal-camp-request-form {
|
||||||
|
|||||||
@ -464,21 +464,13 @@ $metrics = [
|
|||||||
<section class="section-reveal section-bg camp-reviews" data-bg="white">
|
<section class="section-reveal section-bg camp-reviews" data-bg="white">
|
||||||
<h2 class="camp_title">Что говорят о нас родители</h2>
|
<h2 class="camp_title">Что говорят о нас родители</h2>
|
||||||
<?php
|
<?php
|
||||||
|
$key = array(
|
||||||
$key = [
|
array(
|
||||||
[
|
|
||||||
'key' => 'review_type',
|
'key' => 'review_type',
|
||||||
'value' => 'camp',
|
'value' => 'camp',
|
||||||
'compare' => '='
|
'compare' => '='
|
||||||
]
|
)
|
||||||
];
|
);
|
||||||
|
|
||||||
?>
|
|
||||||
<div class="camp-reviews-wrapper">
|
|
||||||
<div class="reviews-wrapper">
|
|
||||||
<div class='swiper reviews-owl'>
|
|
||||||
<div class='swiper-wrapper'>
|
|
||||||
<?php
|
|
||||||
$args = array(
|
$args = array(
|
||||||
'posts_per_page' => -1,
|
'posts_per_page' => -1,
|
||||||
'post_type' => 'reviews',
|
'post_type' => 'reviews',
|
||||||
@ -489,64 +481,45 @@ $metrics = [
|
|||||||
);
|
);
|
||||||
$the_query = new WP_Query($args);
|
$the_query = new WP_Query($args);
|
||||||
if ($the_query->have_posts()) :
|
if ($the_query->have_posts()) :
|
||||||
while ($the_query->have_posts()) : $the_query->the_post();
|
?>
|
||||||
|
<div class="lw-scroll-x">
|
||||||
|
<div class="lw-grid lw-grid--3 lw-gap-20">
|
||||||
|
<?php while ($the_query->have_posts()) : $the_query->the_post();
|
||||||
$review_id = get_the_ID();
|
$review_id = get_the_ID();
|
||||||
|
$avatar = carbon_get_post_meta($review_id, 'review_avatar');
|
||||||
$review_date = get_the_date( 'd.m.Y');
|
$stars = carbon_get_post_meta($review_id, 'review_star');
|
||||||
$review_level = carbon_get_post_meta( $review_id, 'review_level' );
|
$text = carbon_get_post_meta($review_id, 'review_text');
|
||||||
|
$date = get_the_date('d.m.Y');
|
||||||
$avatar = carbon_get_post_meta( $review_id, 'review_avatar' );
|
$name = get_the_title();
|
||||||
|
|
||||||
$stars = carbon_get_post_meta( $review_id, 'review_star' );
|
|
||||||
$tekst_otzyva = carbon_get_post_meta( $review_id, 'review_text' );
|
|
||||||
$prepodavatel = carbon_get_post_meta( $review_id, 'review_teacher' );
|
|
||||||
|
|
||||||
$add_class= "more";
|
|
||||||
|
|
||||||
if ( strlen($tekst_otzyva) < 350 ) $add_class= "";
|
|
||||||
|
|
||||||
if ( $tekst_otzyva ) : ?>
|
|
||||||
<div class="swiper-slide reviews__item">
|
|
||||||
<div class="reviews__item-wrapper">
|
|
||||||
<div class="reviews__item-client">
|
|
||||||
<div class="reviews__item-client_avatar" style="background: <?php echo esc_attr(rand_color()); ?>">
|
|
||||||
<?php if ($avatar) : ?>
|
|
||||||
<img loading="lazy" width="57" height="57" class="reviews__item-client_avatar-img" src="<?php echo wp_get_attachment_url($avatar); ?>" alt="<?php echo get_post_meta( $avatar, '_wp_attachment_image_alt', true ); ?>">
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
<div class="reviews__item-client_data">
|
|
||||||
<div class="reviews__item-client_name"><?php the_title(); ?></div>
|
|
||||||
<div class="reviews__item-client_lavel" ><?php echo esc_html($review_level); ?></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="reviews__item-client_stars">
|
|
||||||
<?php
|
|
||||||
if (!$stars) $stars = 5;
|
if (!$stars) $stars = 5;
|
||||||
for ($i = 1; $i <= $stars; $i++) { ?>
|
if (!$text) continue;
|
||||||
<svg width="20" height="20" viewBox="0 0 21 19" fill="none">
|
?>
|
||||||
<path d="M9.58463 1.50884C9.89101 0.602477 11.1729 0.602476 11.4793 1.50884L13.1158 6.35007C13.2531 6.75637 13.6343 7.02985 14.0631 7.02985H19.2721C20.2504 7.02985 20.6467 8.28958 19.8447 8.84971L15.6995 11.7446C15.335 11.9991 15.1823 12.4636 15.3247 12.8847L16.9239 17.6158C17.233 18.5302 16.1954 19.3085 15.404 18.7559L11.1045 15.7533C10.7606 15.5131 10.3033 15.5131 9.95941 15.7533L5.65991 18.7559C4.86857 19.3085 3.83092 18.5302 4.14001 17.6158L5.73926 12.8847C5.8816 12.4636 5.72891 11.9991 5.36448 11.7446L1.21924 8.84971C0.417196 8.28958 0.813532 7.02985 1.79181 7.02985H7.00081C7.42969 7.02985 7.81081 6.75637 7.94815 6.35007L9.58463 1.50884Z" fill="#FFD43E" />
|
<div class="lw-card">
|
||||||
</svg>
|
<div class="lw-flex lw-flex--row lw-gap-12 lw-items-center">
|
||||||
<?php } ?>
|
<div class="lw-avatar lw-avatar--48">
|
||||||
<span><?php echo esc_html($review_date); ?></span>
|
<?php if ($avatar) : ?>
|
||||||
</div>
|
<img class="lw-avatar__img" src="<?php echo wp_get_attachment_url($avatar); ?>" alt="<?php echo esc_attr($name); ?>" loading="lazy">
|
||||||
<div class="reviews__item-client_text <?php echo esc_attr($add_class); ?>">
|
|
||||||
<?php echo wp_kses_post($tekst_otzyva); ?>
|
|
||||||
<button class="btn-more"><span onclick='this.parentNode.parentNode.classList.remove("more")'>... Читать еще</span></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<?php
|
|
||||||
endif;
|
|
||||||
endwhile; ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<div class='custom-button-next reviews-owl-next'></div>
|
<div class="lw-flex lw-flex--col">
|
||||||
<div class='custom-button-prev reviews-owl-prev'></div>
|
<div class="lw-text-dark lw-font-semibold"><?php echo esc_html($name); ?></div>
|
||||||
<?php wp_reset_postdata(); ?>
|
<div class="lw-text-xs lw-text-gray"><?php echo esc_html($date); ?></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="lw-badge lw-badge--verified">Проверенный отзыв</div>
|
||||||
|
</div>
|
||||||
|
<div class="lw-stars lw-mt-8">
|
||||||
|
<?php for ($i = 1; $i <= 5; $i++) : ?>
|
||||||
|
<svg class="lw-star <?php echo $i <= $stars ? 'lw-star--filled' : ''; ?>" width="16" height="16" viewBox="0 0 21 19" fill="none">
|
||||||
|
<path d="M9.58463 1.50884C9.89101 0.602477 11.1729 0.602476 11.4793 1.50884L13.1158 6.35007C13.2531 6.75637 13.6343 7.02985 14.0631 7.02985H19.2721C20.2504 7.02985 20.6467 8.28958 19.8447 8.84971L15.6995 11.7446C15.335 11.9991 15.1823 12.4636 15.3247 12.8847L16.9239 17.6158C17.233 18.5302 16.1954 19.3085 15.404 18.7559L11.1045 15.7533C10.7606 15.5131 10.3033 15.5131 9.95941 15.7533L5.65991 18.7559C4.86857 19.3085 3.83092 18.5302 4.14001 17.6158L5.73926 12.8847C5.8816 12.4636 5.72891 11.9991 5.36448 11.7446L1.21924 8.84971C0.417196 8.28958 0.813532 7.02985 1.79181 7.02985H7.00081C7.42969 7.02985 7.81081 6.75637 7.94815 6.35007L9.58463 1.50884Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
<?php endfor; ?>
|
||||||
|
</div>
|
||||||
|
<div class="lw-card__text lw-mt-8"><?php echo wp_kses_post($text); ?></div>
|
||||||
|
</div>
|
||||||
|
<?php endwhile; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; wp_reset_postdata(); ?>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section-reveal section-bg camp-faq" data-bg="mint">
|
<section class="section-reveal section-bg camp-faq" data-bg="mint">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user