wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-24 06:13:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework tabs to use unordered list

Browse source 
As part of my work on fixing addPortletLink for tabs on mobile (T340728)
we need these tabs to be correctly designated as an unordered list (note,
this is also how they are rendered in Vector).  In addition, update the
styles to account for the link being nested in a list item now

There should be no visual change as a result of this, but if there is
please let me know!!  I will be testing locally in pixel after pushing
to ensure the change is transparent

Bug: T340728
Change-Id: I922558a59aa909ce76079bab057811d76467f644
This commit is contained in:
Steph Toyofuku 2023-12-18 16:22:18 -08:00
parent 3e92e969dd
commit 88caf181e5
2 changed files with 35 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
includes/Skins/skin.mustache
View file

@ -14,11 +14,13 @@
{{{html-minerva-tagline}}}
</div>
{{#data-minerva-tabs}}
<div class="minerva__tab-container">
<ul class="minerva__tab-container">
{{#items}}
<a href="{{href}}" rel="{{rel}}" class="minerva__tab {{class}}" data-event-name="tabs.{{context}}">{{text}}</a>
<li class="minerva__tab {{class}}">
<a href="{{href}}" rel="{{rel}}" data-event-name="tabs.{{context}}">{{text}}</a>
</li>
{{/items}}
</div>
</ul>
{{/data-minerva-tabs}}
{{#data-minerva-page-actions}}
{{>PageActionsMenu}}

36
resources/skins.minerva.amc.styles/tabs.less
View file

@ -5,11 +5,24 @@
.minerva__tab {
font-size: @taglineFontSize;
margin: 0 10px 0 0;
color: @color-subtle;
font-weight: bold;
padding-bottom: 6px;
display: inline-block;
&:last-child {
margin-right: 0;
}
// note core doesn't use BEM.
&.selected {
border-bottom: @border-width-thick @border-style-base #54595d;
}
}
// FIXME - this is to be removed in ~a week once the cache has refreshed and there are no more unnested links
a.minerva__tab {
color: @color-subtle;
&:visited,
&:hover,
&:active {
@ -22,14 +35,25 @@
&.new:active {
color: @color-link-new;
}
}
&:last-child {
margin-right: 0;
// FIXME - once the cache is cleared, remove the li specification and incorporate these back into .minerva__tab
li.minerva__tab {
a {
color: @color-subtle;
}
// note core doesn't use BEM.
&.selected {
border-bottom: @border-width-thick @border-style-base #54595d;
a:visited,
a:hover,
a:active {
text-decoration: none;
}
&.new a,
&.new a:visited,
&.new a:hover,
&.new a:active {
color: @color-link-new;
}
}
}