Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

REFACTORING comoponent for better handling both in articles and revues
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Nonimart 2025-06-18 14:46:29 +02:00
parent c0d422cfa1
commit 314834485f
5 changed files with 110 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/css/app.css
View File

@ -24,6 +24,8 @@
@import './components/author-card.css'; @import './components/author-card.css';
@import './components/revue-authors-list.css'; @import './components/revue-authors-list.css';
@import './components/article-content.css'; @import './components/article-content.css';
@import './components/content-meta.css';
@import './components/post-header.css';
/* ########### PAGES ############ */ /* ########### PAGES ############ */
@import './pages/singles.css'; @import './pages/singles.css';

6
resources/css/components/content-meta.css Normal file
View File

@ -0,0 +1,6 @@
.content-meta {
@apply flex !items-center justify-between gap-2;
&__revue-issue {
@apply bg-carhop-green-700 text-white !px-3 !py-2 font-normal h-fit;
}
}

49
resources/css/components/post-header.css Normal file
View File

@ -0,0 +1,49 @@
.post-header {
@apply bg-purple-50 text-primary py-32;
h1 {
@apply uppercase font-medium text-7xl;
line-height: 1.2;
}
&__inner {
@apply container mx-auto grid gap-24;
&--has-thumbnail {
grid-template-columns: 1fr 4fr;
}
&--no-thumbnail {
grid-template-columns: 1fr;
}
}
.thumbnail-wrapper {
@apply bg-red-200;
img {
/* max-height: 200px; */
@apply object-contain;
}
}
.post-details {
@apply flex justify-between gap-28 mt-12;
grid-template-columns: 1fr 1fr;
&__label {
@apply uppercase font-bold text-lg;
letter-spacing: 0.2em;
}
}
.socials-buttons {
@apply flex gap-4;
&__button {
@apply bg-white text-carhop-green-700 px-4 py-2 font-normal w-32 rounded-full border-primary w-fit border-2 flex items-center gap-2;
img {
@apply w-8 h-8 filter-primary;
}
}
}
}
.article-meta__related-revue a {
@apply hover:underline underline-offset-8;
}

47
resources/css/pages/singles.css
View File

@ -1,52 +1,5 @@
.page--single-revue, .page--single-revue,
.page--single-articles { .page--single-articles {
.revue-header {
@apply bg-purple-50 text-primary py-32;
h1 {
@apply uppercase font-medium text-7xl;
line-height: 1.2;
}
&__inner {
@apply container mx-auto grid gap-24;
grid-template-columns: 1fr 4fr;
}
.thumbnail-wrapper {
@apply bg-red-200;
img {
/* max-height: 200px; */
@apply object-contain;
}
}
.revue-meta {
@apply flex gap-28 mt-12;
&__label {
@apply uppercase font-bold text-lg;
letter-spacing: 0.2em;
}
}
.revue-issue {
@apply flex items-center gap-2;
.revue-issue-number {
@apply bg-white text-carhop-green-700 px-4 py-2 font-normal h-fit;
}
}
.socials-buttons {
@apply flex gap-4;
&__button {
@apply bg-white text-carhop-green-700 px-4 py-2 font-normal w-32 rounded-full border-primary w-fit border-2 flex items-center gap-2;
img {
@apply w-8 h-8 filter-primary;
}
}
}
}
.content-wrapper { .content-wrapper {
@apply container mx-auto grid grid-cols-12 gap-12 py-12; @apply container mx-auto grid grid-cols-12 gap-12 py-12;
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 4fr;

53
template-parts/revues/revue-header.php
View File

@ -12,33 +12,51 @@ if (!$currentRevueID) return;
$revueTitle = get_the_title($currentRevueID); $revueTitle = get_the_title($currentRevueID);
$issueNumber = get_field('issue_number', $currentRevueID); $issueNumber = get_field('issue_number', $currentRevueID);
$post_type = get_post_type();
$hasThumbnail = has_post_thumbnail();
?> ?>
<section class="revue-header ">
<div class="revue-header__inner "> <section class="post-header post-header--<?php echo $post_type; ?> ">
<div class="post-header__inner post-header__inner--<?php echo $hasThumbnail ? 'has-thumbnail' : 'no-thumbnail'; ?> ">
<?php if ($hasThumbnail) : ?>
<div class="thumbnail-wrapper"> <div class="thumbnail-wrapper">
<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?> <?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
</div> </div>
<?php endif; ?>
<div class="content"> <div class="content">
<div class="content-meta"> <div class="content-meta">
<?php if ($post_type === 'revues') : ?>
<span class="content-meta__type content-meta__type--revue">Revue</span> <span class="content-meta__type content-meta__type--revue">Revue</span>
</div> <?php elseif ($post_type === 'articles') : ?>
<h1> <?php echo $revueTitle; ?></h1> <span class="content-meta__type content-meta__type--article">Article</span>
<div class="revue-meta"> <?php endif; ?>
<p class="revue-issue">
<span class="revue-issue-label revue-meta__label">Numéro</span> <p class="content-meta__revue-issue">
<span class="revue-issue-number revue-meta__label sr-only">Numéro</span>
<span class="revue-issue-number revue-meta__value"><?php echo $issueNumber; ?></span> <span class="revue-issue-number revue-meta__value"><?php echo $issueNumber; ?></span>
</p> </p>
<div class="revue-date-info">
<p class="revue-date-label revue-meta__label">Publication</p>
<time class="revue-publish-date revue-meta__value" datetime="<?php echo get_the_date('Y-m-d', $currentRevueID); ?>"><?php echo get_the_date('d F Y', $currentRevueID); ?></time>
</div>
<div class="revue-date-info">
<p class="revue-date-label revue-meta__label">Mis à jour</p>
<time class="revue-update-date revue-meta__value" datetime="<?php echo get_the_modified_date('Y-m-d', $currentRevueID); ?>"><?php echo get_the_modified_date('d F Y', $currentRevueID); ?></time>
</div>
</div>
</div>
<h1> <?php echo $revueTitle; ?></h1>
<div class="post-details">
<?php if ($post_type === 'revues') : ?>
<div class="revue-meta">
<div class="revue-date-info">
<p class="post-details__label">Parution</p>
<time class="post-details__value" datetime="<?php echo get_the_date('Y-m-d', $currentRevueID); ?>"><?php echo get_the_date('d F Y', $currentRevueID); ?></time>
</div>
</div>
<?php elseif ($post_type === 'articles') : ?>
<div class="article-meta">
<div class="article-meta__related-revue">
<p class="post-details__label">Revue</p>
<a href="<?php echo get_the_permalink($currentRevueID); ?>" class="article-meta__value"><?php echo $revueTitle; ?></a>
</div>
</div>
<?php endif; ?>
<div class="socials-buttons"> <div class="socials-buttons">
<button class="socials-buttons__button socials-buttons__button--quote"> <button class="socials-buttons__button socials-buttons__button--quote">
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-citer-article.svg" alt=""> <img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-citer-article.svg" alt="">
@ -54,6 +72,7 @@ $issueNumber = get_field('issue_number', $currentRevueID);
</button> </button>
</div> </div>
</div> </div>
</div>
</div> </div>
</section> </section>