diff --git a/ScratchWikiSkin.skin.php b/ScratchWikiSkin.skin.php index fbfdea1..45087f4 100644 --- a/ScratchWikiSkin.skin.php +++ b/ScratchWikiSkin.skin.php @@ -5,7 +5,7 @@ * @file * @ingroup Skins */ - + use MediaWiki\MediaWikiServices; class HTMLColorField extends HTMLFormField { @@ -78,6 +78,13 @@ static function onGetPreferences( $user, &$preferences ) { // Only expose background color preference when the skin is selected 'hide-if' => [ '!==', 'wpskin', 'scratchwikiskin2' ], ]; + $preferences['scratchwikiskin-hide-explore-tabs'] = [ + 'type' => 'toggle', + 'section' => 'rendering/skin', + 'label-message' => 'scratchwikiskin-pref-explore-tabs', + 'help-message' => 'scratchwikiskin-pref-explore-tabs-help', + 'hide-if' => [ '!==', 'wpskin', 'scratchwikiskin2' ], + ]; return true; } } diff --git a/ScratchWikiSkinTemplate.php b/ScratchWikiSkinTemplate.php index e43884e..99ec88e 100644 --- a/ScratchWikiSkinTemplate.php +++ b/ScratchWikiSkinTemplate.php @@ -101,11 +101,10 @@ public function execute() { isAnon()) { ?>inLanguage( $wgLang )->escaped()?>getName())?> @@ -152,6 +151,23 @@ public function execute() {
data['newtalk']) { ?>

html('newtalk') ?>

data['sitenotice']) { ?>
html('sitenotice'); ?>
+isAnon() && !$userOptionsLookup->getOption( $wgUser, 'scratchwikiskin-hide-explore-tabs' )) { ?> +
+ +
+
getIndicators()?> diff --git a/i18n/en.json b/i18n/en.json index 5e4e639..9df2bc2 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -61,5 +61,7 @@ "scratchwikiskin-footer-foundation": "Scratch Foundation", "scratchwikiskin-notloggedin": "Not logged in", "scratchwikiskin-pref-color": "Header color:", + "scratchwikiskin-pref-explore-tabs": "Hide Explore-style tabs", + "scratchwikiskin-pref-explore-tabs-help": "All relevant functions can be found in the pencil menu next to your username, but the tabs are not hidden behind a button.", "scratchwikiskin-search": "Search the Wiki" } diff --git a/resources/css/main.css b/resources/css/main.css index 5976b5c..b006832 100644 --- a/resources/css/main.css +++ b/resources/css/main.css @@ -361,7 +361,7 @@ dl dt { } #navigation .logo a, -#navigation .content-actions .dropdown-toggle { +#navigation .content-actions > a { display: block; transition: .15s ease all; border: 0; @@ -379,7 +379,7 @@ dl dt { } #navigation .logo a:hover, -#navigation .content-actions .dropdown-toggle:hover { +#navigation .content-actions > a:hover { transition: .15s ease all; } @@ -387,7 +387,7 @@ dl dt { transform: scale(1.05, 1.05); } -#navigation .content-actions .dropdown-toggle:hover { +#navigation .content-actions > a:hover { background-size: 27.5px 27.5px; } @@ -510,13 +510,7 @@ dl dt { background-color: rgba(0, 0, 0, 0.1); } -#navigation .account-nav>a:after, -#navigation .create>a:after, -#navigation .explore>a:after, -#navigation .discuss>a:after, -#navigation .tips>a:after, -#navigation .about>a:after, -#navigation .content-actions>a:after { +#navigation a.dropdown-toggle:after { display: inline-block; margin-left: 8px; /* @embed */ @@ -544,6 +538,75 @@ dl dt { min-width: 100%; } +.explore-tabs { + display: flex; + margin: 0 auto; + padding: 8px 0; + justify-content: space-between; +} + +.explore-tabs .sub-nav { + display: flex; + padding: 5px 0; + color: #fff; + font-size: .8rem; + font-weight: bold; + justify-content: center; + flex-wrap: wrap; +} + +.explore-tabs .sub-nav li { + display: inline-block; + list-style-type: none; + margin: 0; +} + +.explore-tabs .sub-nav a { + display: inline-block; + margin: 5px; + border-radius: 50px; + min-height: 15px; + min-width: 15px; + padding: .75em; + text-decoration: none; + color: inherit; + background-color: #d9d9d9; + /* @embed */ + background-image: url('../dropdown.png'); + background-size: 15px; + background-repeat: no-repeat; + background-position: .75em center; +} +.explore-tabs .sub-nav a span { + display: none; +} + +.explore-tabs .sub-nav a:hover, +.explore-tabs .sub-nav a:focus, +.explore-tabs .sub-nav .selected a { + padding: .75em 1.5em .75em calc(1.5em + 15px); + background-color: #c2c2c2; + transition: background-color .25s ease; +} +.explore-tabs .sub-nav a:hover span, +.explore-tabs .sub-nav a:focus span, +.explore-tabs .sub-nav .selected a span { + display: inline; +} + +.explore-tabs .sub-nav .selected a { + background-color: #0fbd8c; +} + +.explore-tabs .sub-left { + justify-content: flex-start; + flex-wrap: nowrap; +} + +.explore-tabs .sub-right { + justify-content: flex-end; +} + #footer { display: block; background-color: #f2f2f2; @@ -680,7 +743,7 @@ dl dt { margin-top: 20px; } -#navigation ul>li.content-actions>a.dropdown-toggle { +#navigation ul>li.content-actions>a { height: 25px; width: auto; min-width: 25px; @@ -692,7 +755,7 @@ dl dt { background-repeat: no-repeat; } -#navigation ul>li.content-actions>a.dropdown-toggle>div { +#navigation ul>li.content-actions>a>div { height: 25px; width: 25px; display: inline-block; diff --git a/resources/css/mobile.css b/resources/css/mobile.css index b74b9a6..ae7a9f5 100644 --- a/resources/css/mobile.css +++ b/resources/css/mobile.css @@ -24,4 +24,7 @@ background-position: center center; background-repeat: no-repeat; filter: invert(100%); +} +.explore-tabs { + display: none; } \ No newline at end of file