StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-27 15:50:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): ✨ re-implement responsive toc

Browse source
This commit is contained in:
alistair3149 2022-10-19 21:09:50 -04:00
parent 1730a8ff99
commit a1ce408e43
No known key found for this signature in database
6 changed files with 93 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/skins.citizen.scripts/skin.js
View file

@ -119,24 +119,6 @@ function main( window ) {
bind();
bindCloseOnUnload();
// Handle ToC
// TODO: There must be a cleaner way to do this
const tocContainer = document.getElementById( 'mw-panel-toc' );
if ( tocContainer ) {
const toc = require( './tableOfContents.js' );
toc.init();
/*
checkboxHack.bind(
window,
document.getElementById( 'toctogglecheckbox' ),
tocContainer.querySelector( '.toctogglelabel' ),
tocContainer.querySelector( 'ul' )
);
*/
}
mw.loader.load( 'skins.citizen.preferences' );
// Set up loading indicator

4
resources/skins.citizen.styles/Header.less
View file

@ -2,9 +2,6 @@
--header-icon-size: ~'calc( var( --header-button-size ) / 2 )';
--header-button-size: ~'calc( var( --header-size ) - var( --space-sm ) * 2 )';
--header-direction: row;
// Browser UI can be unpredicatable
// And this leaves some empty space for dismissing the dialog
--header-card-maxheight: 70vh;
position: fixed;
z-index: @z-index-site-header;
right: 0;
@ -153,7 +150,6 @@
@media ( min-width: @width-breakpoint-desktop ) {
.citizen-header {
--header-direction: column;
--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';
top: 0;
right: unset;
left: 0;

84
resources/skins.citizen.styles/TableOfContents.less
View file

@ -61,8 +61,10 @@
&.citizen-toc__top {
height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
transition: @transition-opacity, @transition-height;
transition: @transition-opacity, @transition-height, padding @transition-timing-slow ease;
visibility: hidden;
}
@ -109,6 +111,8 @@
.citizen-body-header--sticky {
.citizen-toc__top.citizen-toc__link {
height: 1.05rem; // ( 1rem text + 1rem padding ) * line height / 2
padding-top: var( --space-sm );
padding-bottom: var( --space-sm );
opacity: 1;
visibility: visible;
}
@ -120,6 +124,84 @@
}
}
@media ( max-width: ( @width-breakpoint-desktop - 1px ) ) {
.citizen-toc {
position: fixed;
right: 0;
bottom: ~'calc( var( --header-size ) + var( --space-sm ) )';
&__card {
overflow: auto;
// This is not bulletproof since it will get covered by page header
// in extremely short height. but it should be good for now
max-height: ~'calc( var( --header-card-maxheight ) - 8rem )';
padding: var( --space-md );
margin: var( --space-sm );
overscroll-behavior: contain;
user-select: none;
.citizen-card;
.citizen-card-hide( bottom right, '', false );
}
}
#citizen-toc {
&__checkbox:checked {
~ .citizen-toc__card {
.citizen-card-show( false );
}
~ #citizen-toc__buttonCheckbox {
box-shadow: none;
}
}
&__buttonCheckbox {
position: absolute;
right: 0;
bottom: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: var( --border-radius--medium );
margin: var( --space-sm );
background-color: var( --color-surface-1 );
box-shadow: var( --box-shadow-dialog );
&:after {
display: block;
width: inherit;
height: inherit;
background-position: center;
background-repeat: no-repeat;
background-size: 1rem;
content: '';
opacity: var( --opacity-icon-base );
}
// The hover state colors are not great but it will do for now
&:hover {
background-color: var( --color-surface-3 );
}
&:active {
background-color: var( --color-surface-1 );
}
}
}
// Wait for first paint before animating
.citizen-animations-ready {
.citizen-toc__card {
.citizen-card-transition();
}
}
.skin-citizen-dark {
#citizen-toc__buttonCheckbox:after {
filter: invert( 1 );
}
}
}
@media ( min-width: @width-breakpoint-desktop ) {
.citizen-toc {
grid-area: toc;

7
resources/skins.citizen.styles/common/cssvariables.less
View file

@ -72,6 +72,7 @@
html {
/* Size */
--header-size: @header-size;
--header-card-maxheight: 70vh;
--width-layout: @width-layout;
--width-layout--extended: ~'calc( var( --width-layout ) * 1.5 )';
--width-toc: @width-toc;
@ -132,3 +133,9 @@ html {
--border-color-input: @dark-border-color-input;
--border-color-input--hover: @dark-border-color-input--hover;
}
@media ( min-width: @width-breakpoint-desktop ) {
html {
--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';
}
}

4
skin.json
View file

@ -277,13 +277,13 @@
"defaultColor": "#000",
"images": {
".citizen-toc__top:before": "resources/skins.citizen.icons/backToTop.svg",
".toctogglelabel:before": {
"#citizen-toc__buttonCheckbox:after": {
"file": {
"ltr": "resources/skins.citizen.icons/toc-ltr.svg",
"rtl": "resources/skins.citizen.icons/toc-rtl.svg"
}
},
".toctogglecheckbox:checked ~ .toctitle .toctogglelabel:before": "resources/skins.citizen.icons/shared/close.svg",
"#citizen-toc__checkbox:checked ~ #citizen-toc__buttonCheckbox:after": "resources/skins.citizen.icons/shared/close.svg",
"#citizen-userMenu__buttonCheckbox:after": "resources/skins.citizen.icons/shared/userAvatar.svg",
".citizen-search__icon:after": "resources/skins.citizen.icons/shared/search.svg",
".citizen-search__random:after": "resources/skins.citizen.icons/shared/random.svg",

2
templates/TableOfContents.mustache
View file

@ -1,5 +1,5 @@
{{#data-toc}}
<div class="citizen-toc">
<div class="citizen-toc mw-checkbox-hack-container">
<input
type="checkbox"
id="citizen-toc__checkbox"