delf/agroexpert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add interview styles

Browse Source
This commit is contained in:
AK Delfin
2025-06-22 14:09:09 +03:00
parent 3cb726055c
commit 86687a1832
8 changed files with 202 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
category-rfo.php
View File

@@ -7,6 +7,9 @@
if ($current_category->name !== 'РФО') { if ($current_category->name !== 'РФО') {
get_template_part( 'rfo/breadcrumbs-rfo' ); get_template_part( 'rfo/breadcrumbs-rfo' );
} }
$has_video = ($current_category->slug === 'opinion') ? true : false;
?> ?>
<div class="rfo__rubric"><?=$current_category->name; ?></div> <div class="rfo__rubric"><?=$current_category->name; ?></div>
@@ -47,7 +50,7 @@ if ($current_category->name !== 'РФО') {
$query = new WP_Query($args); $query = new WP_Query($args);
?> ?>
<?php get_template_part('rfo/post-list', null, ['query' => $query]); ?> <?php get_template_part('rfo/post-list', null, ['query' => $query , 'has_video' => $has_video]); ?>
</div> </div>
<?php custom_pagination( null, 'pagination pagination__rfo' ); ?> <?php custom_pagination( null, 'pagination pagination__rfo' ); ?>
</div> </div>

41
content-post-rfo.php
View File

@@ -1,27 +1,38 @@
<?php <?php
$formatted_date = format_event_date(); $formatted_date = format_event_date();
$full_width = $args['full_width'] ?? false;
$short = $args['short'] ?? false;
//$class = $full_width ? 'article-item-main__rfo' : 'article-item-rfo'; //$class = $full_width ? 'article-item-main__rfo' : 'article-item-rfo';
$class = isset($args['class']) ? $args['class'] : 'article-item-rfo'; $class = isset($args['class']) ? $args['class'] : 'article-item-rfo';
$title = isset($args['title']) ? $args['title'] : '';
$has_video = isset($args['has_video']) ? $args['has_video'] : false;
?> ?>
<div class="article-item-wrapper__rfo"> <div class="article-item-wrapper__rfo">
<div class="<?=$class; ?>"> <?if ( $title !== ''):?>
<a href="<?php the_permalink(); ?>" class="article-item__image-container"> <div class="land-cart-title">
<div class="land-cart-title__text"><?php echo esc_html($title); ?></div>
<div class="land-cart-title__arrow"></div>
</div>
<?endif?>
<div class="<?=$class; ?><?=$has_video === true ? ' has-video' : ''; ?>">
<a href="<?php the_permalink(); ?>" class="article-item__image-container<">
<?=render_webp_picture_by_post( null, 'news-list-picture'); ?> <?=render_webp_picture_by_post( null, 'news-list-picture'); ?>
</a> </a>
<div class="article-item__text"> <?if (! $short ):?>
<div class="article-time"> <div class="article-item__text">
<img src="<?= get_asset('/icons/time.svg'); ?>" alt="" /><?php echo $formatted_date; ?> <div class="article-time">
<img src="<?= get_asset('/icons/time.svg'); ?>" alt="" /><?php echo $formatted_date; ?>
</div>
<a href="<?php the_permalink(); ?>" class="subtitle-16 article-item__link"><?php the_title(); ?></a>
</div> </div>
<a href="<?php the_permalink(); ?>" class="subtitle-16 article-item__link"><?php the_title(); ?></a> <div class="article-rfo-details">
<? if ($full_width) : ?> <div class="article-rfo-details-text"><a href="<?php the_permalink();?>">Подробнее</a></div><div class="article-rfo-details-icon"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<p class="article-item__descr text-13"><?php the_excerpt(); ?></p> <path d="M8.57157 16.4283H16.4287M16.4287 16.4283V8.5712M16.4287 16.4283L8.57157 8.5712" stroke="#006842" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<? endif; ?> </svg>
</div> </div>
<div class="article-rfo-details"> </div>
<div class="article-rfo-details-text"><a href="<?php the_permalink();?>">Подробнее</a></div><div class="article-rfo-details-icon"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <?endif?>
<path d="M8.57157 16.4283H16.4287M16.4287 16.4283V8.5712M16.4287 16.4283L8.57157 8.5712" stroke="#006842" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg></div></div>
</div> </div>
</div> </div>

101
frontend/src/styles/rfo/article.css
View File

@@ -19,35 +19,50 @@
.article-item-wrapper__rfo{ .article-item-wrapper__rfo{
/* flex: 0 0 auto; Запрещаем растягивание и сжатие */ /* flex: 0 0 auto; Запрещаем растягивание и сжатие */
background-color: white; background-color: white;
border: 6px solid white; border-width: 4px 4px 4px 4px; /* top right bottom left */
border-style: solid; /* Общий стиль для всех сторон */
border-color: white; /* Общий цвет */
border-radius: 14px; border-radius: 14px;
} }
.article-interview-wrapper__rfo{ .article-short-wrapper__rfo{
/* flex: 0 0 auto; Запрещаем растягивание и сжатие */ /* flex: 0 0 auto; Запрещаем растягивание и сжатие */
background-color: white; background-color: white;
border: 6px solid white; border-width: 6px 6px 6px 6px; /* top right bottom left */
padding-top: 22px; border-style: solid; /* Общий стиль для всех сторон */
border-color: white; /* Общий цвет */
border-radius: 14px; border-radius: 14px;
} }
.article-item-rfo{ .article-item-rfo{
position: relative; position: relative;
flex-shrink: 0;
height: 409px; height: 409px;
width: 397px; width: 397px;
background: #f1f3eb; /* пример фона */ background: #f1f3eb; /* пример фона */
/* clip-path: path('M8.79428 0L378.205 0C383.042 0 386.999 3.9499 386.999 8.77793V34.6476V374.353V400.222C386.999 405.05 383.042 409 378.205 409H225.707C219.54 409 218.385 405.144 215.499 400.222L209.392 389.805C207.382 386.378 203.127 383.509 199.559 383.13H8.79426C3.95665 383.13 0 379.181 0 374.352V8.77756C0 3.94952 3.95667 0 8.79428 0Z');*/
-webkit-mask-image: var(--article-item-mask);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-image: var(--article-item-mask);
mask-repeat: no-repeat;
mask-size: cover;
}
/* МАСКА через встроенный data URI */ .article-short-rfo{
-webkit-mask-image: var(--article-item-mask); position: relative;
-webkit-mask-repeat: no-repeat; flex-shrink: 0;
-webkit-mask-size: cover; height: 205px;
mask-image: var(--article-item-mask); width: 373px;
mask-repeat: no-repeat; background: #D4D4D4; /* пример фона */
mask-size: cover; -webkit-mask-image: var(--article-short-mask);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-image: var(--article-short-mask);
mask-repeat: no-repeat;
mask-size: cover;
/*clip-path: path('M0 0H373V180H0V0Z'); /* Простой прямоугольник с скруглёнными углами
clip-path: inset(0 round 10px); Скругление углов (поддержка хуже) */
} }
.item-rfo-zh{ .item-rfo-zh{
@@ -164,6 +179,28 @@
border-top: none!important; border-top: none!important;
} }
.has-video {
position: relative;
}
.has-video::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 64px;
background-image: var(--video-play-icon);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: translate(-50%, -50%);
pointer-events: none; /* не блокирует клик по ссылке */
z-index: 2;
}
/* Мобильные (1 в ряд) */ /* Мобильные (1 в ряд) */
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -178,6 +215,8 @@
width: 100%; /* или любой нужный вам размер */ width: 100%; /* или любой нужный вам размер */
aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */ aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */
background: #f1f3eb; background: #f1f3eb;
/* Маска с сохранением пропорций */ /* Маска с сохранением пропорций */
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>');
@@ -196,16 +235,40 @@
width: 100%; /* или любой нужный вам размер */ width: 100%; /* или любой нужный вам размер */
aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */ aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */
background: #f1f3eb; background: #f1f3eb;
clip-path: none;
/* Маска с сохранением пропорций */ /* Маска с сохранением пропорций */
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>'); -webkit-mask-image: var(--article-mob-mask);
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
mask-image: var(--article-mob-mask);
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 100% 100%; mask-size: 100% 100%;
} }
.article-short-rfo{
position: relative;
flex-shrink: 0;
width: 100%;
height: auto;
background: #D4D4D4; /* пример фона */
aspect-ratio: 257 / 141;
-webkit-mask-image: var(--article-short-mob-mask);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-image: var(--article-short-mob-mask);
mask-repeat: no-repeat;
mask-size: 100% 100%;
/*clip-path: path('M0 0H373V180H0V0Z'); /* Простой прямоугольник с скруглёнными углами
clip-path: inset(0 round 10px); Скругление углов (поддержка хуже) */
}
.article-single--rfo{ .article-single--rfo{
flex-direction: column; flex-direction: column;

24
frontend/src/styles/rfo/landing.css
View File

@@ -1,7 +1,7 @@
.header-rfo__landing{ .header-rfo__landing{
width: 100%; width: 100%;
height: 728px; height: 728px;
background-image: url('https://agroexpert.press/wp-content/themes/agroexpert/frontend/img/rfo-landing.png'); background-image: url('https://agroexpert.press/wp-content/themes/agroexpert/frontend/img/fumigation.png');
background-size: cover; /* Заполняет весь блок, обрезая края */ background-size: cover; /* Заполняет весь блок, обрезая края */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@@ -103,9 +103,23 @@
margin-left: 28px; margin-left: 28px;
} }
.fumigation-botton {
position: absolute;
right: 15%;
top: -250px;
transform: translateY(-50%);
display: inline-block;
}
@media (min-width: 768px) and (max-width: 1024px) {
.fumigation-botton {
display: none;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -128,6 +142,10 @@
.about-block-slogan__rfo{ .about-block-slogan__rfo{
flex: 1 1 100%; /* На всю ширину */ flex: 1 1 100%; /* На всю ширину */
width: 100%; /* На всякий случай */ width: 100%; /* На всякий случай */
} }
.fumigation-botton{
display: none;
}
} }

8
frontend/src/styles/rfo/rfo.css
View File

@@ -9,6 +9,10 @@
--2: #f1f3eb; --2: #f1f3eb;
--tekst: #2f2f2f; --tekst: #2f2f2f;
--article-item-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 387 409"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79428 0L378.205 0C383.042 0 386.999 3.9499 386.999 8.77793V34.6476V374.353V400.222C386.999 405.05 383.042 409 378.205 409H225.707C219.54 409 218.385 405.144 215.499 400.222L209.392 389.805C207.382 386.378 203.127 383.509 199.559 383.13H8.79426C3.95665 383.13 0 379.181 0 374.352V8.77756C0 3.94952 3.95667 0 8.79428 0Z" fill="black"/></svg>'); --article-item-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 387 409"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79428 0L378.205 0C383.042 0 386.999 3.9499 386.999 8.77793V34.6476V374.353V400.222C386.999 405.05 383.042 409 378.205 409H225.707C219.54 409 218.385 405.144 215.499 400.222L209.392 389.805C207.382 386.378 203.127 383.509 199.559 383.13H8.79426C3.95665 383.13 0 379.181 0 374.352V8.77756C0 3.94952 3.95667 0 8.79428 0Z" fill="black"/></svg>');
--article-mob-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>');
--article-short-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373 205'><rect x='354.893' y='205' width='336.786' height='162' rx='10' transform='rotate(-180 354.893 205)' fill='black' fill-opacity='0.3'/><rect x='362.136' y='193' width='351.272' height='170' rx='10' transform='rotate(-180 362.136 193)' fill='black' fill-opacity='0.3'/><rect x='373' y='180' width='373' height='180' rx='10' transform='rotate(-180 373 180)' fill='black' fill-opacity='0.3'/></svg>");
--article-short-mob-mask: url("data:image/svg+xml,%3Csvg width='257' height='141' viewBox='0 0 257 141' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='244.097' y='141' width='231.643' height='111.424' rx='10' transform='rotate(-180 244.097 141)' fill='black' fill-opacity='0.3' /%3E%3Crect x='249.079' y='132.746' width='241.606' height='116.927' rx='10' transform='rotate(-180 249.079 132.746)' fill='black' fill-opacity='0.3' /%3E%3Crect x='256.551' y='123.805' width='256.551' height='123.805' rx='10' transform='rotate(-180 256.551 123.805)' fill='black' fill-opacity='0.3' /%3E%3C/svg%3E");
--video-play-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32.0001' r='32' fill='white' fill-opacity='0.5'/><path d='M26 22L44 32L26 42V22Z' fill='black'/></svg>");
} }
.header-rfo { .header-rfo {
@@ -69,9 +73,10 @@
} }
.content-rfo-land{ .content-rfo-land{
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: -22px; margin-top: -62px;
padding-bottom: 42px; padding-bottom: 42px;
/**width: 1200px; /**width: 1200px;
max-width: 1200px;**/ max-width: 1200px;**/
@@ -167,7 +172,6 @@
text-align: center; text-align: center;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.content-rfo-land{ .content-rfo-land{

45
rfo/category-end.php
View File

@@ -11,9 +11,26 @@
// Извлекаем параметры // Извлекаем параметры
$category = isset($args['category']) ? $args['category'] : 'rfo'; $category = isset($args['category']) ? $args['category'] : 'rfo';
$title = isset($args['title']) ? $args['title'] : 'РФО'; $title = isset($args['title']) ? $args['title'] : '';
$wrapper = isset($args['wrapper']) ? $args['wrapper'] : 'article-item-wrapper__rfo'; $wrapper = isset($args['wrapper']) ? $args['wrapper'] : 'article-item-wrapper__rfo';
$style = isset($args['style']) ? $args['style'] : 0; $style = isset($args['style']) ? $args['style'] : '';
$has_video = isset($args['has_video']) ? $args['has_video'] : false;
if ( $style == 'short' ){
$wrapper = 'article-short-wrapper__rfo';
$color_style = 'article-short-rfo';
$short = true;
} else {
$short = false;
$wrapper = 'article-item-wrapper__rfo';
if ($style == '') {
$color_style = 'article-item-rfo';
} else {
$color_style = 'article-item-rfo '.$style;
}
}
$posts_count = isset($args['posts_count']) ? $args['posts_count'] : 1; $posts_count = isset($args['posts_count']) ? $args['posts_count'] : 1;
?> ?>
<div class="custom-category-block" data-category="<?php echo esc_attr($category); ?>"> <div class="custom-category-block" data-category="<?php echo esc_attr($category); ?>">
@@ -28,20 +45,16 @@ $posts_count = isset($args['posts_count']) ? $args['posts_count'] : 1;
$query = new WP_Query($query_args); $query = new WP_Query($query_args);
if ($query->have_posts()) : ?> if ($query->have_posts()) : ?>
<div class="<?=$wrapper?>"> <?php while ($query->have_posts()) : $query->the_post(); ?>
<div class="land-cart-title"> <?get_template_part( 'content', 'post-rfo',
<div class="land-cart-title__text"><?php echo esc_html($title); ?></div> [
<div class="land-cart-title__arrow"></div> 'class'=>$color_style,
</div> 'title' => $title,
'has_video' => $has_video
<div class="article-item-rfo"> ]);?>
<?php while ($query->have_posts()) : $query->the_post(); ?> <?php endwhile; ?>
<?get_template_part( 'content', 'post-rfo', [ 'class'=>'article-item-rfo '.$style ] );?>
<?php endwhile; ?>
</div>
</div>
<?php endif; <?php endif;
wp_reset_postdata(); ?> wp_reset_postdata(); ?>

34
rfo/landing.php
View File

File diff suppressed because one or more lines are too long

7
rfo/post-list.php
View File

@@ -1,6 +1,7 @@
<?php <?php
global $wp_query; global $wp_query;
$large_first_image = $args['large_first_image'] ?? true; $large_first_image = $args['large_first_image'] ?? true;
$has_video = $args['has_video'] ?? false;
$post_counter = 0; $post_counter = 0;
$query = $args['query'] ?? $wp_query; $query = $args['query'] ?? $wp_query;
if ($query->have_posts()) { if ($query->have_posts()) {
@@ -10,11 +11,11 @@ if ($query->have_posts()) {
$query->the_post(); $query->the_post();
if ( $post_counter == 1 ) : if ( $post_counter == 1 ) :
get_template_part('content', 'post-main-rfo', ['full_width' => $post_count === 1 ]); get_template_part('content', 'post-main-rfo', ['full_width' => $post_count === 1, 'has_video' => $has_video ]);
elseif ( $post_counter == 2) : elseif ( $post_counter == 2) :
get_template_part('content', 'post-rfo', ['full_width' => $post_count === 1 && $large_first_image]); get_template_part('content', 'post-rfo', ['full_width' => $post_count === 1 && $large_first_image, 'has_video' => $has_video]);
else:?> else:?>
<?get_template_part('content', 'post-rfo', ['full_width' => false]);?> <?get_template_part('content', 'post-rfo', ['full_width' => false, 'has_video' => $has_video]);?>
<?php endif; ?> <?php endif; ?>
<?wp_reset_postdata(); <?wp_reset_postdata();