From 8bca35dec0ac36553f356c91769f350590e3a4bb Mon Sep 17 00:00:00 2001 From: Isarra Date: Tue, 27 Aug 2019 21:22:34 +0000 Subject: [PATCH] Put languages back in sidebar on desktop Partially reverts I148707085059f458512d328c415ea0bf134163f3 plus some random cleanup and stuff Both of the following bugs involve wikibase stuff so I can't actually be entirely sure this resolves them, but I thiiiink it does because it should be killing the offending parts of the above change that caused this? Probably? Bug: T231256 Bug: T231234 Change-Id: Id7c0d90a805450b577271a321572fcd552ecbc3e --- includes/TimelessTemplate.php | 88 ++++++++++++++++++++++++----------- resources/mobile.js | 5 +- resources/screen-common.less | 25 ---------- resources/screen-desktop.less | 25 ++++++++-- resources/screen-mobile.less | 45 ++++-------------- 5 files changed, 93 insertions(+), 95 deletions(-) diff --git a/includes/TimelessTemplate.php b/includes/TimelessTemplate.php index 7481fb7..22c38a2 100644 --- a/includes/TimelessTemplate.php +++ b/includes/TimelessTemplate.php @@ -139,7 +139,7 @@ class TimelessTemplate extends BaseTemplate { 'timeless-more', [ 'extra-classes' => 'tools-inline' ] ) . - $this->getLanguageLinks() . + $this->getVariants() . $this->getPortlet( 'views', $this->pileOfTools['page-primary'], @@ -305,15 +305,19 @@ class TimelessTemplate extends BaseTemplate { * @param string $id * @param string $headerMessage * @param string $content + * @param array $classes * * @return string html */ - protected function getSidebarChunk( $id, $headerMessage, $content ) { + protected function getSidebarChunk( $id, $headerMessage, $content, $classes = [] ) { $html = ''; $html .= Html::rawElement( 'div', - [ 'id' => Sanitizer::escapeId( $id ), 'class' => 'sidebar-chunk' ], + [ + 'id' => Sanitizer::escapeId( $id ), + 'class' => array_merge( [ 'sidebar-chunk' ], $classes ) + ], Html::rawElement( 'h2', [], Html::element( 'span', [], $this->getMsg( $headerMessage )->text() @@ -698,11 +702,21 @@ class TimelessTemplate extends BaseTemplate { 'id' => 't-pagelog' ]; } + + // Mobile toggles $pileOfTools['more'] = [ 'text' => $this->getMsg( 'timeless-more' )->text(), 'id' => 'ca-more', 'class' => 'dropdown-toggle' ]; + if ( $this->data['language_urls'] !== false || $this->pileOfTools['variants'] + || isset( $this->otherProjects ) ) { + $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. @@ -864,28 +878,15 @@ class TimelessTemplate extends BaseTemplate { * * @return string html */ - protected function getLanguageLinks() { + protected function getVariants() { $html = ''; - $variants = $this->getPortlet( - 'variants', - $this->pileOfTools['variants'] - ); - $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::rawElement( 'div', [ 'id' => 'languages-inner', 'class' => 'dropdown' ], - $variants . - $languages - ) + if ( $this->pileOfTools['variants'] ) { + $html .= $this->getPortlet( + 'variants-desktop', + $this->pileOfTools['variants'], + 'variants', + [ 'body-extra-classes' => 'dropdown' ] ); } @@ -893,18 +894,51 @@ class TimelessTemplate extends BaseTemplate { } /** - * Interwiki links block if using wikibase for 'in other projects' + * Interwiki links block * * @return string html */ protected function getInterwikiLinks() { $html = ''; - + $variants = ''; + $otherprojects = ''; + $languages = ''; + $show = false; + $variantsOnly = false; + + if ( $this->pileOfTools['variants'] ) { + $variants = $this->getPortlet( + 'variants', + $this->pileOfTools['variants'] + ); + $show = true; + $variantsOnly = true; + } + if ( $this->data['language_urls'] !== false ) { + $languages = $this->getPortlet( + 'lang', + $this->data['language_urls'] ?: [], + 'otherlanguages' + ); + $show = true; + $variantsOnly = false; + } + // if using wikibase for 'in other projects' if ( isset( $this->otherProjects ) ) { + $otherprojects = $this->getPortlet( + 'wikibase-otherprojects', + $this->otherProjects['content'] + ); + $show = true; + $variantsOnly = false; + } + + if ( $show ) { $html .= $this->getSidebarChunk( - 'other-projects', + 'other-languages', 'timeless-projects', - $this->getPortlet( 'wikibase-otherprojects', $this->otherProjects['content'] ) + $variants . $languages . $otherprojects, + $variantsOnly ? [ 'variants-only' ] : [] ); } diff --git a/resources/mobile.js b/resources/mobile.js index da69bda..7cdf7ab 100644 --- a/resources/mobile.js +++ b/resources/mobile.js @@ -26,9 +26,9 @@ $( function () { } } ); $( '#ca-languages' ).on( 'click', function () { - $( '#languages-inner' ).css( 'top', $( '#ca-languages' ).offset().top + 25 ); + $( '#other-languages .sidebar-inner' ).css( 'top', $( '#ca-languages' ).offset().top + 25 ); if ( $( window ).width() < 851 ) { - $( '#languages-inner, #menus-cover' ).fadeToggle( toggleTime ); + $( '#other-languages .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime ); } } ); @@ -36,7 +36,6 @@ $( 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 508720d..0a690b0 100644 --- a/resources/screen-common.less +++ b/resources/screen-common.less @@ -299,31 +299,6 @@ body { .ca-icon( 'images/page-grey' ); } -#ca-languages { - float: right; - margin: 0.25em 0 1em 1em; - - h2 { - .dropdown-header(); - .ca-icon( 'images/languages-grey' ); - 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; diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less index 50d98ba..b88ba1d 100644 --- a/resources/screen-desktop.less +++ b/resources/screen-desktop.less @@ -115,14 +115,20 @@ div.mw-notification-area { } } -#ca-languages { +#p-variants-desktop { + float: right; + margin: 0.25em 0 1em 1em; position: relative; - h2 { + h3 { + .dropdown-header(); + .ca-icon( 'images/languages-grey' ); + font-size: 1em; + font-family: @fonts; + border-bottom: transparent; margin: 0 0 -1em; line-height: 1.5; padding-bottom: 1em; - border-bottom: transparent; } .dropdown { @@ -131,6 +137,11 @@ div.mw-notification-area { .dropdown-pokey(); // Override the mobile thing top: 2.25em !important; + padding-bottom: 2em; + + .selected a { + color: @text; + } } &:hover .dropdown { @@ -138,7 +149,13 @@ div.mw-notification-area { } } -#mw-page-header-links #p-more, +#p-variants, +#other-languages.variants-only, +#mw-page-header-links #p-more { + display: none; +} + +// TODO: use .hidden() for this instead (and unhide on desktop-small) .sidebar-chunk h2 { display: none; } diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less index 815eb54..1c1e640 100644 --- a/resources/screen-mobile.less +++ b/resources/screen-mobile.less @@ -5,6 +5,7 @@ /* Layout */ +#mw-data-after-content, #mw-footer { padding: 0 @content-padding; } @@ -16,10 +17,7 @@ .categories-bottom(); -#catlinks { - padding-bottom: 2em; -} - +#p-variants-desktop, #mw-page-header-links #ca-view, #mw-header-nav-hack, #page-tools h2, @@ -49,10 +47,6 @@ .sidebar-inner, .dropdown { display: none; -} - -.sidebar-inner, -.dropdown { .nav-block(); background: @background; box-shadow: 0 2px 3px 1px rgba( 0, 0, 0, 0.05 ); @@ -167,14 +161,6 @@ h1.firstHeading { margin-right: 1.5em; } -#p-pagetools li { - margin-left: 1.5em; - - &#ca-languages { - margin-left: 1em; - } -} - .tools-inline li a { .ca-icon-only(); } @@ -184,33 +170,20 @@ h1.firstHeading { &:after { margin-left: -0.35em; } -} -#ca-more span, -#ca-languages h2 span { - .ca-icon-only(); - display: inline-block; - overflow: visible; + span { + .ca-icon-only(); + display: inline-block; + overflow: visible; + } } #ca-more span { .background-image-svg( 'images/gear-grey.svg', 'images/gear-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; - } - - &:after { - width: 16px; - } +#ca-languages span { + .background-image-svg( 'images/languages-grey.svg', 'images/languages-grey.png' ); } /* Full-width thumbnails */