Compare commits
No commits in common. "0e733e5988f91e2f6d55747a96520ab15382ce51" and "0b8599b6186374e06d6676b4820aad5ac4320fb8" have entirely different histories.
0e733e5988
...
0b8599b618
|
|
@ -31,7 +31,6 @@
|
|||
@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';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#article-toolbar {
|
||||
@apply col-span-2 container mx-auto;
|
||||
@apply col-span-2;
|
||||
|
||||
.tablist {
|
||||
@apply flex gap-12 border-b border-primary;
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.post-card--article {
|
||||
.post-card__title {
|
||||
@apply text-2xl;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,14 +4,9 @@
|
|||
@apply mb-4;
|
||||
}
|
||||
a {
|
||||
@apply text-lg text-carhop-gray opacity-80;
|
||||
@apply text-xl text-carhop-gray opacity-80;
|
||||
}
|
||||
a[active='true'] {
|
||||
@apply text-carhop-green-700 font-bold;
|
||||
}
|
||||
|
||||
li,
|
||||
a {
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,42 +3,6 @@
|
|||
.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 {
|
||||
|
|
@ -113,8 +77,4 @@
|
|||
#cite-reference {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.content-tab__title {
|
||||
@apply text-4xl uppercase font-thin mb-12;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,27 +7,15 @@ function observeTabsButtons(): void {
|
|||
|
||||
toolbarButtons.forEach((toolbarButton) => {
|
||||
toolbarButton.addEventListener('click', () => {
|
||||
const currentTabValue = toolbarButton.getAttribute('data-tab') as string;
|
||||
toggleActiveTab(toolbarButton as HTMLElement);
|
||||
handleActiveTabContent(currentTabValue as string);
|
||||
resetToolbarButtons();
|
||||
toolbarButton.setAttribute('aria-selected', 'true');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function toggleActiveTab(toolbarButton: HTMLElement): void {
|
||||
resetActiveToolbarButtons();
|
||||
toolbarButton.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
|
||||
function resetActiveToolbarButtons(): void {
|
||||
function resetToolbarButtons(): 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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
<?php
|
||||
get_header();
|
||||
$revueID = get_field('related_revue', get_the_ID());
|
||||
|
||||
|
||||
?>
|
||||
<?php get_header(); ?>
|
||||
<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'); ?>
|
||||
|
||||
<?php get_template_part('template-parts/articles/article-toolbar'); ?>
|
||||
<div class="content-wrapper" data-active-tab="article">
|
||||
<div class="content-wrapper">
|
||||
|
||||
<?php get_template_part('template-parts/articles/article-toolbar'); ?>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="search-field">
|
||||
<input type="text" placeholder="Rechercher">
|
||||
|
|
@ -20,19 +17,9 @@ $revueID = get_field('related_revue', get_the_ID());
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -68,10 +68,21 @@ $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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
<?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>
|
||||
|
|
@ -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" data-tab="article">
|
||||
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
|
||||
<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" data-tab="authors">
|
||||
<button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
|
||||
<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" data-tab="references">
|
||||
<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1">
|
||||
<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" data-tab="table-of-contents">
|
||||
<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
|
||||
<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" data-tab="informations">
|
||||
<button id="tab-5" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-5" tabindex="-1">
|
||||
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-note-biographique.svg" alt="">
|
||||
Informations
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<?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>
|
||||
Loading…
Reference in New Issue
Block a user