StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-11-24 00:13:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve noscript support

Browse source 
1. Allow other tabs to be shown
2. Put noscript message in warning box
This commit is contained in:
alistair3149 2023-02-16 14:02:04 -05:00
parent 021c410682
commit 365777eae3
No known key found for this signature in database
2 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
includes/Tabber.php
View file

@ -38,7 +38,7 @@ class Tabber {
// See ext.tabberNeue.inline.less
$style = sprintf(
'<style id="tabber-style">%s</style>',
'.tabber__header{height:2.6em;box-shadow:inset 0-1px 0 0;opacity:0.1}.tabber__header:after{position:absolute;width:16ch;height:0.5em;margin-top:1em;margin-left:0.75em;background:#000;border-radius:40px;content:""}.tabber__panel:not(:first-child){display:none}'
'.client-js .tabber__header{height:2.6em;box-shadow:inset 0-1px 0 0;opacity:0.1}.client-js .tabber__header:after{position:absolute;width:16ch;height:0.5em;margin-top:1em;margin-left:0.75em;background:#000;border-radius:40px;content:""}.client-js .tabber__panel:not(:first-child){display:none}'
);
$parser->getOutput()->addHeadItem( $style, true );
$parser->getOutput()->addModules( [ 'ext.tabberNeue' ] );
@ -64,7 +64,7 @@ class Tabber {
$noscriptMsg = wfMessage( 'tabberneue-noscript' )->text();
$html = '<div class="tabber">' .
'<header class="tabber__header"><noscript>' . $noscriptMsg . '</noscript></header>' .
'<header class="tabber__header"><noscript><div class="mw-message-box mw-message-box-warning">' . $noscriptMsg . '</div></noscript></header>' .
'<section class="tabber__section">' . $htmlTabs . '</section></div>';
return $html;

8
modules/ext.tabberNeue.inline.less
View file

@ -9,14 +9,16 @@
* Used in Tabber.php and TabberTransclude.php
*/
/* stylelint-disable selector-class-pattern */
// Skeleton UI
.tabber__header {
.client-js .tabber__header {
height: 2.6em;
box-shadow: inset 0 -1px 0 0;
opacity: 0.1;
}
.tabber__header:after {
.client-js .tabber__header:after {
position: absolute;
width: 16ch;
height: 0.5em;
@ -32,6 +34,6 @@
// All panels are stacked vertically initially
// Then panels are stacked horizontally after Tabber is loaded
// Causing lots of layout shift
.tabber__panel:not( :first-child ) {
.client-js .tabber__panel:not( :first-child ) {
display: none;
}