diff --git a/includes/skins/minerva.mustache b/includes/skins/minerva.mustache index b64a2de..28ca08f 100644 --- a/includes/skins/minerva.mustache +++ b/includes/skins/minerva.mustache @@ -34,9 +34,11 @@ {{{taglinehtml}}} {{#tabs}} - {{#items}} - {{text}} - {{/items}} +
+ {{#items}} + {{text}} + {{/items}} +
{{/tabs}} {{{subtitle}}} {{{pageactionshtml}}} diff --git a/resources/skins.minerva.amc.styles/tabs.less b/resources/skins.minerva.amc.styles/tabs.less index f700da8..351fd88 100644 --- a/resources/skins.minerva.amc.styles/tabs.less +++ b/resources/skins.minerva.amc.styles/tabs.less @@ -1,23 +1,31 @@ -.minerva__tab { - font-size: @taglineFontSize; - margin: 0 10px 1px 0; - color: @colorGray5; - font-weight: bold; - padding-bottom: 6px; - display: inline-block; +.minerva__tab-container { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; - &:visited, - &:hover, - &:active, - &.new, - &.new:visited, - &.new:active, - &.new:hover { + .minerva__tab { + font-size: @taglineFontSize; + margin: 0 10px 1px 0; color: @colorGray5; - text-decoration: none; - } - // note core doesn't use BEM. - &.selected { - border-bottom: (@pageActionBorder * 2) solid @colorGray5; + font-weight: bold; + padding-bottom: 6px; + display: inline-block; + flex: 0 0 auto; + + &: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; + } } } diff --git a/resources/skins.minerva.scripts/init.js b/resources/skins.minerva.scripts/init.js index 6e5888c..6aadad3 100644 --- a/resources/skins.minerva.scripts/init.js +++ b/resources/skins.minerva.scripts/init.js @@ -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 () { var toolbarElement = document.querySelector( Toolbar.selector ); // Update anything else that needs enhancing (e.g. watchlist) @@ -307,6 +329,7 @@ } initRedlinksCta(); initUserRedLinks(); + initTabsScrollPosition(); // Setup the issues banner on the page // Pages which dont exist (id 0) cannot have issues if ( !page.isMissing ) {