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}}
+
{{/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 ) {