feat(glossary): add step 21 smart navigation
All checks were successful
SMOKE / smoke (push) Successful in 13s
CI / build-and-anchors (push) Successful in 1m4s
CI / build-and-anchors (pull_request) Successful in 35s

This commit is contained in:
2026-04-26 13:03:45 +02:00
parent 689619d14d
commit 9f88112aca
45 changed files with 1020 additions and 112 deletions

View File

@@ -49,7 +49,7 @@ const portalLinks = getGlossaryPortalLinks();
</div>
</div>
<details class="glossary-aside__block glossary-aside__disclosure" open>
<details class="glossary-aside__block glossary-aside__disclosure">
<summary class="glossary-aside__summary">
<span class="glossary-aside__heading">Portails</span>
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -65,7 +65,7 @@ const portalLinks = getGlossaryPortalLinks();
</details>
{showNoyau && (
<details class="glossary-aside__block glossary-aside__disclosure" open>
<details class="glossary-aside__block glossary-aside__disclosure">
<summary class="glossary-aside__summary">
<span class="glossary-aside__heading">Noyau archicratique</span>
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -93,7 +93,7 @@ const portalLinks = getGlossaryPortalLinks();
)}
{showSameFamily && (
<details class="glossary-aside__block glossary-aside__disclosure" open>
<details class="glossary-aside__block glossary-aside__disclosure">
<summary class="glossary-aside__summary">
<span class="glossary-aside__heading">{sameFamilyTitle}</span>
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -121,7 +121,7 @@ const portalLinks = getGlossaryPortalLinks();
)}
{relationSections.length > 0 && (
<details class="glossary-aside__block glossary-aside__disclosure" open>
<details class="glossary-aside__block glossary-aside__disclosure">
<summary class="glossary-aside__summary">
<span class="glossary-aside__heading">Autour de cette fiche</span>
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -143,7 +143,7 @@ const portalLinks = getGlossaryPortalLinks();
)}
{contextualTheory.length > 0 && (
<details class="glossary-aside__block glossary-aside__disclosure" open>
<details class="glossary-aside__block glossary-aside__disclosure">
<summary class="glossary-aside__summary">
<span class="glossary-aside__heading">Paysage théorique</span>
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -445,7 +445,29 @@ const portalLinks = getGlossaryPortalLinks();
}
}
@media (min-width: 861px){
@media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse){
.glossary-aside{
gap: 10px;
}
.glossary-aside__disclosure{
background: rgba(127,127,127,0.045);
}
.glossary-aside__disclosure:not([open]) .glossary-aside__panel{
display: none;
}
.glossary-aside__summary{
cursor: pointer;
}
.glossary-aside__chevron{
display: inline;
}
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine){
.glossary-aside__summary{
cursor: default;
}
@@ -470,7 +492,9 @@ const portalLinks = getGlossaryPortalLinks();
<script is:inline>
(() => {
const syncMobileDisclosure = () => {
const mobile = window.matchMedia("(max-width: 860px)").matches;
const mobile = window.matchMedia(
"(max-width: 860px), ((orientation: portrait) and (max-width: 1024px) and (pointer: coarse))"
).matches;
const smallLandscape = window.matchMedia(
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
).matches;
@@ -484,7 +508,7 @@ const portalLinks = getGlossaryPortalLinks();
if (compact) {
if (!el.dataset.mobileInit) {
el.open = index === 0;
el.open = false;
el.dataset.mobileInit = "true";
}
} else {