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

introducing previpus/next question component

Browse Source
This commit is contained in:
Antoine M 2023-12-21 10:00:44 +01:00
parent d4d101c672
commit df4d309cb2
2 changed files with 98 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
resources/css/pages/single-questions.css
View File

@ -1,3 +1,58 @@
.previous-next-questions {
@apply grid grid-cols-2 gap-8 mx-auto max-w-screen-xl px-6 xl:px-24 my-16;
&__previous,
&__next {
@apply flex gap-4 bg-white rounded-lg shadowed py-4 px-6;
transition: all 0.2s ease-out;
&:hover {
@apply -translate-y-1;
}
.thematique_icon {
@apply object-contain
w-20
h-20;
}
.question_type,
.question_title {
@apply font-bold;
}
.question_type {
@apply mb-1;
}
.question_title {
line-height: 1.4;
}
}
&__previous {
@apply text-right justify-end;
&:before {
@apply inline-block h-7 w-7 border-2 border-neutral-900 rounded-full shrink-0;
content: '';
margin-top: auto;
margin-bottom: auto;
background-image: url('../resources/img/graphic-assets/chevron_left.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 50% 50%;
}
}
&__next {
&:after {
@apply inline-block h-7 w-7 border-2 border-neutral-900 rounded-full shrink-0;
content: '';
margin-top: auto;
margin-bottom: auto;
background-image: url('../resources/img/graphic-assets/chevron_right.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 50% 50%;
}
}
&__link-content {
@apply h-fit pt-1;
}
}
.suggested-publications { .suggested-publications {
.section_titling__title { .section_titling__title {
@apply text-secondary; @apply text-secondary;

45
single-questions.php
View File

@ -10,6 +10,7 @@ get_header();
$currentThematique = get_the_terms(get_the_ID(), 'thematiques')[0]; $currentThematique = get_the_terms(get_the_ID(), 'thematiques')[0];
$mainThematique = getMainThematique($currentThematique); $mainThematique = getMainThematique($currentThematique);
$thematiqueColorSlug = $mainThematique->slug; $thematiqueColorSlug = $mainThematique->slug;
$thematique_icon = get_field('taxonomy_pictures', 'thematiques' . '_' . $mainThematique->term_id)['icon'];
$args = array( $args = array(
'post_type' => 'conseils', 'post_type' => 'conseils',
@ -31,12 +32,52 @@ get_header();
'postID' => get_the_ID(), 'postID' => get_the_ID(),
)); ?> )); ?>
<!-- ARTICLE -->
<article class="container my-8 mx-auto entry-content single-editor-content <?php echo $thematiqueColorSlug ? "entry-content--" . $thematiqueColorSlug : "" ?>"> <article class="container my-8 mx-auto entry-content single-editor-content <?php echo $thematiqueColorSlug ? "entry-content--" . $thematiqueColorSlug : "" ?>">
<?php the_content() ?> <?php the_content() ?>
</article> </article>
<!-- PREVIOUS / NEXT ARTICLES -->
<div class="previous-next-questions">
<?php
$args = array(
'post_type' => 'questions',
'posts_per_page' => 2,
'post_status' => 'publish',
'orderby' => 'rand',
'post__not_in' => array(get_the_ID()),
'tax_query' => array(
array(
'taxonomy' => 'thematiques',
'field' => 'term_id',
'terms' => $mainThematique->term_id,
)
)
);
$otherQuestions = new WP_Query($args);
$previousPost = $otherQuestions->posts[0];
$nextPost = $otherQuestions->posts[1];
?>
<a class="previous-next-questions__previous" href="<?php echo get_the_permalink($previousPost->ID) ?>">
<div class="previous-next-questions__link-content">
<p class="question_type"><?php echo __("Question précédente ", "homegrade-theme__texte-fonctionnel") ?></p>
<p class="question_title"><?php echo $previousPost->post_title ?></p>
</div>
<img class="thematique_icon" src="<?php echo $thematique_icon['url'] ?>" alt="">
</a>
<a class="previous-next-questions__next" href="<?php echo get_the_permalink($previousPost->ID) ?>">
<img class="thematique_icon" src="<?php echo $thematique_icon['url'] ?>" alt="">
<div class="previous-next-questions__link-content">
<p class="question_type"><?php echo __(" Question suivante ", "homegrade-theme__texte-fonctionnel") ?></p>
<p class="question_title"><?php echo $nextPost->post_title ?></p>
</div>
</a>
</div>
<!-- RELATED CONSEILS -->
<?php get_template_part('template-components/post-conseils/chapter-header', null, array( <?php get_template_part('template-components/post-conseils/chapter-header', null, array(
'postID' => get_the_ID(), 'postID' => get_the_ID(),
'subtitle' => $mainThematique->name, 'subtitle' => $mainThematique->name,