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

Compare commits

base: Antoine:0b8599b6186374e06d6676b4820aad5ac4320fb8
Branches Tags
Antoine:main
...
compare: Antoine:0e733e5988f91e2f6d55747a96520ab15382ce51
Branches Tags
Antoine:main

11 Commits
0b8599b618 ... 0e733e5988

Author SHA1 Message Date
Nonimart
0e733e5988 FEATURE introducing component
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-06-24 16:23:40 +02:00
Nonimart
9043c35cc7 FEATURE Ajout du style pour le composant post-card--article 2025-06-24 16:23:20 +02:00
Nonimart
9a32e669e1 FEATURE Modification de la taille de police des liens dans sommaire-index.css 2025-06-24 16:23:14 +02:00
Nonimart
80f4ca9107 FEATURE Ajout de l'importation du fichier post-card--article.css dans app.css 2025-06-24 16:23:04 +02:00
Nonimart
982a74f2be FEATURE Ajout de la classe container et mx-auto au style de la barre d'outils d'article 2025-06-24 16:22:57 +02:00
Nonimart
ffcdcdb62e FEATURE introducing component 2025-06-24 16:22:46 +02:00
Nonimart
abb7ca4606 FEATURE Ajout de l'attribut data-tab aux boutons de l'outil d'article 2025-06-24 16:22:21 +02:00
Nonimart
83a3733a85 FEATURE Ajout de la gestion des onglets dans le wrapper de contenu 2025-06-24 16:22:12 +02:00
Nonimart
4ef786e01c REFACTOR Simplification de la gestion des onglets dans la barre d'outils 2025-06-24 16:22:01 +02:00
Nonimart
aa0e3a4281 FEATURE Introducing new tab template part components 2025-06-24 16:21:46 +02:00
Nonimart
bbe045980f FEATURE Introducing new tab template part compoonents 2025-06-24 16:21:24 +02:00
11 changed files with 142 additions and 29 deletions
Show Stats Expand all files Collapse all files

1
resources/css/app.css
View File

@ -31,6 +31,7 @@
@import './components/index-panel.css';
@import './components/footnotes-index.css';
@import './components/article-toolbar.css';
@import './components/post-card--article.css';
/* ########### PAGES ############ */
@import './pages/singles.css';

2
resources/css/components/article-toolbar.css
View File

@ -1,5 +1,5 @@
#article-toolbar {
@apply col-span-2;
@apply col-span-2 container mx-auto;
.tablist {
@apply flex gap-12 border-b border-primary;

5
resources/css/components/post-card--article.css
View File

@ -0,0 +1,5 @@
.post-card--article {
.post-card__title {
@apply text-2xl;
}
}

7
resources/css/components/sommaire-index.css
View File

@ -4,9 +4,14 @@
@apply mb-4;
}
a {
@apply text-xl text-carhop-gray opacity-80;
@apply text-lg text-carhop-gray opacity-80;
}
a[active='true'] {
@apply text-carhop-green-700 font-bold;
}
li,
a {
line-height: 1.3 !important;
}
}

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

@ -3,6 +3,42 @@
.content-wrapper {
@apply container mx-auto grid grid-cols-12 gap-12 py-12 items-start;
grid-template-columns: 1fr 2fr;
&[data-active-tab='article'] {
.sidebar .search-field,
.table-matieres {
@apply hidden;
}
}
&[data-active-tab='authors'] {
.article-informations,
.article-content,
.sidebar .index-panel,
.table-matieres {
@apply hidden;
}
}
&[data-active-tab='references'] {
.article-informations,
.article-content,
.sidebar .index-panel,
.table-matieres {
@apply hidden;
}
}
&[data-active-tab='table-of-contents'] {
.article-informations,
.article-content,
.sidebar .index-panel {
@apply hidden;
}
}
&[data-active-tab='informations'] {
.article-content,
.table-matieres,
.sidebar .index-panel {
@apply hidden;
}
}
}
.sidebar {
@ -77,4 +113,8 @@
#cite-reference {
@apply hidden;
}
.content-tab__title {
@apply text-4xl uppercase font-thin mb-12;
}
}

18
resources/js/singles/article-toolbar.ts
View File

@ -7,15 +7,27 @@ function observeTabsButtons(): void {
toolbarButtons.forEach((toolbarButton) => {
toolbarButton.addEventListener('click', () => {
resetToolbarButtons();
toolbarButton.setAttribute('aria-selected', 'true');
const currentTabValue = toolbarButton.getAttribute('data-tab') as string;
toggleActiveTab(toolbarButton as HTMLElement);
handleActiveTabContent(currentTabValue as string);
});
});
}
function resetToolbarButtons(): void {
function toggleActiveTab(toolbarButton: HTMLElement): void {
resetActiveToolbarButtons();
toolbarButton.setAttribute('aria-selected', 'true');
}
function resetActiveToolbarButtons(): void {
const toolbarButtons = document.querySelectorAll('#article-toolbar button');
toolbarButtons.forEach((toolbarButton) => {
toolbarButton.setAttribute('aria-selected', 'false');
});
}
function handleActiveTabContent(tab: string): void {
const contentWrapper = document.querySelector('.content-wrapper');
contentWrapper?.setAttribute('data-active-tab', tab);
console.log(tab);
}

23
single-articles.php
View File

@ -1,13 +1,16 @@
<?php get_header(); ?>
<?php
get_header();
$revueID = get_field('related_revue', get_the_ID());
?>
<div class="page--single-articles" data-revue-id="<?php echo get_the_ID(); ?>">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php get_template_part('template-parts/post-header'); ?>
<div class="content-wrapper">
<?php get_template_part('template-parts/articles/article-toolbar'); ?>
<?php get_template_part('template-parts/articles/article-toolbar'); ?>
<div class="content-wrapper" data-active-tab="article">
<aside class="sidebar">
<div class="search-field">
<input type="text" placeholder="Rechercher">
@ -17,9 +20,19 @@
</aside>
<div class="content-area">
<?php get_template_part('template-parts/articles/article-informations', null, array(
'revueID' => $revueID
)); ?>
<?php get_template_part('template-parts/revues/table-matiere-revue', null, array(
'revueID' => $revueID
)); ?>
<?php get_template_part('template-parts/articles/article-content', null, array(
'ID' => get_the_ID()
)); ?>
</div>
</div>

17
single-revues.php
View File

@ -68,21 +68,10 @@ $articles = get_field('articles', $current_issue->ID);
</div>
</details>
<?php get_template_part('template-parts/revues/table-matiere-revue', null, array(
'revueID' => get_the_ID()
)); ?>
<section class="table-matieres">
<h2 class="table-matieres__title">Table des matières</h2>
<ul class="post-grid__list article-grid__list">
<?php foreach ($issue_related_articles as $article) : ?>
<?php get_template_part('template-parts/articles/card-article', null, array(
'date' => $article->post_date,
'image' => get_the_post_thumbnail_url($article->ID),
'link' => get_the_permalink($article->ID),
'ID' => $article->ID
)); ?>
<?php endforeach; ?>
</ul>
</section>
</div>

28
template-parts/articles/article-informations.php Normal file
View File

@ -0,0 +1,28 @@
<?php
$revueID = $args['revueID'];
$issue_number = get_field('issue_number', $revueID);
$issue_parution_date = get_field('issue_parution_date', $revueID);
$issue_updated_date = get_field('issue_updated_date', $revueID);
?>
<div class="article-informations">
<h3 class="content-tab__title">Informations</h2>
<div class="issue-number">
<span class="issue-number__label">Numéro</span>
<span class="issue-number__value"><?php echo $issue_number; ?></span>
</div>
<div class="issue-parution-date">
<span class="issue-parution-date__label">Parution</span>
<time class="post-details__value" datetime="<?php echo get_the_date('Y-m-d', $revueID); ?>"><?php echo get_the_date('d F Y', $revueID); ?></time>
</div>
<div class="issue-updated-date">
<span class="issue-updated-date__label">Mise à jour</span>
<time class="post-details__value" datetime="<?php echo get_the_modified_date('Y-m-d', $revueID); ?>"><?php echo get_the_modified_date('d F Y', $revueID); ?></time>
</div>
</div>

10
template-parts/articles/article-toolbar.php
View File

@ -4,24 +4,24 @@
<div id="article-toolbar" class="article-toolbar">
<div role="tablist" aria-labelledby="tablist-1" class="tablist">
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1" data-tab="article">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-document.svg" alt="">
Article
</button>
<button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
<button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1" data-tab="authors">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-plume.svg" alt="">
Auteur·e·s
</button>
<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1">
<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1" data-tab="references">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-lien.svg" alt="">
Références
</button>
<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1" data-tab="table-of-contents">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-plan.svg" alt="">
Table des matières
</button>
<button id="tab-5" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-5" tabindex="-1">
<button id="tab-5" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-5" tabindex="-1" data-tab="informations">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-note-biographique.svg" alt="">
Informations
</button>

20
template-parts/revues/table-matiere-revue.php Normal file
View File

@ -0,0 +1,20 @@
<?php
$revueID = $args['revueID'];
$issue_related_articles = get_field('articles', $revueID);
?>
<section class="table-matieres">
<h3 class="content-tab__title">Table des matières</h3>
<ul class="post-grid__list article-grid__list">
<?php foreach ($issue_related_articles as $article) : ?>
<?php get_template_part('template-parts/articles/card-article', null, array(
'date' => $article->post_date,
'image' => get_the_post_thumbnail_url($article->ID),
'link' => get_the_permalink($article->ID),
'ID' => $article->ID
)); ?>
<?php endforeach; ?>
</ul>
</section>