From ac922ba61f97e4a1703064abcdc907578ef082e6 Mon Sep 17 00:00:00 2001 From: Kenny2github Date: Tue, 19 Oct 2021 05:58:42 +0000 Subject: [PATCH 1/8] Initial version of Explore-style content tabs ScratchWikiSkinTemplate.php: * Note that pencil menu may be removed + Include content actions in an explore-tabs div * Divide left and right between discussion and edit main.css: * Refactor a bunch of selectors to not depend on .dropdown-toggle (since it's now possible that that class will be removed from the pencil menu altogether) * Also, what was that idiocy I saw with individually specifying .create, .explore, etc. * Note what to do if pencil menu is removed + New styling for explore-style tabs * Mostly copied from Scratch source * Some explore-specific rules omitted * Some colors no longer specified using transparency * Since MW so conveniently provides a "selected" class in its content-actions, make full use of it instead of Scratch's "active" --- ScratchWikiSkinTemplate.php | 19 +++++++--- resources/css/main.css | 69 ++++++++++++++++++++++++++++++------- 2 files changed, 70 insertions(+), 18 deletions(-) diff --git a/ScratchWikiSkinTemplate.php b/ScratchWikiSkinTemplate.php index e43884e..0cb2370 100644 --- a/ScratchWikiSkinTemplate.php +++ b/ScratchWikiSkinTemplate.php @@ -101,11 +101,10 @@ public function execute() { isAnon()) { ?>inLanguage( $wgLang )->escaped()?>getName())?> @@ -152,6 +151,16 @@ public function execute() {
data['newtalk']) { ?>

html('newtalk') ?>

data['sitenotice']) { ?>
html('sitenotice'); ?>
+
+
+data['content_actions'] as $key => $tab) { + if ($key == 'edit') { ?> +
+ getSkin()->makeListItem($key, $tab); +} ?> +
+
getIndicators()?> diff --git a/resources/css/main.css b/resources/css/main.css index 5976b5c..27824f1 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 li>a.dropdown-toggle:after { display: inline-block; margin-left: 8px; /* @embed */ @@ -544,6 +538,55 @@ 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; + margin: 5px; + border-radius: 50px; + padding: .75em 1.5em; + text-decoration: none; + list-style-type: none; + background-color: #d9d9d9; +} + +.explore-tabs .sub-nav li:hover { + background-color: #c2c2c2; + transition: background-color .25s ease; +} + +.explore-tabs .sub-nav li.selected { + background-color: #0fbd8c; +} + +.explore-tabs .sub-nav a { + color: inherit; + text-decoration: inherit; +} + +.explore-tabs .sub-left { + justify-content: flex-start; +} + +.explore-tabs .sub-right { + justify-content: flex-end; +} + #footer { display: block; background-color: #f2f2f2; @@ -680,7 +723,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; @@ -688,11 +731,11 @@ dl dt { /* @embed */ background-image: url('../Edit-pencil.png'); background-size: 25px 25px; - background-position: 12.5px center; + background-position: 12.5px center; /* TODO: change to center center if no pencil menu */ 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; From 8960e1b8fcf7e216c797b2f6a1d958a20d42d717 Mon Sep 17 00:00:00 2001 From: Kenny2github Date: Tue, 19 Oct 2021 06:13:25 +0000 Subject: [PATCH 2/8] Apply
  • stylings to s instead Scratch has
  • while we have
  • Without this change, only the actual text counted as the link Now the whole button properly counts --- resources/css/main.css | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/resources/css/main.css b/resources/css/main.css index 27824f1..2b9ebb2 100644 --- a/resources/css/main.css +++ b/resources/css/main.css @@ -556,29 +556,30 @@ dl dt { } .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; padding: .75em 1.5em; text-decoration: none; - list-style-type: none; + color: inherit; background-color: #d9d9d9; } -.explore-tabs .sub-nav li:hover { +.explore-tabs .sub-nav a:hover { background-color: #c2c2c2; transition: background-color .25s ease; } -.explore-tabs .sub-nav li.selected { +.explore-tabs .sub-nav .selected a { background-color: #0fbd8c; } -.explore-tabs .sub-nav a { - color: inherit; - text-decoration: inherit; -} - .explore-tabs .sub-left { justify-content: flex-start; } From 96e93dd5b6d75065b95b93e68c8878c5145fedf1 Mon Sep 17 00:00:00 2001 From: Kenny2github Date: Tue, 19 Oct 2021 06:35:29 +0000 Subject: [PATCH 3/8] Only show explore tabs to editors Viewers don't need them cluttering that space Also handle "viewsource" which is distinct from "edit" --- ScratchWikiSkinTemplate.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ScratchWikiSkinTemplate.php b/ScratchWikiSkinTemplate.php index 0cb2370..17935b1 100644 --- a/ScratchWikiSkinTemplate.php +++ b/ScratchWikiSkinTemplate.php @@ -151,16 +151,18 @@ public function execute() {
    data['newtalk']) { ?>

    html('newtalk') ?>

    data['sitenotice']) { ?>
    html('sitenotice'); ?>
    +isAnon()) { ?>
    data['content_actions'] as $key => $tab) { - if ($key == 'edit') { ?> + if ($key == 'edit' || $key == 'viewsource') { ?>
    getSkin()->makeListItem($key, $tab); } ?>
    +
    getIndicators()?> From 9eaf741cb1cd9538f4273867fe042f429cf23210 Mon Sep 17 00:00:00 2001 From: Kenny2github Date: Fri, 22 Oct 2021 01:49:23 +0000 Subject: [PATCH 4/8] no reason for this selector to be this specific --- resources/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/main.css b/resources/css/main.css index 2b9ebb2..e743776 100644 --- a/resources/css/main.css +++ b/resources/css/main.css @@ -510,7 +510,7 @@ dl dt { background-color: rgba(0, 0, 0, 0.1); } -#navigation li>a.dropdown-toggle:after { +#navigation a.dropdown-toggle:after { display: inline-block; margin-left: 8px; /* @embed */ From ba06e459c4739e9d921bb61aeb1de9840bf4aa3d Mon Sep 17 00:00:00 2001 From: Kenny2github Date: Fri, 22 Oct 2021 01:53:05 +0000 Subject: [PATCH 5/8] Don't show explore tabs on mobile --- resources/css/mobile.css | 3 +++ 1 file changed, 3 insertions(+) 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 From 4c72f9871f98ff8cb5dbb43496533d0d24dea553 Mon Sep 17 00:00:00 2001 From: Kenny2github Date: Fri, 22 Oct 2021 02:04:25 +0000 Subject: [PATCH 6/8] Don't wrap "Page" and "Discussion" --- resources/css/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/css/main.css b/resources/css/main.css index e743776..2c3ab38 100644 --- a/resources/css/main.css +++ b/resources/css/main.css @@ -582,6 +582,7 @@ dl dt { .explore-tabs .sub-left { justify-content: flex-start; + flex-wrap: nowrap; } .explore-tabs .sub-right { From aab77a6a66d33fad7bf7833c7dcb4be99a78984b Mon Sep 17 00:00:00 2001 From: Kenny2github Date: Fri, 22 Oct 2021 02:11:00 +0000 Subject: [PATCH 7/8] Add preference to hide explore tabs --- ScratchWikiSkin.skin.php | 9 ++++++++- ScratchWikiSkinTemplate.php | 2 +- i18n/en.json | 2 ++ 3 files changed, 11 insertions(+), 2 deletions(-) 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 17935b1..61df07e 100644 --- a/ScratchWikiSkinTemplate.php +++ b/ScratchWikiSkinTemplate.php @@ -151,7 +151,7 @@ public function execute() {
    data['newtalk']) { ?>

    html('newtalk') ?>

    data['sitenotice']) { ?>
    html('sitenotice'); ?>
    -isAnon()) { ?> +isAnon() && !$userOptionsLookup->getOption( $wgUser, 'scratchwikiskin-hide-explore-tabs' )) { ?>
    data['content_actions'] as $key => $tab) { 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" } From a67e9cda0c2ed39e4f50d92973fba9cb1e37d8e8 Mon Sep 17 00:00:00 2001 From: Kenny2github Date: Sat, 30 Oct 2021 23:02:48 +0000 Subject: [PATCH 8/8] Use icons that expand into words ScratchWikiSkinTemplate.php: - Decided not to remove the pencil menu * Use a hack to add a span inside the for styling purposes resources/css/main.css: * Even padding in icon mode * Default background image is dropdown arrow, to be overridden * Show text on hover, focus, or selected - Decided not to remove the pencil menu --- ScratchWikiSkinTemplate.php | 9 +++++++-- resources/css/main.css | 24 +++++++++++++++++++++--- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/ScratchWikiSkinTemplate.php b/ScratchWikiSkinTemplate.php index 61df07e..99ec88e 100644 --- a/ScratchWikiSkinTemplate.php +++ b/ScratchWikiSkinTemplate.php @@ -101,7 +101,7 @@ public function execute() { isAnon()) { ?>inLanguage( $wgLang )->escaped()?>getName())?>
      -data['personal_urls'] as $key => $tab) { echo $this->getSkin()->makeListItem($key, $tab); } ?> @@ -155,10 +155,15 @@ public function execute() {
      data['content_actions'] as $key => $tab) { + // I need a span to make icons work + $tab['text'] = '' . $tab['text'] . ''; if ($key == 'edit' || $key == 'viewsource') { ?>
      getSkin()->makeListItem($key, $tab); + $html = $this->getSkin()->makeListItem($key, $tab); + // incredibly illegal hack that un-escapes only the outermost span tags + // "outermost" is guaranteed by the use of a greedy qualifier + echo preg_replace( '%<span>(.*)</span>%', '$1', $html ); } ?>
      diff --git a/resources/css/main.css b/resources/css/main.css index 2c3ab38..b006832 100644 --- a/resources/css/main.css +++ b/resources/css/main.css @@ -565,16 +565,34 @@ dl dt { display: inline-block; margin: 5px; border-radius: 50px; - padding: .75em 1.5em; + 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: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; @@ -733,7 +751,7 @@ dl dt { /* @embed */ background-image: url('../Edit-pencil.png'); background-size: 25px 25px; - background-position: 12.5px center; /* TODO: change to center center if no pencil menu */ + background-position: 12.5px center; background-repeat: no-repeat; }