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:b0c67d96f80bcbb5f945de75cc6486a89f1c5887
Branches Tags
Antoine:main

No commits in common. "0b8599b6186374e06d6676b4820aad5ac4320fb8" and "b0c67d96f80bcbb5f945de75cc6486a89f1c5887" have entirely different histories.
0b8599b618 ... b0c67d96f8

15 changed files with 59 additions and 159 deletions
Show Stats Expand all files Collapse all files

1
resources/css/app.css
View File

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

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

@ -1,23 +0,0 @@
#article-toolbar {
@apply col-span-2;
.tablist {
@apply flex gap-12 border-b border-primary;
button {
@apply text-xl mt-8 nunito pb-4 flex items-center gap-4;
.icon {
@apply w-8 h-8 block;
}
&[aria-selected='true'] {
@apply text-primary border-b-4 border-primary;
.icon {
@apply filter-primary;
}
}
&[aria-selected='false'] {
@apply text-black opacity-40;
}
}
}
}

10
resources/css/components/footnotes-index.css
View File

@ -11,15 +11,9 @@
} }
} }
a { a {
@apply text-carhop-gray opacity-80 text-lg; @apply text-carhop-gray opacity-80;
&[active='true'] { &[active='true'] {
@apply text-carhop-green-700 font-semibold opacity-100; @apply text-primary font-bold;
} }
} }
li,
a {
line-height: 1.3 !important;
}
} }

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

@ -5,6 +5,24 @@
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
} }
.top-toolbar {
@apply col-span-2;
.tablist {
@apply flex gap-12 border-b border-primary;
button {
@apply text-xl mt-8 nunito pb-4;
&[aria-selected='true'] {
@apply text-primary border-b-4 border-primary;
}
&[aria-selected='false'] {
@apply text-carhop-gray opacity-80;
}
}
}
}
.sidebar { .sidebar {
@apply sticky top-0 left-0 h-fit; @apply sticky top-0 left-0 h-fit;
.search-field { .search-field {

13
resources/img/icons/carhop-document.svg
View File

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="document" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.1 42.76">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</defs>
<polygon class="cls-1" points="1 1 27.02 1 34.1 8.08 34.1 41.76 1 41.76 1 1"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 342 B

14
resources/img/icons/carhop-lien.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="imprimer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.12 20.12">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</defs>
<path class="cls-1" d="M9.01,3.56l1-1c2.08-2.08,5.46-2.08,7.55,0h0c2.08,2.08,2.08,5.46,0,7.55l-4.65,4.65-3.07-3.07"/>
<path class="cls-1" d="M11.11,16.56l-1,1c-2.08,2.08-5.46,2.08-7.55,0h0c-2.08-2.08-2.08-5.46,0-7.55l4.65-4.65,3.18,3.18"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 506 B

14
resources/img/icons/carhop-note-biographique.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="note-biographique" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.99 42.47">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</defs>
<polygon class="cls-1" points="5.63 36.84 13.89 36.84 31.99 18.74 31.99 2.41 5.63 28.78 5.63 36.84"/>
<line class="cls-1" x1=".71" y1="41.76" x2="12.86" y2="29.61"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 441 B

16
resources/img/icons/carhop-plan.svg
View File

@ -1,16 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="plan" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.12 36.42">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</defs>
<line class="cls-1" x1="34.12" y1="12.47" x2="0" y2="12.47"/>
<line class="cls-1" x1="34.12" y1="35.42" x2="0" y2="35.42"/>
<line class="cls-1" x1="24.62" y1="1" x2="0" y2="1"/>
<line class="cls-1" x1="24.62" y1="23.95" x2="0" y2="23.95"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 506 B

15
resources/img/icons/carhop-plume.svg
View File

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="plume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.06 38.66">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</defs>
<polyline class="cls-1" points="38.5 7.56 34.74 10.11 34.74 23.78 11.2 36.83 14.06 11.32 26.43 4.79 26.63 .04"/>
<line class="cls-1" x1="11.2" y1="36.83" x2="20.95" y2="22.23"/>
<line class="cls-1" y1="37.66" x2="11.2" y2="37.66"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 497 B

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

@ -1,21 +0,0 @@
export function handleArticleToolbar() {
observeTabsButtons();
}
function observeTabsButtons(): void {
const toolbarButtons = document.querySelectorAll('#article-toolbar button');
toolbarButtons.forEach((toolbarButton) => {
toolbarButton.addEventListener('click', () => {
resetToolbarButtons();
toolbarButton.setAttribute('aria-selected', 'true');
});
});
}
function resetToolbarButtons(): void {
const toolbarButtons = document.querySelectorAll('#article-toolbar button');
toolbarButtons.forEach((toolbarButton) => {
toolbarButton.setAttribute('aria-selected', 'false');
});
}

20
resources/js/singles/index-panel.ts
View File

@ -51,6 +51,7 @@ export function toggleActiveTabPanel(dataIndex: string): void {
// ******************************************************** // ********************************************************
function observeSommaireLinks(): void { function observeSommaireLinks(): void {
console.log('observeSommaireLinks');
const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a'); const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
for (const title of sommaireTitles) { for (const title of sommaireTitles) {
title.addEventListener('click', (e) => { title.addEventListener('click', (e) => {
@ -74,6 +75,8 @@ function toggleActiveChapterLinkInIndexPanel(targetId: string): void {
const indexPanel = document.querySelector('.index-panel') as HTMLElement; const indexPanel = document.querySelector('.index-panel') as HTMLElement;
const currentLink = indexPanel.querySelector(`a[href="#${targetId}"]`) as HTMLElement; const currentLink = indexPanel.querySelector(`a[href="#${targetId}"]`) as HTMLElement;
console.log(currentLink);
if (!currentLink) return; if (!currentLink) return;
for (const link of sommaireLinks) { for (const link of sommaireLinks) {
@ -83,6 +86,23 @@ function toggleActiveChapterLinkInIndexPanel(targetId: string): void {
currentLink?.setAttribute('active', 'true'); currentLink?.setAttribute('active', 'true');
} }
// export function handleSmoothScrollToTitle(): void {
// const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
// for (const title of sommaireTitles) {
// title.addEventListener('click', (e) => {
// e.preventDefault();
// const target = title.getAttribute('href');
// if (!target) return;
// const targetElement = document.querySelector(target);
// if (!targetElement) return;
// targetElement.scrollIntoView({ behavior: 'smooth' });
// });
// }
// }
// ******************************************************** // ********************************************************
// ************* FOOTNOTES ********************************* // ************* FOOTNOTES *********************************
// ******************************************************** // ********************************************************

2
resources/js/singles/singles.ts
View File

@ -2,7 +2,6 @@ import handleIndexPanel from './index-panel';
import handleFootnoteFormat from './footnote-format'; import handleFootnoteFormat from './footnote-format';
import handleCiteButton from './cite-button'; import handleCiteButton from './cite-button';
import { injectIdToNativeTitles } from './sommaire'; import { injectIdToNativeTitles } from './sommaire';
import { handleArticleToolbar } from './article-toolbar.ts';
export default function singles(): void { export default function singles(): void {
const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue'); const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
@ -14,5 +13,4 @@ export default function singles(): void {
handleIndexPanel(); handleIndexPanel();
handleFootnoteFormat(); handleFootnoteFormat();
handleCiteButton(); handleCiteButton();
handleArticleToolbar();
} }

0
resources/js/singles/top-nav-toolbar.ts Normal file
View File

22
single-articles.php
View File

@ -5,9 +5,25 @@
<?php get_template_part('template-parts/post-header'); ?> <?php get_template_part('template-parts/post-header'); ?>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="top-toolbar">
<?php get_template_part('template-parts/articles/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">
<span class="focus">Article</span>
</button>
<button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
<span class="focus">Auteur·e·s</span>
</button>
<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1">
<span class="focus">Références</span>
</button>
<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
<span class="focus">Table des matières </span>
</button>
<button id="tab-5" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-5" tabindex="-1">
<span class="focus">Informations</span>
</button>
</div>
</div>
<aside class="sidebar"> <aside class="sidebar">
<div class="search-field"> <div class="search-field">
<input type="text" placeholder="Rechercher"> <input type="text" placeholder="Rechercher">

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

@ -1,29 +0,0 @@
<?php
?>
<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">
<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">
<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">
<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">
<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">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-note-biographique.svg" alt="">
Informations
</button>
</div>
</div>