feat(glossary): add step 21 smart navigation
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user