Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on parcours renovateur

Browse Source
This commit is contained in:
Antoine M 2024-04-22 12:24:37 +02:00
parent e33448f943
commit 73014daa08
5 changed files with 211 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
resources/css/pages/single-parcours.css Normal file
View File

@ -0,0 +1,51 @@
.homegrade-page--parcours {
aside {
@apply py-4;
}
h1 {
@apply text-4xl font-bold;
}
h2 {
@apply text-3xl font-bold;
}
.parcours-steps {
@apply flex flex-col gap-y-6;
}
.parcours-other-steps-suggestion {
@apply bg-white !p-6 !pr-16 rounded-3xl shadowed flex items-center gap-4;
transition: all 0.3s ease;
&:hover {
@apply translate-x-4 !bg-white !rounded-3xl;
}
.step-icon {
@apply w-12 h-12 relative;
}
span::after {
transition: all 0.3s ease;
content: ' ';
@apply inline-block absolute w-3 h-3 right-6 top-1/2 -translate-y-1/2 filter-secondary;
background-image: url('../resources/img/graphic-assets/chevron_right.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
.parcours-steps {
@apply sticky top-0;
}
}
.current-steps-index {
@apply !static;
}
.current-steps-index {
@apply chapter_index;
.chapter_index__title {
@apply my-0;
}
}

15
resources/css/pages/template-parcours-renovateur.css
View File

@ -1,7 +1,14 @@
.parcours-steps-container { .parcours-steps-container {
@apply md:grid grid-cols-3 gap-12; @apply md:grid grid-cols-3 gap-12 pt-8 pb-24;
/* .step-container { .card {
@apply bg-gray p-6 rounded-lg; h2 {
} */ @apply !my-4;
line-height: 1.2;
}
}
}
.step-icon {
@apply w-12 h-12 relative;
} }

108
single-parcours-parent.php
View File

@ -1,33 +1,111 @@
<?php <?php
get_header(); $chapters = new WP_Query(array(
'post_type' => 'parcours',
'posts_per_page' => -1,
'orderby' => 'menu_order',
'order' => 'ASC',
'status' => 'publish',
'post_parent' => get_queried_object_id(),
));
$otherSteps = new WP_Query(array(
'post_type' => 'parcours',
'posts_per_page' => -1,
'orderby' => 'menu_order',
'order' => 'ASC',
'status' => 'publish',
'post_parent' => 0,
'post__not_in' => array(get_queried_object_id())
));
?> ?>
<nav class=" breadcrumbs_navigation" aria-label="<?php echo __("Vous êtes ici", "homegrade-theme__texte-fonctionnel") ?>">
<?php
$archiveParcours = get_page_by_template('template-parcours-renovateur.php')[0];
?>
<ol>
<li>
<a href="<?php echo home_url() ?>" title="<?php echo __("Accueil", "homegrade-theme__texte-fonctionnel") ?>">
<img src="<?php echo get_template_directory_uri() . "/resources/img/pictogrammes/icon_house_dark.svg" ?>" alt="">
</a>
</li>
<li><a href="<?php echo get_post_permalink($archiveParcours) ?>"><?php echo $archiveParcours->post_title ?></a></li>
<li><a href="<?php echo the_permalink() ?>" aria-current="location" aria-disabled="true"><?php echo get_queried_object()->post_title ?></a></li>
</ol>
</nav>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article class="container my-8 mx-auto entry-content single-editor-content <?php echo $thematiqueColorSlug ? "entry-content--" . $thematiqueColorSlug : "" ?>"> <?php
<h1>parent</h1> $pageIcon = get_field('page_icon', $archiveParcours->ID);
<!-- CHAPTER INDEX --> get_template_part("template-components/heading-box--parcours", null, array(
<aside class="chapter_index"> "pageIcon" => $pageIcon,
<?php if ($chapterBlockIndex) : ?> "subtitle" => __("Parcours rénovateur", "homegrade-theme__texte-fonctionnel"),
"title" => get_the_title(),
"icon" => $pageIcon,
));
?>
<div class="parcours-content-wrapper conseils_wrapper">
<aside>
<div class="parcours-steps">
<div class="current-steps-index">
<?php if ($chapters->posts) : ?>
<div class="chapter_index__titling"> <div class="chapter_index__titling">
<div class="icon"> <div class="icon">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/icon-feather-menu.svg' ?>" alt=""> <img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/icon-feather-menu.svg' ?>" alt="">
</div> </div>
<h2 class="chapter_index__title"> <?php echo __("Dans ce conseil", "homegrade-theme__texte-fonctionnel") ?> </h2> <h2 class="chapter_index__title"> <?php echo __("Dans ce parcours", "homegrade-theme__texte-fonctionnel") ?> </h2>
</div> </div>
<ul class="chapter_index__list"> <ul class="chapter_index__list">
<div class="chapter_index__position-indicator"></div> <div class="chapter_index__position-indicator"></div>
<?php foreach ($chapterBlockIndex as $chapter) : ?> <?php foreach ($chapters->posts as $chapter) : ?>
<li class="chapter_index__link"><a href="<?php echo $chapter['anchor'] ?>"><?php echo $chapter['title'] ?></a></li> <?php
$shortTitle = get_field('short_title', $chapter->ID);
?>
<li class="chapter_index__link"><a href="#<?php echo $chapter->post_name ?>"><?php echo $chapter->post_title ?></a></li>
<?php endforeach; ?> <?php endforeach; ?>
</ul> </ul>
<?php endif; ?> <?php endif; ?>
</div>
<?php foreach ($otherSteps->posts as $otherStep) : ?>
<a class="parcours-other-steps-suggestion" href="<?php echo get_the_permalink($otherStep->ID) ?>">
<?php
$stepIcon = get_field('step_icon', $otherStep->ID);
?>
<?php if ($stepIcon) : ?>
<img class="step-icon" src="<?php echo $stepIcon['url'] ?>" alt="">
<?php endif; ?>
<span><?php echo $otherStep->post_title ?></span>
</a>
<?php endforeach; ?>
</div>
</aside> </aside>
<?php the_content() ?>
<article class="container my-8 mx-auto entry-content single-editor-content">
<?php foreach ($chapters->posts as $chapter) : ?>
<?php if ($chapter->post_content) : ?>
<div id="<?php echo $chapter->post_name ?>" class="parcours-chapter-container">
<h2><?php echo $chapter->post_title ?></h2>
<img src="" alt="">
<?php echo $chapter->post_content ?>
<a href="<?php echo get_post_permalink($chapter->ID) ?>">Voir la single <?php echo $chapter->post_title ?></a>
</div>
<?php endif; ?>
<?php endforeach; ?>
</article> </article>
</div>
<?php endwhile; ?> <?php endwhile; ?>
<?php endif; ?> <?php endif; ?>
<?php
get_footer();

11
single-parcours.php
View File

@ -1,9 +1,16 @@
<?php get_header(); ?>
<div class="homegrade-page-container homegrade-page--parcours">
<?php <?php
$isParentPage = get_queried_object()->post_parent === 0; $isParentPage = get_queried_object()->post_parent === 0;
if ($isParentPage) { if ($isParentPage) {
get_template_part('single-parcours-parent'); get_template_part('single-parcours-parent');
} else { } else {
get_template_part('single-parcours-child'); get_template_part('single-parcours-child');
} }
?>
</div>
<?php get_footer();

49
template-parcours-renovateur.php
View File

@ -1,10 +1,5 @@
<?php /* Template Name: Parcours rénovateur */ ?> <?php /* Template Name: Parcours rénovateur */
<?php get_header(); ?> get_header();
<?php
$currentThematique = get_the_terms(get_the_ID(), 'thematiques')[0];
$mainThematique = getMainThematique($currentThematique);
$thematiqueColorSlug = $mainThematique->slug;
$parcoursSteps = new WP_Query(array( $parcoursSteps = new WP_Query(array(
'post_type' => 'parcours', 'post_type' => 'parcours',
@ -17,7 +12,7 @@ $parcoursSteps = new WP_Query(array(
?> ?>
<div class="homegrade-page-container <?php echo $thematiqueColorSlug ? "homegrade-page-container--" . $thematiqueColorSlug : "" ?>"> <div class="homegrade-page-container homegrade-page-container--parcours-renovateur-index">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
@ -47,13 +42,23 @@ $parcoursSteps = new WP_Query(array(
</ol> </ol>
</nav> </nav>
<?php
$page_icon = get_field('page_icon', get_queried_object());
$pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
get_template_part("template-components/heading-box", null, array(
"pageIcon" => $pageIcon,
"title" => get_the_title(),
"description" => __("Toutes les étapes à connaître pour rénover votre logement.", "homegrade-theme__texte-fonctionnel"),
));
?>
<h1><?php echo get_the_title() ?></h1>
<p><?php echo __("Toutes les étapes pour rénover votre logement ", "homegrade-theme__texte-fonctionnel") ?></p>
<section class="parcours-steps-container"> <section class="parcours-steps-container">
<?php foreach ($parcoursSteps->posts as $parcoursStep) : ?> <?php foreach ($parcoursSteps->posts as $parcoursStep) : ?>
<div class="step-container card"> <div class="parcours-steps-container__step card">
<?php <?php
$childrenStepPosts = get_posts(array( $childrenStepPosts = get_posts(array(
'post_type' => 'parcours', 'post_type' => 'parcours',
@ -62,17 +67,25 @@ $parcoursSteps = new WP_Query(array(
'order' => 'menu_order', 'order' => 'menu_order',
'post_parent' => $parcoursStep->ID, 'post_parent' => $parcoursStep->ID,
)); ));
$stepIcon = get_field('step_icon', $parcoursStep->ID);
?> ?>
<h2><a href="<?php echo get_post_permalink($parcoursStep->ID) ?>"><?php echo $parcoursStep->post_title ?></a> <img class="step-icon" src="<?php echo $stepIcon['url'] ?>" alt="">
</h2> <h2><?php echo $parcoursStep->post_title ?></h2>
<p><?php echo $parcoursStep->post_excerpt ?> </p>
<?php foreach ($childrenStepPosts as $childPost) : ?> <?php foreach ($childrenStepPosts as $childPost) : ?>
<p>
<a href="<?php echo get_post_permalink($childPost->ID) ?>">
<?php echo $childPost->post_title ?>
</a>
</p>
<?php endforeach; ?> <?php endforeach; ?>
<a class="cta cta--en-savoir-plus " href="<?php echo get_permalink($parcoursStep->ID) ?>">
<?php echo __("En savoir plus ", "homegrade-theme__texte-fonctionnel") ?>
<div class="cta_arrow_button">
<img src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg' alt=''>
</div>
</a>
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>