StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-09-23 10:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(toc): ✨ allow ToC to be collapsible

Browse source 
Using the same implementation as Vector 2022

Closes: #556
This commit is contained in:
alistair3149 2024-09-10 19:32:49 -04:00
parent ca1f31d789
commit 257673a588
No known key found for this signature in database
2 changed files with 64 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
resources/skins.citizen.styles/components/TableOfContents.less
View file

@ -1,4 +1,5 @@
.citizen-toc {
--citizen-toc-toggle-size: ~'calc( var( --font-size-small ) * var( --line-height-xs ) + var( --space-xs ) * 2 )';
font-size: var( --font-size-small );
line-height: var( --line-height-xs );
@ -36,6 +37,11 @@
transition-property: opacity, height, padding !important;
}
&:has( + .citizen-toc-toggle ) {
/* Make space for toggle */
padding-right: ~'calc( var( --space-xs ) + var( --citizen-toc-toggle-size ) )';
}
&:hover {
background-color: var( --background-color-button-quiet--hover );
}
@ -50,6 +56,17 @@
}
}
&-toggle {
position: absolute;
top: 0;
right: 0;
display: none;
width: var( --citizen-toc-toggle-size );
height: var( --citizen-toc-toggle-size );
padding: 0;
background: transparent;
}
&-indicator {
position: absolute;
top: 0;
@ -73,6 +90,8 @@
}
&-list-item {
position: relative;
&--active {
> .citizen-toc-link {
color: var( --color-progressive );
@ -85,6 +104,45 @@
}
}
// Collapse ToC sections by default, excluding no-js
.client-js .citizen-toc {
.citizen-toc-level-1 .citizen-toc-list-item {
display: none;
}
.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-list-item {
display: block;
}
.citizen-toc-toggle {
--size-icon: var( --font-size-small );
display: grid;
place-content: center;
cursor: pointer;
border-radius: var( --border-radius--small );
.citizen-ui-icon {
&::before {
transition: var( --transition-hover );
transition-property: transform;
transform: rotate3d( 1, 0, 0, 180deg );
}
}
&:hover {
background-color: var( --background-color-button-quiet--hover );
}
&:active {
background-color: var( --background-color-button-quiet--active );
}
}
.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-toggle .citizen-ui-icon::before {
transform: none;
}
}
// Sticky header styles
.citizen-page-header--sticky {
.citizen-toc-top.citizen-toc-link {

6
templates/TableOfContents__line.mustache
View file

@ -13,6 +13,12 @@
{{#html-summary}}
{{{.}}}
{{/html-summary}}
{{#is-top-level-section}}{{#is-parent-section}}
<button aria-controls="toc-{{anchor}}-sublist" class="citizen-toc-toggle">
<span class="citizen-ui-icon mw-ui-icon-wikimedia-collapse"></span>
<span>{{{citizen-button-label}}}</span>
</button>
{{/is-parent-section}}{{/is-top-level-section}}
<ul id="toc-{{anchor}}-sublist" class="citizen-toc-list">
{{#array-sections}}
{{>TableOfContents__line}}