StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-12-18 17:22:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix closed toc eating clicks with phantom div

Browse source 
Previous behaviour was to remove the toc from view by applying a transform to the .toc > ul but *not* .toc itself.

This meant that .toc was still covering the body when the toc was "closed", eating clicks on anything that would be covered by the toc when opened.

This change puts a transform on .toc itself (and changes the transforms on the ul to match), fixing the issue. However, this creates a new stacking context, which affects .toctogglelabel, since its fixed position is now with respect to .toc, not the viewport. Setting .toctogglelabel { right: -100vw } keeps it in the same place.
This commit is contained in:
Cameron 2020-11-23 16:14:09 +10:30 committed by GitHub
parent f168f14378
commit bf8909e2bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
View file

@ -97,6 +97,7 @@
height: 100%; height: 100%;
margin-top: -@header-height; margin-top: -@header-height;
padding: 0; padding: 0;
transform: translateX(-100%);
&:before, &:before,
&:after { &:after {
@ -112,7 +113,7 @@
&label { &label {
position: fixed; position: fixed;
z-index: 7; z-index: 7;
right: 0; right: -100vw;
bottom: 0; bottom: 0;
margin: @margin-side; margin: @margin-side;
padding: 0 @margin-side / 2; padding: 0 @margin-side / 2;
@ -144,7 +145,7 @@
} }
&checkbox:not( :checked ) ~ ul { &checkbox:not( :checked ) ~ ul {
transform: translateX( -300px - @margin-side ); transform: none;
} }
} }
@ -162,7 +163,7 @@
background: @base-100; background: @base-100;
border-radius: 0 @border-radius-large @border-radius-large 0; border-radius: 0 @border-radius-large @border-radius-large 0;
.boxshadow(3); .boxshadow(3);
transform: none; transform: translateX(100%);
transition: @transition-transform; transition: @transition-transform;
} }
} }