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

FEATURE FIX Handling a solutionfor the tablist on mobile
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Nonimart 2025-10-21 16:49:11 +02:00
parent eb34ccc5dc
commit 6e65e5a093
4 changed files with 42 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
resources/css/components/article-revues-toolbar.css
View File

@ -2,14 +2,23 @@
#article-toolbar {
@apply col-span-2 container mx-auto;
@media screen and (max-width: 1024px) {
@apply mb-16;
}
.tablist {
@apply flex items-center overflow-x-scroll lg:overflow-x-visible gap-4 md:gap-8 lg:gap-12 border-b border-primary;
@apply flex items-center overflow-y-visible gap-8 lg:gap-12 border-b border-primary;
position: relative;
@media screen and (max-width: 1024px) {
span {
@apply sr-only;
}
}
/* @media screen and (max-width: 1024px) {
border-bottom: none;
padding-bottom: 1em;
/* Ligne de 1px à 5px du bord du bas */
background: linear-gradient(
to right,
var(--wp--preset--color--primary, #136f63),
@ -36,7 +45,7 @@
&::-webkit-scrollbar-thumb:hover {
background: hsl(120 100% 10% / 1);
}
}
} */
button {
@apply text-base md:text-lg lg:text-lg mt-8 nunito pb-4 flex flex-col lg:flex-row items-center gap-2 lg:gap-4 text-left shrink-0;
@ -127,5 +136,25 @@
.toolbar-actions {
@apply flex items-center gap-3 ml-auto;
@media screen and (max-width: 1024px) {
@apply absolute left-0 translate-y-full;
bottom: -20px;
}
}
}
body:has(
.content-wrapper[data-active-tab='authors'],
.content-wrapper[data-active-tab='references'],
.content-wrapper[data-active-tab='table-of-contents'],
.content-wrapper[data-active-tab='informations']
) {
@media screen and (max-width: 1024px) {
#article-toolbar {
@apply mb-0;
}
.toolbar-actions {
@apply !hidden;
}
}
}

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

@ -3,7 +3,7 @@
.content-wrapper {
/* @apply bg-yellow-400; */
@apply container;
@apply mx-auto grid gap-12 py-12 items-start;
@apply mx-auto grid gap-12 lg:py-12 py-6 items-start;
grid-template-columns: 1fr 2fr;

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

@ -14,27 +14,27 @@ $pdf_url = isset($pdf_version) && !empty($pdf_version['url']) ? $pdf_version['ur
<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">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-document.svg" alt="">
Article
<span>Article</span>
</button>
<?php if ($hasAuthors) : ?>
<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
<span>Auteur·e·s</span>
</button>
<?php endif; ?>
<?php if ($hasReferences) : ?>
<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
<span>Références</span>
</button>
<?php endif; ?>
<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
<span>Table des matières</span>
</button>
<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
<span>Informations</span>
</button>
<div class="toolbar-actions">

8
template-parts/revues/revue-toolbar.php
View File

@ -10,22 +10,22 @@ $pdf_url = isset($pdf_version) && !empty($pdf_version['url']) ? $pdf_version['ur
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-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
<span>Table des matière</span>
</button>
<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
<span>Auteur·e·s</span>
</button>
<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1" data-tab="informations">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-note-biographique.svg" alt="">
Informations
<span>Informations</span>
</button>
<div class="toolbar-actions">
<?php if ($pdf_url) : ?>
<a href="<?php echo $pdf_url; ?>" target="_blank" class="cta cta--classic cta--has-icon cta--rounded cta--download-pdf ">
<img class="icon" src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-fleche-telecharger.svg" alt="">
PDF
<span>PDF</span>
</a>
<?php endif; ?>
</div>