Skip to content

Explore style tabs #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 8 commits into
base: master
Choose a base branch
from
Draft

Explore style tabs #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ac922ba
Initial version of Explore-style content tabs
Kenny2github Oct 19, 2021
8960e1b
Apply <li> stylings to <a>s instead
Kenny2github Oct 19, 2021
96e93dd
Only show explore tabs to editors
Kenny2github Oct 19, 2021
9eaf741
no reason for this selector to be this specific
Kenny2github Oct 22, 2021
ba06e45
Don't show explore tabs on mobile
Kenny2github Oct 22, 2021
4c72f98
Don't wrap "Page" and "Discussion"
Kenny2github Oct 22, 2021
aab77a6
Add preference to hide explore tabs
Kenny2github Oct 22, 2021
a67e9cd
Use icons that expand into words
Kenny2github Oct 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion ScratchWikiSkin.skin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* @file
* @ingroup Skins
*/

use MediaWiki\MediaWikiServices;

class HTMLColorField extends HTMLFormField {
Expand Down Expand Up @@ -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;
}
}
26 changes: 21 additions & 5 deletions ScratchWikiSkinTemplate.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,10 @@ public function execute() {
<span class="profile-name"><?php if ($wgUser->isAnon()) { ?><?=wfMessage( 'scratchwikiskin-notloggedin' )->inLanguage( $wgLang )->escaped()?><?php } else { ?><?=htmlspecialchars($wgUser->getName())?><?php } ?></span>
</a>
<ul class="dropdown">
<?php foreach ($this->data['personal_urls'] as $key => $tab) { ?>
<?=$this->getSkin()->makeListItem($key, $tab)?>

<?php } ?>

<?php
foreach ($this->data['personal_urls'] as $key => $tab) {
echo $this->getSkin()->makeListItem($key, $tab);
} ?>
</ul>
</li>
</ul>
Expand Down Expand Up @@ -152,6 +151,23 @@ public function execute() {
<div class="right">
<?php if ($this->data['newtalk']) { ?><div class="box"><div class="box-header"><h4><?php $this->html('newtalk') ?></h4></div></div><?php } ?>
<?php if ($this->data['sitenotice']) { ?><div id="siteNotice"><?php $this->html('sitenotice'); ?></div><?php } ?>
<?php if (!$wgUser->isAnon() && !$userOptionsLookup->getOption( $wgUser, 'scratchwikiskin-hide-explore-tabs' )) { ?>
<div class="explore-tabs">
<div class="sub-nav sub-left">
<?php foreach ($this->data['content_actions'] as $key => $tab) {
// I need a span to make icons work
$tab['text'] = '<span>' . $tab['text'] . '</span>';
if ($key == 'edit' || $key == 'viewsource') { ?>
</div><div class="sub-nav sub-right">
<?php }
$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( '%&lt;span&gt;(.*)&lt;/span&gt;%', '<span>$1</span>', $html );
} ?>
</div>
</div>
<?php } ?>
<div class="box">
<div class="box-header">
<?=$this->getIndicators()?>
Expand Down
2 changes: 2 additions & 0 deletions i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
87 changes: 75 additions & 12 deletions resources/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -379,15 +379,15 @@ dl dt {
}

#navigation .logo a:hover,
#navigation .content-actions .dropdown-toggle:hover {
#navigation .content-actions > a:hover {
transition: .15s ease all;
}

#navigation .logo a:hover img {
transform: scale(1.05, 1.05);
}

#navigation .content-actions .dropdown-toggle:hover {
#navigation .content-actions > a:hover {
background-size: 27.5px 27.5px;
}

Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions resources/css/mobile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,7 @@
background-position: center center;
background-repeat: no-repeat;
filter: invert(100%);
}
.explore-tabs {
display: none;
}