From 1d2a9583a573b79046b493d0e8a9beed50f7c4d2 Mon Sep 17 00:00:00 2001 From: Isarra Date: Fri, 19 Jul 2019 23:22:19 +0000 Subject: [PATCH] Move variants and languages into page tools dropdowns Hopefully saner access, also clears up some of the sidebar space. Also forces moving the wikibase other-projects blob into its own blob entirely. Not done: * Pokeys (need to migrate them all to css-only; later patch) * Handling for no languages for wikidata stuff (may not be possible; minerva likewise has no handling) Bug: T213510 Bug: T181309 Change-Id: I148707085059f458512d328c415ea0bf134163f3 --- i18n/en.json | 1 + i18n/qqq.json | 1 + includes/TimelessTemplate.php | 87 +++++++++++++++++++--------------- resources/extensions/Echo.less | 13 ----- resources/mobile.js | 5 +- resources/screen-common.less | 58 +++++++++++++++-------- resources/screen-desktop.less | 30 ++++++++++-- resources/screen-mobile.less | 27 +++++++++-- 8 files changed, 140 insertions(+), 82 deletions(-) diff --git a/i18n/en.json b/i18n/en.json index b7510d7..bce6196 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -19,6 +19,7 @@ "timeless-namespaces": "Namespaces", "timeless-pagetools": "Page actions", "timeless-languages": "Languages", + "timeless-projects": "Other projects", "timeless-sitetitle": "{{int:Sitetitle}}", "timeless.css": "/* CSS placed here will affect users of the Timeless skin */", "timeless.js": "/* Any JavaScript here will be loaded for users using the Timeless skin */" diff --git a/i18n/qqq.json b/i18n/qqq.json index ce6cf51..6550202 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -26,6 +26,7 @@ "timeless-namespaces": "Label for page namespaces and watch tools\n{{Identical|Namespace}}", "timeless-pagetools": "Label for other page tools", "timeless-languages": "Label for the other languages dropdown\n{{Identical|Language}}", + "timeless-projects": "Label for the other projects dropdown", "timeless-sitetitle": "{{ignore}}\nSite title for site banner", "timeless.css": "{{optional}}\nCSS applied to users using Timeless skin.", "timeless.js": "{{optional}}\nJS for users using Timeless skin." diff --git a/includes/TimelessTemplate.php b/includes/TimelessTemplate.php index 07b2dfe..95e8fb8 100644 --- a/includes/TimelessTemplate.php +++ b/includes/TimelessTemplate.php @@ -68,7 +68,7 @@ class TimelessTemplate extends BaseTemplate { ) . Html::rawElement( 'div', [ 'id' => 'mw-related-navigation' ], $this->getPageToolSidebar() . - $this->getInterlanguageLinks() . + $this->getInterwikiLinks() . $this->getCategories() ) . $this->getClear() @@ -122,17 +122,21 @@ class TimelessTemplate extends BaseTemplate { $this->getPortlet( 'namespaces', $this->pileOfTools['namespaces'], - 'timeless-namespaces' + 'timeless-namespaces', + [ 'extra-classes' => 'tools-inline' ] ) . $this->getPortlet( 'more', $this->pileOfTools['more'], - 'timeless-more' + 'timeless-more', + [ 'extra-classes' => 'tools-inline' ] ) . + $this->getLanguageLinks() . $this->getPortlet( 'views', $this->pileOfTools['page-primary'], - 'timeless-pagetools' + 'timeless-pagetools', + [ 'extra-classes' => 'tools-inline' ] ) ) . $this->getClear() . @@ -669,6 +673,9 @@ class TimelessTemplate extends BaseTemplate { } else { $sortedPileOfTools['namespaces'] = $navBlock; } + } elseif ( $navKey == 'variants' ) { + // wat + $sortedPileOfTools['variants'] = $navBlock; } else { $pileOfEditTools = array_merge( $pileOfEditTools, $navBlock ); } @@ -691,15 +698,6 @@ class TimelessTemplate extends BaseTemplate { 'class' => 'dropdown-toggle' ]; - // Only appears in mobile - if ( $this->data['language_urls'] !== false ) { - $pileOfTools['languages'] = [ - 'text' => $this->getMsg( 'timeless-languages' )->escaped(), - 'id' => 'ca-languages', - 'class' => 'dropdown-toggle' - ]; - } - // This is really dumb, and you're an idiot for doing it this way. // Obviously if you're not the idiot who did this, I don't mean you. foreach ( $pileOfEditTools as $navKey => $navBlock ) { @@ -850,41 +848,54 @@ class TimelessTemplate extends BaseTemplate { } /** - * Interlanguage links block, also with variants + * Interlanguage links block, with variants if applicable + * Layout sort of assumes we're using ULS compact language handling + * if there's a lot of languages. * * @return string html */ - protected function getInterlanguageLinks() { + protected function getLanguageLinks() { $html = ''; - $show = false; - $variants = ''; - $projects = ''; - $languages = ''; + $variants = $this->getPortlet( + 'variants', + $this->pileOfTools['variants'] + ); + $languages = $this->getPortlet( + 'lang', + $this->data['language_urls'], + 'otherlanguages' + ); - if ( isset( $this->data['variant_urls'] ) && $this->data['variant_urls'] !== false ) { - $variants = $this->getPortlet( 'variants', $this->data['variant_urls'], true ); - $show = true; - } - // Wikibase thing - if ( isset( $this->otherProjects ) ) { - $projects = $this->getPortlet( 'wikibase-otherprojects', $this->otherProjects['content'] ); - $show = true; - } - if ( $this->data['language_urls'] !== false ) { - $languages = $this->getPortlet( - 'lang', - $this->data['language_urls'] ?: [], - 'otherlanguages' + if ( $this->data['language_urls'] || $this->pileOfTools['variants'] ) { + $html .= Html::rawElement( 'div', [ 'id' => 'ca-languages' ], + Html::rawElement( 'h2', [], + Html::element( 'span', [], $this->getMsg( 'timeless-languages' )->text() ) . + Html::element( 'div', [ 'class' => 'pokey' ] ) + ) . + Html::rawElement( 'div', [ 'id' => 'languages-inner', 'class' => 'dropdown' ], + $variants . + $languages + ) ); - $show = true; } - if ( $show ) { + return $html; + } + + /** + * Interwiki links block if using wikibase for 'in other projects' + * + * @return string html + */ + protected function getInterwikiLinks() { + $html = ''; + + if ( isset( $this->otherProjects ) ) { $html .= $this->getSidebarChunk( - 'other-languages', - 'timeless-languages', - $variants . $languages . $projects + 'other-projects', + 'timeless-projects', + $this->getPortlet( 'wikibase-otherprojects', $this->otherProjects['content'] ) ); } diff --git a/resources/extensions/Echo.less b/resources/extensions/Echo.less index 15481f2..70320ed 100644 --- a/resources/extensions/Echo.less +++ b/resources/extensions/Echo.less @@ -34,13 +34,6 @@ } @media ( min-width: @desktop-small-floor ) { - // Prevent echo badge labels from overflowing over this - // since they're just color:transparent and still right there - #personal { - position: relative; - z-index: 5; - } - #personal-extra { float: left; margin-left: -4.5em; @@ -51,12 +44,6 @@ margin-right: 21em; } } - - #mw-page-header-links #ca-more, - #mw-page-header-links #ca-languages, - .sidebar-chunk h2 { - display: none; - } } @media ( min-width: @desktop-small-floor ) and ( max-width: @desktop-small-width ) { diff --git a/resources/mobile.js b/resources/mobile.js index 7cdf7ab..da69bda 100644 --- a/resources/mobile.js +++ b/resources/mobile.js @@ -26,9 +26,9 @@ $( function () { } } ); $( '#ca-languages' ).on( 'click', function () { - $( '#other-languages .sidebar-inner' ).css( 'top', $( '#ca-languages' ).offset().top + 25 ); + $( '#languages-inner' ).css( 'top', $( '#ca-languages' ).offset().top + 25 ); if ( $( window ).width() < 851 ) { - $( '#other-languages .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime ); + $( '#languages-inner, #menus-cover' ).fadeToggle( toggleTime ); } } ); @@ -36,6 +36,7 @@ $( function () { $( document ).on( 'click touchstart', function ( e ) { if ( $( e.target ).closest( '#menus-cover' ).length > 0 ) { $( '#personal-inner' ).fadeOut( toggleTime ); + $( '#languages-inner' ).fadeOut( toggleTime ); $( '.sidebar-inner' ).fadeOut( toggleTime ); $( '#menus-cover' ).fadeOut( toggleTime ); } diff --git a/resources/screen-common.less b/resources/screen-common.less index f526764..57b1ffd 100644 --- a/resources/screen-common.less +++ b/resources/screen-common.less @@ -20,7 +20,9 @@ body { .box; background: @background; padding: 1em @content-padding 3em; +} +#mw-content-text { /* Set a z-index for the content to group it away from any nav stuff (extensions) - T200148 */ position: relative; z-index: 0; @@ -226,7 +228,8 @@ body { background-position: center 10em; } -#mw-page-header-links { +.tools-inline, +.tools-inline & { div, ul, li { @@ -235,21 +238,21 @@ body { margin: 0; padding: 0; } +} - li { - margin: 0.25em 0 1em; - border-bottom: solid 3px transparent; +.tools-inline li { + margin: 0.25em 0 1em; + border-bottom: solid 3px transparent; - &:hover { - border-bottom-color: @base70; - } + &:hover { + border-bottom-color: @base70; + } - &.selected { - border-bottom-color: @blue; + &.selected { + border-bottom-color: @blue; - a { - color: @text; - } + a { + color: @text; } } } @@ -281,6 +284,30 @@ body { .background-image-svg( 'images/star-filled.svg', 'images/star-filled.png' ); } +#ca-languages { + float: right; + margin: 0.25em 0 1em 1em; + + h2 { + .dropdown-header(); + font-size: 1em; + font-family: @fonts; + border-bottom: transparent; + } + + .dropdown { + display: none; + + h3 { + font-family: @fonts; + } + + .selected a { + color: @text; + } + } +} + #siteNotice { font-size: 95%; margin: 0.5em auto 1.5em; @@ -697,13 +724,6 @@ body :not( :checked ) > .toctogglespan:after { display: inherit; } -/* Language links box should not have an unnecessary scrollbar - * @see https://phabricator.wikimedia.org/T181491 - */ -#p-lang { - overflow: hidden; -} - /* Hidden stuff */ #p-namespaces h3, diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less index 659171c..a97b4d0 100644 --- a/resources/screen-desktop.less +++ b/resources/screen-desktop.less @@ -61,10 +61,6 @@ display: none; } -.dropdown { - display: none !important; -} - #personal { display: inline-block; position: relative; @@ -72,8 +68,9 @@ line-height: 1; .dropdown { - .dropdown-menu(); top: 3.15em; + display: none !important; + .dropdown-menu(); } .pokey { @@ -108,6 +105,29 @@ } } +#ca-languages { + position: relative; + + h2 { + margin: 0 0 -1em; + line-height: 1.5; + padding-bottom: 1em; + border-bottom: transparent; + } + + .dropdown { + display: none !important; + .dropdown-menu(); + right: 0; + // Override the mobile thing + top: 2.25em !important; + } + + &:hover .dropdown { + display: block !important; + } +} + #mw-page-header-links #p-more, .sidebar-chunk h2 { display: none; diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less index 44995c6..6ddda1c 100644 --- a/resources/screen-mobile.less +++ b/resources/screen-mobile.less @@ -211,18 +211,35 @@ h1.firstHeading { &:after { margin-left: -0.35em; } +} - span { - .ca-icon(); - } +#ca-more span, +#ca-languages h2 span { + .ca-icon(); } #ca-more span { .background-image-svg( 'images/gear-grey.svg', 'images/gear-grey.png' ); } -#ca-languages span { - .background-image-svg( 'images/languages-grey.svg', 'images/languages-grey.png' ); +// TODO: consistentify dropdown header rendering and mobile toggle rendering +#ca-languages h2 { + border-bottom: solid 3px transparent; + line-height: 1.5; + margin: 0; + padding: 0; + + &:hover { + border-bottom-color: @base70; + } + + span { + .background-image-svg( 'images/languages-grey.svg', 'images/languages-grey.png' ); + } + + &:after { + width: 16px; + } } /* Full-width thumbnails */