diff --git a/category-rfo.php b/category-rfo.php index f068584..ced70dc 100644 --- a/category-rfo.php +++ b/category-rfo.php @@ -7,6 +7,9 @@ if ($current_category->name !== 'РФО') { get_template_part( 'rfo/breadcrumbs-rfo' ); } + +$has_video = ($current_category->slug === 'opinion') ? true : false; + ?>
name; ?>
@@ -47,7 +50,7 @@ if ($current_category->name !== 'РФО') { $query = new WP_Query($args); ?> - $query]); ?> + $query , 'has_video' => $has_video]); ?> diff --git a/content-post-rfo.php b/content-post-rfo.php index 663ebb0..7eae6d3 100644 --- a/content-post-rfo.php +++ b/content-post-rfo.php @@ -1,27 +1,38 @@
-
- + +
+
+
+
+ +
+ -
-
- + +
+
+ +
+
- - -

- -
-
-
Подробнее
- -
+
+
Подробнее
+ + +
+
+
\ No newline at end of file diff --git a/frontend/src/styles/rfo/article.css b/frontend/src/styles/rfo/article.css index 521147f..459e1e1 100644 --- a/frontend/src/styles/rfo/article.css +++ b/frontend/src/styles/rfo/article.css @@ -19,35 +19,50 @@ .article-item-wrapper__rfo{ /* flex: 0 0 auto; Запрещаем растягивание и сжатие */ 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; } -.article-interview-wrapper__rfo{ +.article-short-wrapper__rfo{ /* flex: 0 0 auto; Запрещаем растягивание и сжатие */ background-color: white; - border: 6px solid white; - padding-top: 22px; + border-width: 6px 6px 6px 6px; /* top right bottom left */ + border-style: solid; /* Общий стиль для всех сторон */ + border-color: white; /* Общий цвет */ border-radius: 14px; } - - .article-item-rfo{ position: relative; - flex-shrink: 0; + height: 409px; width: 397px; 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 */ - -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; +.article-short-rfo{ + position: relative; + flex-shrink: 0; + height: 205px; + width: 373px; + background: #D4D4D4; /* пример фона */ + -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{ @@ -164,6 +179,28 @@ 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 в ряд) */ @media (max-width: 768px) { @@ -178,6 +215,8 @@ width: 100%; /* или любой нужный вам размер */ aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */ background: #f1f3eb; + + /* Маска с сохранением пропорций */ -webkit-mask-image: url('data:image/svg+xml;utf8,'); @@ -196,16 +235,40 @@ width: 100%; /* или любой нужный вам размер */ aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */ background: #f1f3eb; - + + clip-path: none; + /* Маска с сохранением пропорций */ - -webkit-mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-image: var(--article-mob-mask); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; - - mask-image: url('data:image/svg+xml;utf8,'); + mask-image: var(--article-mob-mask); mask-repeat: no-repeat; 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{ flex-direction: column; diff --git a/frontend/src/styles/rfo/landing.css b/frontend/src/styles/rfo/landing.css index a1fa885..1fe9d1b 100644 --- a/frontend/src/styles/rfo/landing.css +++ b/frontend/src/styles/rfo/landing.css @@ -1,7 +1,7 @@ .header-rfo__landing{ width: 100%; 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-repeat: no-repeat; background-position: center; @@ -103,9 +103,23 @@ 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) { @@ -128,6 +142,10 @@ .about-block-slogan__rfo{ flex: 1 1 100%; /* На всю ширину */ width: 100%; /* На всякий случай */ - } + } + + .fumigation-botton{ + display: none; + } } diff --git a/frontend/src/styles/rfo/rfo.css b/frontend/src/styles/rfo/rfo.css index 3830165..5feafdd 100644 --- a/frontend/src/styles/rfo/rfo.css +++ b/frontend/src/styles/rfo/rfo.css @@ -9,6 +9,10 @@ --2: #f1f3eb; --tekst: #2f2f2f; --article-item-mask: url('data:image/svg+xml;utf8,'); + --article-mob-mask: url('data:image/svg+xml;utf8,'); + --article-short-mask: url("data:image/svg+xml;utf8,"); + --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,"); } .header-rfo { @@ -69,9 +73,10 @@ } .content-rfo-land{ + position: relative; display: flex; flex-direction: column; - margin-top: -22px; + margin-top: -62px; padding-bottom: 42px; /**width: 1200px; max-width: 1200px;**/ @@ -167,7 +172,6 @@ text-align: center; } - @media (max-width: 768px) { .content-rfo-land{ diff --git a/rfo/category-end.php b/rfo/category-end.php index f0c3c77..dbc6fd5 100644 --- a/rfo/category-end.php +++ b/rfo/category-end.php @@ -11,9 +11,26 @@ // Извлекаем параметры $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'; -$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; ?>
@@ -28,20 +45,16 @@ $posts_count = isset($args['posts_count']) ? $args['posts_count'] : 1; $query = new WP_Query($query_args); if ($query->have_posts()) : ?> - -
-
-
-
-
- -
- have_posts()) : $query->the_post(); ?> - 'article-item-rfo '.$style ] );?> - -
-
- + + have_posts()) : $query->the_post(); ?> + $color_style, + 'title' => $title, + 'has_video' => $has_video + ]);?> + + diff --git a/rfo/landing.php b/rfo/landing.php index 720fc93..513701f 100644 --- a/rfo/landing.php +++ b/rfo/landing.php @@ -6,9 +6,9 @@ 'opinion', // slug рубрики - 'wrapper' => 'article-interview-wrapper__rfo', - 'style' => '', - 'title' => 'Интервью' + 'style' => 'short', + 'title' => 'Интервью', + 'has_video' => true ]);?> -
+ + + + + +
О проекте
@@ -49,6 +54,27 @@
+ + + + + + + + + + + + + + + + + + + + +
diff --git a/rfo/post-list.php b/rfo/post-list.php index 09c0484..76d4e1f 100644 --- a/rfo/post-list.php +++ b/rfo/post-list.php @@ -1,6 +1,7 @@ have_posts()) { @@ -10,11 +11,11 @@ if ($query->have_posts()) { $query->the_post(); 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) : - 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:?> - false]);?> + false, 'has_video' => $has_video]);?>