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

add styles interview

Browse Source
This commit is contained in:
AK Delfin
2025-06-22 20:49:00 +03:00
parent 86687a1832
commit 952aaf80ae
9 changed files with 122 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
content-post-rfo.php
View File

@@ -1,7 +1,6 @@
<?php <?php
$formatted_date = format_event_date(); $formatted_date = format_event_date();
$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'] : ''; $title = isset($args['title']) ? $args['title'] : '';
@@ -12,15 +11,20 @@ $has_video = isset($args['has_video']) ? $args['has_video'] : false;
<div class="article-item-wrapper__rfo"> <div class="article-item-wrapper__rfo">
<?if ( $title !== ''):?> <?if ( $title !== ''):?>
<div class="land-cart-title"> <div class="land-cart-title">
<div class="land-cart-title__text"><?php echo esc_html($title); ?></div> <div class="land-cart-title__text">
<?if ( isset($args['title_link']) ):?>
<a href="<?=$args['title_link']?>"><?php echo esc_html($title); ?></a>
<?else:?>
<?php echo esc_html($title); ?>
<?endif?>
</div>
<div class="land-cart-title__arrow"></div> <div class="land-cart-title__arrow"></div>
</div> </div>
<?endif?> <?endif?>
<div class="<?=$class; ?><?=$has_video === true ? ' has-video' : ''; ?>"> <div class="<?=$class; ?><?=$has_video === true ? ' has-video' : ''; ?>">
<a href="<?php the_permalink(); ?>" class="article-item__image-container<"> <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>
<?if (! $short ):?>
<div class="article-item__text"> <div class="article-item__text">
<div class="article-time"> <div class="article-time">
<img src="<?= get_asset('/icons/time.svg'); ?>" alt="" /><?php echo $formatted_date; ?> <img src="<?= get_asset('/icons/time.svg'); ?>" alt="" /><?php echo $formatted_date; ?>
@@ -28,11 +32,11 @@ $has_video = isset($args['has_video']) ? $args['has_video'] : false;
<a href="<?php the_permalink(); ?>" class="subtitle-16 article-item__link"><?php the_title(); ?></a> <a href="<?php the_permalink(); ?>" class="subtitle-16 article-item__link"><?php the_title(); ?></a>
</div> </div>
<div class="article-rfo-details"> <div class="article-rfo-details">
<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"> <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">
<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" /> <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> </svg>
</div> </div>
</div> </div>
<?endif?>
</div> </div>
</div> </div>

41
content-short-rfo.php Normal file
View File

@@ -0,0 +1,41 @@
<?php
$formatted_date = format_event_date();
//$class = $full_width ? 'article-item-main__rfo' : '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">
<?if ( $title !== ''):?>
<div class="land-cart-title">
<div class="land-cart-title__text">
<?if ( isset($args['title_link']) ):?>
<a href="<?=$args['title_link']?>"><?php echo esc_html($title); ?></a>
<?else:?>
<?php echo esc_html($title); ?>
<?endif?>
</div>
<div class="land-cart-title__arrow"></div>
</div>
<?endif?>
<div class="rfo-stack">
<div class="rfo-svg-bg"></div>
<div class="rfo-stack-img has-video">
<a href="<?php the_permalink(); ?>">
<?= render_webp_picture_by_post(null, 'news-list-picture'); ?>
</a>
</div>
</div>
</div>

4
frontend/src/global.css
View File

@@ -10,6 +10,10 @@
--second-family: "Unbounded", sans-serif; --second-family: "Unbounded", sans-serif;
} }
*, *::before, *::after {
box-sizing: border-box;
}
html { html {
font-size: 10px; font-size: 10px;
} }

1
frontend/src/main.js
View File

@@ -31,6 +31,7 @@ import './styles/rfo/social.css';
import './styles/rfo/article.css'; import './styles/rfo/article.css';
import './styles/rfo/breadcrumbs.css'; import './styles/rfo/breadcrumbs.css';
import './styles/rfo/landing.css'; import './styles/rfo/landing.css';
import './styles/rfo/interview.css';

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

@@ -23,6 +23,7 @@
border-style: solid; /* Общий стиль для всех сторон */ border-style: solid; /* Общий стиль для всех сторон */
border-color: white; /* Общий цвет */ border-color: white; /* Общий цвет */
border-radius: 14px; border-radius: 14px;
overflow: hidden;
} }
.article-short-wrapper__rfo{ .article-short-wrapper__rfo{
@@ -32,21 +33,23 @@
border-style: solid; /* Общий стиль для всех сторон */ border-style: solid; /* Общий стиль для всех сторон */
border-color: white; /* Общий цвет */ border-color: white; /* Общий цвет */
border-radius: 14px; border-radius: 14px;
width: 100%;
} }
.article-item-rfo{ .article-item-rfo{
position: relative; position: relative;
height: 409px; height: 409px;
width: 397px; width: 390px;
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');*/ clip-path: path('M6.79428 0L380.205 0C385.042 0 388.999 3.9499 388.999 8.77793V34.6476V374.353V400.222C388.999 405.05 385.042 409 380.205 409H227.707C221.54 409 220.385 405.144 217.499 400.222L211.392 389.805C209.382 386.378 205.127 383.509 201.559 383.13H6.79426C1.95665 383.13 -2 379.181 -2 374.352V8.77756C-2 3.94952 1.95667 0 6.79428 0Z'); /** -webkit-mask-image: var(--article-item-mask);
-webkit-mask-image: var(--article-item-mask);
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover; -webkit-mask-size: cover;
mask-image: var(--article-item-mask); mask-image: var(--article-item-mask);
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: cover; mask-size: cover;**/
} }
.article-short-rfo{ .article-short-rfo{
@@ -65,6 +68,7 @@
clip-path: inset(0 round 10px); Скругление углов (поддержка хуже) */ clip-path: inset(0 round 10px); Скругление углов (поддержка хуже) */
} }
.item-rfo-zh{ .item-rfo-zh{
fill: var(--zheltyy); fill: var(--zheltyy);
background: var(--zheltyy); background: var(--zheltyy);

42
frontend/src/styles/rfo/interview.css Normal file
View File

@@ -0,0 +1,42 @@
.rfo-stack {
position: relative;
width: 100%;
max-width: 373px;
height: 280px;
overflow: hidden;
margin: 0 auto;
}
.rfo-svg-bg {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 373 205' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='354.893' y='205' width='336.786' height='162' rx='10' transform='rotate(-180 354.893 205)' fill='%23D5D5D5' fill-opacity='0.3'/><rect x='362.136' y='193' width='351.272' height='170' rx='10' transform='rotate(-180 362.136 193)' fill='%23D5D5D5' fill-opacity='0.3'/><rect x='373' y='180' width='373' height='180' rx='10' transform='rotate(-180 373 180)' fill='%23D5D5D5' fill-opacity='0.3'/></svg>") no-repeat center / 100% 100%;
}
.rfo-stack-img {
position: relative;
z-index: 2;
height: 210px;
overflow: hidden;
border-radius: 10px;
}
.rfo-stack-img picture,
.rfo-stack-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 480px) {
.rfo-stack {
height: 340px;
}
.rfo-stack-img {
height: 250px;
}
}

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

@@ -20,7 +20,7 @@
.land-cart-title{ .land-cart-title{
display: flex; display: flex;
padding: 2px 12px; padding: 12px 12px;
} }
@@ -113,6 +113,7 @@
@media (min-width: 768px) and (max-width: 1024px) { @media (min-width: 768px) and (max-width: 1024px) {
.fumigation-botton { .fumigation-botton {

5
rfo/category-end.php
View File

@@ -20,9 +20,11 @@ if ( $style == 'short' ){
$wrapper = 'article-short-wrapper__rfo'; $wrapper = 'article-short-wrapper__rfo';
$color_style = 'article-short-rfo'; $color_style = 'article-short-rfo';
$short = true; $short = true;
$template = 'short-rfo';
} else { } else {
$short = false; $short = false;
$wrapper = 'article-item-wrapper__rfo'; $wrapper = 'article-item-wrapper__rfo';
$template = 'post-rfo';
if ($style == '') { if ($style == '') {
$color_style = 'article-item-rfo'; $color_style = 'article-item-rfo';
} else { } else {
@@ -47,10 +49,11 @@ $posts_count = isset($args['posts_count']) ? $args['posts_count'] : 1;
if ($query->have_posts()) : ?> if ($query->have_posts()) : ?>
<?php while ($query->have_posts()) : $query->the_post(); ?> <?php while ($query->have_posts()) : $query->the_post(); ?>
<?get_template_part( 'content', 'post-rfo', <?get_template_part( 'content', $template,
[ [
'class'=>$color_style, 'class'=>$color_style,
'title' => $title, 'title' => $title,
'title_link' => get_category_link(get_category_by_slug($category)),
'has_video' => $has_video 'has_video' => $has_video
]);?> ]);?>
<?php endwhile; ?> <?php endwhile; ?>

3
rfo/landing.php
View File

@@ -14,7 +14,8 @@
<?php get_template_part('rfo/category-end', null, [ <?php get_template_part('rfo/category-end', null, [
'category' => 'fumigation', // slug рубрики 'category' => 'fumigation', // slug рубрики
'style' => 'item-rfo-zh', 'style' => 'item-rfo-zh',
'title' => 'Фумигация' 'title' => 'Фумигация',
'has_video' => false
]);?> ]);?>
<?php get_template_part('rfo/category-end', null, [ <?php get_template_part('rfo/category-end', null, [