mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-23 22:13:38 +00:00
feat(core): ✨ add sticky body header
This commit is contained in:
parent
20ed41ec2c
commit
e72d7c00a3
|
@ -63,17 +63,17 @@ function bindCloseOnUnload() {
|
|||
* @return {void}
|
||||
*/
|
||||
function onTitleHidden( document ) {
|
||||
const title = document.getElementById( 'firstHeading' );
|
||||
const title = document.getElementById( 'citizen-body-header-sticky-sentinel' );
|
||||
|
||||
if ( title ) {
|
||||
const scrollObserver = require( './scrollObserver.js' );
|
||||
|
||||
const observer = scrollObserver.initScrollObserver(
|
||||
() => {
|
||||
document.body.classList.add( 'citizen-title--hidden' );
|
||||
document.body.classList.add( 'citizen-body-header--sticky' );
|
||||
},
|
||||
() => {
|
||||
document.body.classList.remove( 'citizen-title--hidden' );
|
||||
document.body.classList.remove( 'citizen-body-header--sticky' );
|
||||
}
|
||||
);
|
||||
observer.observe( title );
|
||||
|
|
|
@ -252,5 +252,17 @@
|
|||
padding-right: var( --width-toc );
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-animations-ready {
|
||||
.toc {
|
||||
transition: @transition-transform;
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-body-header--sticky {
|
||||
.toc {
|
||||
transform: translateY( 3rem );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
32
resources/skins.citizen.styles/Stickyheader.less
Normal file
32
resources/skins.citizen.styles/Stickyheader.less
Normal file
|
@ -0,0 +1,32 @@
|
|||
#citizen-body-header-sticky-sentinel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 3.5rem; // HACK: Estimated size of body-header
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.citizen-body-header--sticky {
|
||||
.mw-body-header {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
padding-bottom: var( --space-md );
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.firstHeading {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.toc {
|
||||
transform: translateY( 3rem );
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-height: 1000px ) {
|
||||
.page-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
|
@ -25,7 +25,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
padding-top: @content-margin-top;
|
||||
padding-top: var( --space-md );
|
||||
margin-top: var( --space-xl );
|
||||
margin-bottom: @content-margin-top * 2;
|
||||
gap: @content-margin-top;
|
||||
|
|
|
@ -29,6 +29,7 @@
|
|||
@import 'Menu.less';
|
||||
@import 'Catlinks.less';
|
||||
@import 'Footer.less';
|
||||
@import 'Stickyheader.less';
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
string html-title-heading--formatted
|
||||
string html-tagline
|
||||
}}
|
||||
<div id="citizen-body-header-sticky-sentinel"></div>
|
||||
<header class="mw-body-header">
|
||||
<div class="page-heading">
|
||||
<div class="firstHeading-container">
|
||||
|
|
Loading…
Reference in a new issue