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

perf(stickyHeader): ⚡️ improve responsiveness for sticky header

Browse source
This commit is contained in:
alistair3149 2024-11-08 04:58:11 -05:00
parent ba5d0a7f92
commit 252e98b085
No known key found for this signature in database
3 changed files with 49 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/skins.citizen.scripts/setupObservers.js
View file

@ -217,7 +217,7 @@ const main = () => {
document.body.classList.remove( SCROLL_DOWN_CLASS );
document.body.classList.add( SCROLL_UP_CLASS );
},
50
10
);
const resumeStickyHeader = () => {

59
resources/skins.citizen.styles/common/features.less
View file

@ -147,57 +147,55 @@
.citizen-feature-autohide-navigation-clientpref-1 {
@media ( max-width: @max-width-breakpoint-tablet ) {
.citizen-header {
.citizen-header,
.citizen-page-header,
.citizen-page-heading,
.citizen-toc,
.page-actions {
transition-timing-function: var( --transition-timing-function-ease-out );
transition-duration: var( --transition-duration-medium );
}
.citizen-header {
transition-property: transform;
}
// Hide sticky header on scroll down on smaller screens
.citizen-sticky-header-visible {
.citizen-page-header,
.citizen-page-heading {
transition-timing-function: var( --transition-timing-function-ease-out );
transition-duration: var( --transition-duration-medium );
}
.citizen-page-header,
.citizen-toc,
.page-actions {
transition-property: transform, opacity;
}
.citizen-page-header {
transition-property: transform;
}
.citizen-page-heading {
transition-property: opacity;
}
.citizen-page-heading {
transition-property: opacity;
}
.citizen-scroll--down {
--height-sticky-header: 0 !important;
.citizen-header {
.citizen-header,
.citizen-page-header,
.citizen-page-heading,
.citizen-toc,
.page-actions {
transition-timing-function: var( --transition-timing-function-ease-in );
transition-duration: var( --transition-duration-base );
transform: translateY( 100% );
}
.citizen-toc {
bottom: var( --space-xs );
.citizen-header {
transform: translate3d( 0, 100%, 0 );
}
.citizen-toc,
.page-actions {
box-shadow: none;
pointer-events: none;
opacity: 0;
transform: translateY( 250% );
transform: translate3d( 0, var( --header-size ), 0 );
}
&.citizen-sticky-header-visible {
.citizen-page-header,
.citizen-page-heading {
transition-timing-function: var( --transition-timing-function-ease-in );
transition-duration: var( --transition-duration-base );
}
.citizen-page-header {
transform: translateY( -150% );
transform: translate3d( 0, -100%, 0 );
}
.citizen-page-heading {
@ -207,11 +205,8 @@
}
.citizen-scroll--up {
// Page actions needed to have a scroll up handler to avoid clipping issue
.page-actions {
opacity: 1;
// Start transition after sticky header has finished transition
transition: opacity var( --transition-duration-medium ) var( --transition-timing-function-ease-out ) var( --transition-duration-medium ), transform var( --transition-duration-medium ) var( --transition-timing-function-ease-out ) var( --transition-duration-medium );
transition-delay: ~'calc( var( --transition-duration-medium ) + 100ms )';
}
}
}

42
resources/skins.citizen.styles/components/Search.less
View file

@ -119,27 +119,6 @@
}
}
#searchInput {
flex-grow: 1;
padding: 0;
font-size: inherit;
appearance: none;
background: transparent; // Cancel default background
border: 0; // Cancel default border
&:focus {
outline: 0;
// The search suggestion pop-up indicates for focus state
// border-color: var( --color-progressive );
// box-shadow: inset 0 0 0 1px var( --color-progressive );
}
// Remove browser native clear all button in search field
&::-webkit-search-cancel-button {
-webkit-appearance: none;
}
}
&__footer {
bottom: 0;
display: flex;
@ -163,6 +142,27 @@
}
}
#searchInput {
flex-grow: 1;
padding: 0;
font-size: inherit;
appearance: none;
background: transparent; // Cancel default background
border: 0; // Cancel default border
&:focus {
outline: 0;
// The search suggestion pop-up indicates for focus state
// border-color: var( --color-progressive );
// box-shadow: inset 0 0 0 1px var( --color-progressive );
}
// Remove browser native clear all button in search field
&::-webkit-search-cancel-button {
-webkit-appearance: none;
}
}
@media ( max-width: @max-width-breakpoint-tablet ) {
.citizen-search {
.citizen-menu__card {