Merge "Make the tabs scrollable horizontally"
This commit is contained in:
commit
48c3aa0662
|
@ -34,9 +34,11 @@
|
||||||
{{{taglinehtml}}}
|
{{{taglinehtml}}}
|
||||||
</div>
|
</div>
|
||||||
{{#tabs}}
|
{{#tabs}}
|
||||||
{{#items}}
|
<div class="minerva__tab-container">
|
||||||
<a href="{{href}}" rel="{{rel}}" class="minerva__tab {{class}}">{{text}}</a>
|
{{#items}}
|
||||||
{{/items}}
|
<a href="{{href}}" rel="{{rel}}" class="minerva__tab {{class}}">{{text}}</a>
|
||||||
|
{{/items}}
|
||||||
|
</div>
|
||||||
{{/tabs}}
|
{{/tabs}}
|
||||||
{{{subtitle}}}
|
{{{subtitle}}}
|
||||||
{{{pageactionshtml}}}
|
{{{pageactionshtml}}}
|
||||||
|
|
|
@ -1,23 +1,31 @@
|
||||||
.minerva__tab {
|
.minerva__tab-container {
|
||||||
font-size: @taglineFontSize;
|
display: flex;
|
||||||
margin: 0 10px 1px 0;
|
flex-wrap: nowrap;
|
||||||
color: @colorGray5;
|
overflow-x: auto;
|
||||||
font-weight: bold;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&:visited,
|
.minerva__tab {
|
||||||
&:hover,
|
font-size: @taglineFontSize;
|
||||||
&:active,
|
margin: 0 10px 1px 0;
|
||||||
&.new,
|
|
||||||
&.new:visited,
|
|
||||||
&.new:active,
|
|
||||||
&.new:hover {
|
|
||||||
color: @colorGray5;
|
color: @colorGray5;
|
||||||
text-decoration: none;
|
font-weight: bold;
|
||||||
}
|
padding-bottom: 6px;
|
||||||
// note core doesn't use BEM.
|
display: inline-block;
|
||||||
&.selected {
|
flex: 0 0 auto;
|
||||||
border-bottom: (@pageActionBorder * 2) solid @colorGray5;
|
|
||||||
|
&:visited,
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&.new,
|
||||||
|
&.new:visited,
|
||||||
|
&.new:active,
|
||||||
|
&.new:hover {
|
||||||
|
color: @colorGray5;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// note core doesn't use BEM.
|
||||||
|
&.selected {
|
||||||
|
border-bottom: (@pageActionBorder * 2) solid @colorGray5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -294,6 +294,28 @@
|
||||||
} );
|
} );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* When tabs are present and one is selected, scroll the selected tab into view.
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
function initTabsScrollPosition() {
|
||||||
|
var selectedTabSelector = '.minerva__tab.selected',
|
||||||
|
$selectedTab;
|
||||||
|
if ( window.pageYOffset ) {
|
||||||
|
// The user has already scrolled down the page.
|
||||||
|
// Calling scrollIntoView() below would force the page to
|
||||||
|
// scroll back all the way up. That is undesirable.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$selectedTab = $( selectedTabSelector );
|
||||||
|
if ( $selectedTab.length === 1 ) {
|
||||||
|
$selectedTab[ 0 ].scrollIntoView( {
|
||||||
|
block: 'end', // does nothing since we're already at the top of the page
|
||||||
|
inline: 'center' // center horizontally
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$( function () {
|
$( function () {
|
||||||
var toolbarElement = document.querySelector( Toolbar.selector );
|
var toolbarElement = document.querySelector( Toolbar.selector );
|
||||||
// Update anything else that needs enhancing (e.g. watchlist)
|
// Update anything else that needs enhancing (e.g. watchlist)
|
||||||
|
@ -307,6 +329,7 @@
|
||||||
}
|
}
|
||||||
initRedlinksCta();
|
initRedlinksCta();
|
||||||
initUserRedLinks();
|
initUserRedLinks();
|
||||||
|
initTabsScrollPosition();
|
||||||
// Setup the issues banner on the page
|
// Setup the issues banner on the page
|
||||||
// Pages which dont exist (id 0) cannot have issues
|
// Pages which dont exist (id 0) cannot have issues
|
||||||
if ( !page.isMissing ) {
|
if ( !page.isMissing ) {
|
||||||
|
|
Loading…
Reference in New Issue