updating post infos capsule with taxonomy colors and globalized styles

This commit is contained in:
Antoine M 2023-10-27 16:05:36 +02:00
parent 82b31474f7
commit 43e0f81e37
4 changed files with 88 additions and 23 deletions

View File

@ -25,7 +25,6 @@
@import './components/brochures-grid.css';
@import './components/card-grid-container.css';
@import './components/filters-toolbar.css';
@import './components/post-infos-capsule.css';
@import '../../template-components/cards/card-news.css';
@import '../../template-components/cards/card-frequent_question.css';
@ -34,6 +33,7 @@
@import '../../template-components/posts-components/chapter-header.css';
@import '../../template-components/heading-box.css';
@import '../../template-components/news-heading-box.css';
@import '../../template-components/post-infos-capsule.css';
/* ########### LAYOUT ############ */
@import './layout/header.css';

View File

@ -60,7 +60,9 @@ body.akoestiek,
@apply text-acoustique-coproprietes;
}
}
time {
.post-infos-capsule__share,
.post-infos-capsule__publication-date,
.post-infos-capsule__modification-date {
@apply text-acoustique-coproprietes;
}
}
@ -165,7 +167,9 @@ body.energie,
@apply text-energies-urbanisme;
}
}
time {
.post-infos-capsule__share,
.post-infos-capsule__publication-date,
.post-infos-capsule__modification-date {
@apply text-energies-urbanisme;
}
}
@ -272,7 +276,9 @@ body.isolation,
@apply text-isolation-quotidien;
}
}
time {
.post-infos-capsule__share,
.post-infos-capsule__publication-date,
.post-infos-capsule__modification-date {
@apply text-isolation-quotidien;
}
}
@ -370,7 +376,9 @@ body.erfgoed,
@apply text-patrimoine-renovation;
}
}
time {
.post-infos-capsule__share,
.post-infos-capsule__publication-date,
.post-infos-capsule__modification-date {
@apply text-patrimoine-renovation;
}
}
@ -468,7 +476,9 @@ body.circulaire-renovatie,
@apply text-location-renovation-circulaire;
}
}
time {
.post-infos-capsule__share,
.post-infos-capsule__publication-date,
.post-infos-capsule__modification-date {
@apply text-location-renovation-circulaire;
}
}

View File

@ -0,0 +1,51 @@
.post-infos-capsule {
@apply flex flex-wrap justify-start gap-x-8 gap-y-5;
&__share,
&__publication-date,
&__modification-date {
@apply bg-white text-primary
rounded-full
px-4
sm:px-6
py-2
w-fit
h-auto
flex justify-center
items-center
font-medium;
}
&__share {
@apply gap-1 md:gap-2;
.share-button {
@apply bg-primary w-8 h-8 rounded-full p-4 relative;
transition: transform 0.3s ease-in-out;
&:before {
@apply absolute w-3 h-3 bg-contain bg-center bg-no-repeat;
width: 25px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: '';
}
&:hover {
transform: scale(1.05);
filter: brightness(1.4);
}
}
.share-button--facebook {
&:before {
background-image: url('../resources/img/graphic-assets/icone-social-facebook.svg');
}
}
.share-button--twitter-x {
&:before {
background-image: url('../resources/img/graphic-assets/icone-social-twitter-x.svg');
}
}
.share-button--linkedin {
&:before {
background-image: url('../resources/img/graphic-assets/icone-social-linkedin.svg');
}
}
}
}

View File

@ -3,21 +3,21 @@ $postID = $args['postID'];
$published = $args['published'] ?? null;
$modified = $args['modified'] ?? null;
if (!function_exists('build_share_urls')) {
function build_share_urls($postID)
{
$postUrl = get_permalink($postID);
$postTitle = get_the_title($postID);
$facebookUrl = 'https://www.facebook.com/sharer.php?u=' . $postUrl;
$twitterUrl = 'https://www.facebook.com/sharer.php?u=' . $postUrl;
$linkedInUrl = 'https://www.linkedin.com/feed/?shareActive=true&text=' . $postTitle . ' ' . $postUrl;
function build_share_urls($postID)
{
$postUrl = get_permalink($postID);
$postTitle = get_the_title($postID);
$facebookUrl = 'https://www.facebook.com/sharer.php?u=' . $postUrl;
$twitterUrl = 'https://www.facebook.com/sharer.php?u=' . $postUrl;
$linkedInUrl = 'https://www.linkedin.com/feed/?shareActive=true&text=' . $postTitle . ' ' . $postUrl;
return array(
'facebook' => $facebookUrl,
'twitter-x' => $twitterUrl,
'linkedin' => $linkedInUrl
);
return array(
'facebook' => $facebookUrl,
'twitter-x' => $twitterUrl,
'linkedin' => $linkedInUrl
);
}
}
$shareUrls = build_share_urls($postID);
@ -27,7 +27,9 @@ $shareUrls = build_share_urls($postID);
<div class="post-infos-capsule">
<div class="post-infos-capsule__share">
Partager sur
<?php
__('Partager sur', 'homegrade-theme__texte-fonctionnel')
?>
<?php foreach ($shareUrls as $key => $shareUrl) : ?>
<a class="share-button share-button--<?php echo $key ?>" href='<?php echo $shareUrl ?>' target="_blank" title="<?php echo __("Partager ce contenu sur", "homegrade-theme__texte-fonctionnel") . $key ?>">
<?php if ($key) : ?>
@ -38,11 +40,13 @@ $shareUrls = build_share_urls($postID);
</div>
<?php if ($published) : ?>
<div class="post-infos-capsule__publication-date">
<time><?php echo __("Publié le ", "homegrade-theme__texte-fonctionnel") . $published ?></time>
</div>
<?php endif; ?>
<?php if ($modified) : ?>
<time class="post-infos-capsule__publication-date"><?php echo __("Publié le ", "homegrade-theme__texte-fonctionnel") . $modified ?></time>
<div class="post-infos-capsule__modification-date">
<time><?php echo __("Mis à jour le ", "homegrade-theme__texte-fonctionnel") . $modified ?></time>
</div>
<?php endif; ?>
</div>