REFACTORING comoponent for better handling both in articles and revues
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Nonimart
parent
c0d422cfa1
commit
314834485f
|
|
@ -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
6
resources/css/components/content-meta.css
Normal 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
49
resources/css/components/post-header.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -12,46 +12,65 @@ 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="thumbnail-wrapper">
|
<div class="post-header__inner post-header__inner--<?php echo $hasThumbnail ? 'has-thumbnail' : 'no-thumbnail'; ?> ">
|
||||||
<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
|
|
||||||
</div>
|
<?php if ($hasThumbnail) : ?>
|
||||||
|
<div class="thumbnail-wrapper">
|
||||||
|
<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="content-meta">
|
<div class="content-meta">
|
||||||
<span class="content-meta__type content-meta__type--revue">Revue</span>
|
<?php if ($post_type === 'revues') : ?>
|
||||||
</div>
|
<span class="content-meta__type content-meta__type--revue">Revue</span>
|
||||||
<h1> <?php echo $revueTitle; ?></h1>
|
<?php elseif ($post_type === 'articles') : ?>
|
||||||
<div class="revue-meta">
|
<span class="content-meta__type content-meta__type--article">Article</span>
|
||||||
<p class="revue-issue">
|
<?php endif; ?>
|
||||||
<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 class="socials-buttons">
|
</div>
|
||||||
<button class="socials-buttons__button socials-buttons__button--quote">
|
<h1> <?php echo $revueTitle; ?></h1>
|
||||||
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-citer-article.svg" alt="">
|
|
||||||
Citer
|
<div class="post-details">
|
||||||
</button>
|
<?php if ($post_type === 'revues') : ?>
|
||||||
<button class="socials-buttons__button socials-buttons__button--like">
|
<div class="revue-meta">
|
||||||
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-soutenir.svg" alt="">
|
<div class="revue-date-info">
|
||||||
J'aime
|
<p class="post-details__label">Parution</p>
|
||||||
</button>
|
<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>
|
||||||
<button class="socials-buttons__button socials-buttons__button--share">
|
</div>
|
||||||
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-partager-social.svg" alt="">
|
</div>
|
||||||
Partager
|
<?php elseif ($post_type === 'articles') : ?>
|
||||||
</button>
|
<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">
|
||||||
|
<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="">
|
||||||
|
Citer
|
||||||
|
</button>
|
||||||
|
<button class="socials-buttons__button socials-buttons__button--like">
|
||||||
|
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-soutenir.svg" alt="">
|
||||||
|
J'aime
|
||||||
|
</button>
|
||||||
|
<button class="socials-buttons__button socials-buttons__button--share">
|
||||||
|
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-partager-social.svg" alt="">
|
||||||
|
Partager
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user