StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-13 17:49:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make whole header toggleable

Browse source
This commit is contained in:
alistair3149 2021-03-02 20:55:13 -05:00 committed by GitHub
parent 0375a5cbc9
commit 90237e0a0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/skins.citizen.scripts.sections/sections.js
View file

@ -1,18 +1,18 @@
function bindClick( collToggle, collSection, i, j ) {
function bindClick( collHeading, collSection, i, j ) {
return function () {
j = i + 1;
this.classList.toggle( 'section-toggle--collapsed' );
this.classList.toggle( 'section-heading--collapsed' );
collSection[ j ].classList.toggle( 'section-collapsible--collapsed' );
};
}
function main() {
var collSection = document.getElementsByClassName( 'section-collapsible' ),
collToggle = document.getElementsByClassName( 'section-toggle' ),
var collHeading = document.getElementsByClassName( 'section-heading' ),
collSection = document.getElementsByClassName( 'section-collapsible' ),
i, j;
for ( i = 0; i < collToggle.length; i++ ) {
collToggle[ i ].addEventListener( 'click', bindClick( collToggle, collSection, i, j ) );
for ( i = 0; i < collHeading.length; i++ ) {
collHeading[ i ].addEventListener( 'click', bindClick( collHeading, collSection, i, j ) );
}
}

94
resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less
View file

@ -1,51 +1,67 @@
@import '../variables.less';
.section {
&-toggle {
width: 18px;
height: 18px;
padding: 5px;
margin-right: 10px;
background-position: center;
background-repeat: no-repeat;
background-size: 18px;
cursor: pointer;
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick, @transition-transform-quick;
.client-js {
.section {
&-heading {
cursor: pointer;
// So that double clicking won't highlight everything
user-select: none;
&:hover {
opacity: var( --opacity-icon-base--hover );
}
&--collapsed {
.section-toggle {
transform: rotate3d( 1, 0, 0, 180deg );
}
&:active {
opacity: var( --opacity-icon-base--active );
}
.mw-headline {
opacity: var( --opacity-icon-base );
}
}
&--collapsed {
transform: rotate3d( 1, 0, 0, 180deg );
.mw-headline {
transition: @transition-opacity-quick;
~ .mw-headline {
color: var( --color-base );
&:hover {
opacity: var( --opacity-icon-base--hover );
}
&:active {
opacity: var( --opacity-icon-base--active );
}
}
}
}
&-heading {
.mw-headline {
transition: @transition-color-quick;
&-toggle {
width: 18px;
height: 18px;
padding: 5px;
margin-right: 10px;
background-position: center;
background-repeat: no-repeat;
background-size: 18px;
cursor: pointer;
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick, @transition-transform-quick;
&:hover {
opacity: var( --opacity-icon-base--hover );
}
&:active {
opacity: var( --opacity-icon-base--active );
}
}
}
// Fix button alignment
&-heading,
&-subheading {
display: flex;
align-items: center;
}
// Fix button alignment
&-heading,
&-subheading {
display: flex;
align-items: center;
}
&-collapsible {
&--collapsed {
display: none;
&-collapsible {
&--collapsed {
display: none;
}
}
}
}
@ -58,7 +74,9 @@
// Hide toggle when client is noscript
.client-nojs {
.section-toggle {
display: none;
.section {
&-toggle {
display: none;
}
}
}