StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-09-23 10:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add background fade to indicate scrollable tab header

Browse source
This commit is contained in:
alistair3149 2022-04-19 16:34:04 -04:00
parent 094f82ed48
commit 750dd273be
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
2 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
modules/ext.tabberNeue.js
View file

@ -128,13 +128,17 @@ function initTabber( tabber, count ) {
// Just to add the right classes
updateButtons();
prevButton.addEventListener( 'click', function() {
scrollTabs( -scrollOffset );
}, false );
nextButton.addEventListener( 'click', function() {
scrollTabs( scrollOffset );
}, false );
// Button only shows on pointer devices
if ( matchMedia( '(hover: hover)' ).matches ) {
prevButton.addEventListener( 'click', function() {
scrollTabs( -scrollOffset );
}, false );
nextButton.addEventListener( 'click', function() {
scrollTabs( scrollOffset );
}, false );
}
} else {
container.classList.remove( NEXTCLASS );
container.classList.remove( PREVCLASS );
@ -328,10 +332,7 @@ function initTabber( tabber, count ) {
switchTab();
// Only run if client is not a touch device
if ( matchMedia( '(hover: hover)' ).matches ) {
initButtons();
}
initButtons();
// window.addEventListener( 'hashchange', switchTab, false );

16
modules/ext.tabberNeue.less
View file

@ -196,6 +196,22 @@
}
}
@media ( hover: none ) {
// Need extra specificity to override
.tabber {
.tabber__header {
&__prev,
&__next {
pointer-events: none; // Disable arrow button
&:after {
background-image: none; // Remove arrow icon
}
}
}
}
}
@media ( hover: hover ) {
.tabber {
&__tab {