From 314834485f33c9076a2ab64ff017c950011224e0 Mon Sep 17 00:00:00 2001
From: Nonimart <martinon.toinou@protonmail.com>
Date: Wed, 18 Jun 2025 14:46:29 +0200
Subject: [PATCH] REFACTORING comoponent for better handling both in articles
 and revues

---
 resources/css/app.css                     |  2 +
 resources/css/components/content-meta.css |  6 ++
 resources/css/components/post-header.css  | 49 +++++++++++++
 resources/css/pages/singles.css           | 47 ------------
 template-parts/revues/revue-header.php    | 87 ++++++++++++++---------
 5 files changed, 110 insertions(+), 81 deletions(-)
 create mode 100644 resources/css/components/content-meta.css
 create mode 100644 resources/css/components/post-header.css

diff --git a/resources/css/app.css b/resources/css/app.css
index cec0d83..6412cbf 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -24,6 +24,8 @@
 @import './components/author-card.css';
 @import './components/revue-authors-list.css';
 @import './components/article-content.css';
+@import './components/content-meta.css';
+@import './components/post-header.css';
 
 /* ########### PAGES ############ */
 @import './pages/singles.css';
diff --git a/resources/css/components/content-meta.css b/resources/css/components/content-meta.css
new file mode 100644
index 0000000..9aad24c
--- /dev/null
+++ b/resources/css/components/content-meta.css
@@ -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;
+  }
+}
diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css
new file mode 100644
index 0000000..23bfda5
--- /dev/null
+++ b/resources/css/components/post-header.css
@@ -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;
+}
diff --git a/resources/css/pages/singles.css b/resources/css/pages/singles.css
index 18f74a1..ad1b8e1 100644
--- a/resources/css/pages/singles.css
+++ b/resources/css/pages/singles.css
@@ -1,52 +1,5 @@
 .page--single-revue,
 .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 {
     @apply container mx-auto grid grid-cols-12 gap-12 py-12;
     grid-template-columns: 1fr 4fr;
diff --git a/template-parts/revues/revue-header.php b/template-parts/revues/revue-header.php
index ea616aa..a55a5dd 100644
--- a/template-parts/revues/revue-header.php
+++ b/template-parts/revues/revue-header.php
@@ -12,46 +12,65 @@ if (!$currentRevueID) return;
 $revueTitle = get_the_title($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 ">
-		<div class="thumbnail-wrapper">
-			<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
-		</div>
+
+<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">
+				<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
+			</div>
+		<?php endif; ?>
+
 		<div class="content">
 			<div class="content-meta">
-				<span class="content-meta__type content-meta__type--revue">Revue</span>
-			</div>
-			<h1> <?php echo $revueTitle; ?></h1>
-			<div class="revue-meta">
-				<p class="revue-issue">
-					<span class="revue-issue-label revue-meta__label">Numéro</span>
+				<?php if ($post_type === 'revues') : ?>
+					<span class="content-meta__type content-meta__type--revue">Revue</span>
+				<?php elseif ($post_type === 'articles') : ?>
+					<span class="content-meta__type content-meta__type--article">Article</span>
+				<?php endif; ?>
+
+				<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>
 				</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">
-				<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>
+			<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">
+					<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>