Good-Production/Fakel-Gym
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

final

Browse Source
This commit is contained in:
GP_DEV
2025-08-01 10:07:08 +03:00
parent 21562852ca
commit 7d7a28e789
54 changed files with 4554 additions and 6928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
template-parts/la-components/blocks/masonry-tiles-2/masonry-tiles-2.php
View File

@@ -16,10 +16,10 @@ if (!empty($block['align'])) {
?>
<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($classes); ?>">
<div class="container mx-auto py-[90px]">
<div class="max-[768px]:py-[40px] container mx-auto py-[90px] <?php if (!is_front_page()) echo 'p-0 pt-[90px] max-[768px]:pt-[40px]' ?>">
<?php if (get_field('heading')) : ?>
<h2 class="text-[48px] font-[500] text-[#1f2937] mb-[40px]">
<h2 class="max-[768px]:mb-[24px] max-[1050px]:text-[36px] max-[768px]:max-[768px]:text-[24px] text-[48px] font-[500] text-[#1f2937] mb-[40px]">
<?php echo get_field('heading'); ?>
</h2>
<?php endif; ?>
@@ -28,19 +28,19 @@ if (!empty($block['align'])) {
<?php while (have_rows('tiles_group')) :
the_row(); ?>
<div class="flex gap-[24px]">
<div class="max-[768px]:flex-col max-[768px]:gap-[12px] flex max-[768px]:gap-[12px] gap-[24px]">
<!-- Первая колонка -->
<div class="flex flex-col gap-[24px] w-full max-w-[424px]">
<div class="max-[768px]:max-w-full flex flex-col max-[768px]:gap-[12px] gap-[24px] w-full max-w-[424px]">
<!-- First Tile - Текстовый блок -->
<?php if (have_rows('first_tile')) : ?>
<?php while (have_rows('first_tile')) : the_row(); ?>
<div class="<?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> pt-[24px] overflow-hidden">
<div class="flex <?php echo is_front_page() ? 'flex-col justify-start' : 'flex-col-reverse justify-end'; ?> gap-[16px] h-full [&_img]:w-[294px]">
<div class="max-[768px]:pt-0 max-[768px]:mb-[12px] <?php echo is_front_page() ? 'max-[768px]:h-auto h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> pt-[24px] overflow-hidden">
<div class="flex <?php echo is_front_page() ? 'flex-col justify-start' : 'flex-col-reverse justify-end'; ?> max-[768px]:[&_img]:w-[196px] gap-[16px] h-full [&_img]:w-[294px]">
<?php if (get_sub_field('heading')) : ?>
<?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name_gym' : 'light_logo_name'); ?>
<h3 class="text-[32px] font-[500] text-[#222] leading-[115%]">
<h3 class="max-[768px]:text-[24px] text-[32px] font-[500] text-[#222] leading-[115%]">
<span>
<?php echo esc_html(get_sub_field('heading')); ?>
</span>
@@ -55,11 +55,11 @@ if (!empty($block['align'])) {
<?php if (have_rows('second_tile')) : ?>
<?php while (have_rows('second_tile')) : the_row(); ?>
<div class="relative <?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden bg-[linear-gradient(90deg,_#9d9994_39.42%,_#ccc9c4_92.9%)] dark:bg-[linear-gradient(90deg,_#2b2c35_53.4%,_#4f5870_100%)]
<div class="max-[768px]:w-full relative <?php echo is_front_page() ? 'max-[768px]:h-[180px] h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden bg-[linear-gradient(90deg,_#9d9994_39.42%,_#ccc9c4_92.9%)] dark:bg-[linear-gradient(90deg,_#2b2c35_53.4%,_#4f5870_100%)]
">
<?php $background = get_sub_field('background'); ?>
<?php if ($background) : ?>
<img class="absolute right-0 top-0 w-full h-full" alt="Фон блока"
<img class="max-[550px]:max-w-[240px] max-[768px]:max-w-[240px] absolute right-0 top-0 w-full h-full" alt="Фон блока"
src="<?php echo esc_url($background['url']); ?>">
<?php else :{
?>
@@ -90,16 +90,16 @@ if (!empty($block['align'])) {
<?php if (get_sub_field('text')) : ?>
<?php if (get_sub_field('heading')) : ?>
<h3 class="font-[600] text-[42px] text-[#fff] leading-[115%]">
<h3 class="max-[768px]:text-[20px] font-[600] text-[42px] text-[#fff] leading-[115%]">
<?php echo esc_html(get_sub_field('heading')); ?>
</h3>
<?php endif; ?>
<?php if (get_sub_field('underheading')) : ?>
<p class="text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
<p class="max-[768px]:font-[600] max-[768px]:text-[20px] text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
<?php endif; ?>
<div class="<?php echo is_front_page() ? 'max-w-[245px]' : 'max-w-full'; ?> w-full text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px]">
<div class="<?php echo is_front_page() ? 'max-[768px]:max-w-[180px] max-w-[245px]' : 'max-w-full'; ?> max-[768px]:mt-0 max-[768px]:font-[500] w-full max-[1100px]:text-[16px] text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px]">
<?php echo wp_kses_post(get_sub_field('text')); ?>
</div>
<?php endif; ?>
@@ -111,15 +111,15 @@ if (!empty($block['align'])) {
</div>
<!-- Вторая колонка -->
<div class="flex flex-col gap-[24px] w-full max-w-[872px]">
<div class="flex flex-col max-[768px]:gap-[12px] gap-[24px] w-full max-w-[872px]">
<!-- Два обычных блока сверху -->
<div class="grid grid-cols-2 gap-[24px]">
<div class="max-[550px]:grid-cols-1 grid grid-cols-2 max-[768px]:gap-[12px] gap-[24px]">
<!-- Third Tile -->
<?php if (have_rows('third_tile')) : ?>
<?php while (have_rows('third_tile')) : the_row(); ?>
<div class="relative <?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
<div class="relative <?php echo is_front_page() ? 'max-[768px]:h-[180px] h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
<?php
$background = get_sub_field('background');
if ($background) : ?>
@@ -128,12 +128,12 @@ if (!empty($block['align'])) {
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
<div class="relative flex flex-col h-full justify-end z-10">
<?php if (get_sub_field('heading')) : ?>
<h3 class="font-[700] text-[24px] text-[#fff] leading-[125%]">
<h3 class="max-[768px]:font-[600] max-[768px]:text-[20px] font-[700] text-[24px] text-[#fff] leading-[125%]">
<?php echo esc_html(get_sub_field('heading')); ?>
</h3>
<?php endif; ?>
<?php if (get_sub_field('text')) : ?>
<div class="text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-full' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
<div class="max-[1100px]:text-[16px] text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-full' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
<?php endif; ?>
</div>
</div>
@@ -143,7 +143,7 @@ if (!empty($block['align'])) {
<!-- Fourth Tile -->
<?php if (have_rows('fourth_tile')) : ?>
<?php while (have_rows('fourth_tile')) : the_row(); ?>
<div class="relative <?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
<div class="relative <?php echo is_front_page() ? 'max-[768px]:h-[180px] h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
<?php
$background = get_sub_field('background');
if ($background) : ?>
@@ -152,16 +152,16 @@ if (!empty($block['align'])) {
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
<div class="relative flex flex-col h-full justify-end z-10">
<?php if (get_sub_field('heading')) : ?>
<h3 class="font-[700] text-[24px] text-[#fff] leading-[125%]">
<h3 class="max-[768px]:font-[600] max-[768px]:text-[20px] font-[700] text-[24px] text-[#fff] leading-[125%]">
<?php echo esc_html(get_sub_field('heading')); ?>
</h3>
<?php endif; ?>
<?php if (get_sub_field('underheading')) : ?>
<p class="text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
<p class="max-[768px]:font-[600] max-[768px]:text-[20px] text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
<?php endif; ?>
<?php if (get_sub_field('text')) : ?>
<div class="text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-full' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
<div class="max-[1100px]:text-[16px] text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-full' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
<?php endif; ?>
</div>
</div>
@@ -173,7 +173,7 @@ if (!empty($block['align'])) {
<!-- Fifth Tile - Широкий блок снизу -->
<?php if (have_rows('fifth_tile')) : ?>
<?php while (have_rows('fifth_tile')) : the_row(); ?>
<div class="relative <?php echo is_front_page() ? 'h-[298px]' : 'h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
<div class="relative <?php echo is_front_page() ? 'max-[768px]:h-[180px] h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
<?php
$background = get_sub_field('background');
if ($background) : ?>
@@ -183,16 +183,16 @@ if (!empty($block['align'])) {
<div class="relative flex flex-col h-full justify-end z-10">
<?php if (get_sub_field('heading')) : ?>
<h3 class="font-[600] text-[42px] text-[#fff] leading-[115%]">
<h3 class="max-[768px]:font-[600] max-[768px]:text-[20px] font-[600] text-[42px] text-[#fff] leading-[115%]">
<?php echo esc_html(get_sub_field('heading')); ?>
</h3>
<?php endif; ?>
<?php if (get_sub_field('underheading')) : ?>
<p class="text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
<p class="max-[768px]:font-[600] max-[768px]:text-[20px] text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
<?php endif; ?>
<?php if (get_sub_field('text')) : ?>
<div class="text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-[400px]' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
<div class="max-[1100px]:text-[16px] text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-[400px]' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
<?php endif; ?>
</div>
</div>
@@ -207,4 +207,56 @@ if (!empty($block['align'])) {
<?php endif; ?>
</div>
</section>
</section>
<script>
function reorderSecondTile() {
if (window.innerWidth <= 767) {
const tilesGroups = document.querySelectorAll('.block-masonry-tiles-block .flex.max-\\[768px\\]\\:flex-col');
tilesGroups.forEach(group => {
const firstColumn = group.querySelector('.max-w-\\[424px\\]');
const secondColumn = group.querySelector('.max-w-\\[872px\\]');
if (firstColumn && secondColumn) {
const secondTile = firstColumn.children[1];
if (secondTile) {
secondColumn.appendChild(secondTile);
}
}
});
} else {
restoreOriginalOrder();
}
}
function restoreOriginalOrder() {
const tilesGroups = document.querySelectorAll('.block-masonry-tiles-block .flex.max-\\[768px\\]\\:flex-col');
tilesGroups.forEach(group => {
const firstColumn = group.querySelector('.max-w-\\[424px\\]');
const secondColumn = group.querySelector('.max-w-\\[872px\\]');
if (firstColumn && secondColumn) {
const secondTileInSecondColumn = secondColumn.querySelector('[class*="bg-\\[linear-gradient"]');
if (secondTileInSecondColumn && firstColumn.children.length === 1) {
firstColumn.appendChild(secondTileInSecondColumn);
}
}
});
}
document.addEventListener('DOMContentLoaded', reorderSecondTile);
window.addEventListener('resize', reorderSecondTile);
if (window.ResizeObserver) {
const resizeObserver = new ResizeObserver(() => {
reorderSecondTile();
});
resizeObserver.observe(document.body);
}
</script>