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

FEATURE optimizing mobile index-panel on singles articles
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Nonimart 2025-09-04 17:43:54 +02:00
parent 3d0771f5fd
commit 0040c76b3f
5 changed files with 64 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
resources/css/components/index-panel.css
View File

@ -14,6 +14,13 @@
@apply w-7 h-7 block;
}
}
button#mobile-open-toggle {
@apply lg:hidden ml-auto !opacity-100;
.icon {
transition: transform 0.3s ease-in-out;
@apply h-10 w-10;
}
}
button[aria-selected='true'] {
@apply text-primary opacity-100;
.icon {
@ -75,3 +82,31 @@
}
}
}
@media (max-width: 1024px) {
.index-panel__content {
transition: height 0.3s ease-in-out;
}
.index-panel[data-mobile-open='false'] .index-panel__content {
@apply h-0 py-2;
ul.sommaire-index,
ul.footnotes-index {
@apply hidden;
}
}
.index-panel[data-mobile-open='true'] .index-panel__header {
@apply h-fit py-4;
button#mobile-open-toggle {
img {
transition: transform 0.3s ease-in-out;
@apply rotate-180;
}
}
ul.sommaire-index,
ul.footnotes-index {
@apply block;
}
}
}

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

@ -154,10 +154,11 @@
/* ON MOBILE, STICK ON THE BOTTOM OF THE ARTICLE */
/* We need to reverse the content order */
@media (max-width: 1024px) {
@apply sticky bottom-0;
@apply sticky bottom-0 z-50;
order: 2;
@apply sticky bottom-0;
align-self: flex-end;
}
}
}

4
resources/img/icons/open-close-arrow-button.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 22.5C1 10.6259 10.6259 1 22.5 1C34.3741 1 44 10.6259 44 22.5C44 34.3741 34.3741 44 22.5 44C10.6259 44 1 34.3741 1 22.5Z" stroke="white" stroke-width="2"/>
<path d="M13.5 18.4499L22.2518 26.9999L31.5 18.45" stroke="white" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

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

@ -8,6 +8,24 @@ export default function handleIndexPanel(): void {
observeTabsButtons();
observeFootnotesLinks();
observeSommaireLinks();
handleMobileOpenToggle();
}
function handleMobileOpenToggle(): void {
const mobileOpenToggle = document.querySelector('#mobile-open-toggle');
const indexPanel = document.querySelector('.index-panel');
if (!mobileOpenToggle) return;
if (!indexPanel) return;
mobileOpenToggle.addEventListener('click', () => {
const isMobileOpen = indexPanel.getAttribute('data-mobile-open');
console.log(isMobileOpen);
if (isMobileOpen === 'true') {
indexPanel.setAttribute('data-mobile-open', 'false');
} else {
indexPanel.setAttribute('data-mobile-open', 'true');
}
});
}
// HANDLE TABS

6
template-parts/articles/index-panel.php
View File

@ -1,5 +1,5 @@
<?php ?>
<div class="index-panel">
<div class="index-panel" data-mobile-open="false">
<div class="index-panel__header">
<button class="focus" data-index="sommaire" aria-selected="true" aria-controls="sommaire-index">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-resume.svg" alt="">
@ -9,6 +9,10 @@
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-notes.svg" alt="">
Notes
</button>
<button id="mobile-open-toggle" class=" index-panel__mobile-open-toggle">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/open-close-arrow-button.svg" alt="Ouvrir le menu rapide">
</button>
</div>
<div class="index-panel__content">