From af5565f4902427d30cf819a3b922d45c14f74666 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 2 Mar 2021 17:16:24 -0500 Subject: [PATCH 1/7] feat: implement collapsible sections --- README.md | 1 + includes/Partials/BodyContent.php | 248 ++++++++++++++++++ includes/SkinCitizen.php | 56 +++- includes/templates/skin.mustache | 2 +- .../skins.citizen.icons/shared/collapse.svg | 7 + .../collapsibleSections.js | 21 ++ ...ns.citizen.styles.collapsiblesections.less | 54 ++++ skin.json | 28 ++ 8 files changed, 405 insertions(+), 12 deletions(-) create mode 100644 includes/Partials/BodyContent.php create mode 100644 resources/skins.citizen.icons/shared/collapse.svg create mode 100644 resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js create mode 100644 resources/skins.citizen.styles.collapsiblesections/skins.citizen.styles.collapsiblesections.less diff --git a/README.md b/README.md index 9084e72e..c3ad5d0a 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ Note that: Name | Description | Values | Default :--- | :--- | :--- | :--- `$wgCitizenThemeDefault` | The default theme of the skin | `auto` - switch between light and dark according to OS/browser settings; `light`; `dark` | `auto` +`$wgCitizenEnableCollapsibleSections` | Enables or disable collapsible sections on content pages | `true` - enable; `false` - disable | `true` `$wgCitizenShowPageTools` | The condition of page tools visibility | `true` - always visible; `login` - visible to logged-in users; `permission` - visible to users with the right permissions | `true` `$wgCitizenEnableDrawerSubSearch` | Enables the drawer search box for menu entries | `true` - enable; `false` - disable | `false` `$wgCitizenPortalAttach` | Label of the portal to attach links to upload and special pages to | string | `first` diff --git a/includes/Partials/BodyContent.php b/includes/Partials/BodyContent.php new file mode 100644 index 00000000..a64bcc89 --- /dev/null +++ b/includes/Partials/BodyContent.php @@ -0,0 +1,248 @@ +. + * + * @file + * @ingroup Skins + */ + +declare( strict_types=1 ); + +namespace Citizen\Partials; + +use DOMDocument; +use DOMElement; +use DOMXpath; +use Exception; +use Html; +use Skin; + +final class BodyContent extends Partial { + + /** + * The code below is largely based on the extension MobileFrontend + * All credits go to the author and contributors of the project + */ + + /** + * Class name for collapsible section wrappers + */ + public const STYLE_COLLAPSIBLE_SECTION_CLASS = 'section-collapsible'; + + /** + * List of tags that could be considered as section headers. + * @var array + */ + private $topHeadingTags = [ "h1", "h2", "h3", "h4", "h5", "h6 "]; + + public function buildBodyContent( $out ) { + $printSource = Html::rawElement( 'div', [ 'class' => 'printfooter' ], $this->skin->printSource() ); + $htmlBodyContent = $bodyContent = $out->getHTML() . "\n" . $printSource; + $title = $out->getTitle(); + + // Check if it is not the main page + if ( !$title->isMainPage() ) { + $doc = new DOMDocument; + $doc->loadHTML( $bodyContent ); + + // Make top level sections + $this->makeSections( $doc, $this->getTopHeadings( $doc ) ); + // Mark subheadings + $this->markSubHeadings( $this->getSubHeadings( $doc ) ); + + $htmlBodyContent = $doc->saveHTML(); + } + + $newbodyContent = $this->skin->wrapHTMLPublic( $title, $htmlBodyContent ); + + return $newbodyContent; + } + + /** + * Actually splits splits the body of the document into sections + * + * @param DOMElement $body representing the HTML of the current article. In the HTML the sections + * should not be wrapped. + * @param DOMElement[] $headings The headings returned by + * @see MobileFormatter::getHeadings + */ + private function makeSections( DOMDocument $doc, array $headings ) { + $xpath = new DOMXpath( $doc ); + $containers = $xpath->query( 'body/div[@class="mw-parser-output"][1]' ); + + // Return if no parser output is found + if ( !$containers->length ) { + return; + } + + $container = $containers->item( 0 ); + $containerChild = $container->firstChild; + $firstHeading = reset( $headings ); + $firstHeadingName = $firstHeading ? $firstHeading->nodeName : false; + $sectionNumber = 0; + $sectionBody = $this->createSectionBodyElement( $doc, $sectionNumber, false ); + + while ( $containerChild ) { + $node = $containerChild; + $containerChild = $containerChild->nextSibling; + + // If we've found a top level heading, insert the previous section if + // necessary and clear the container div. + // Note well the use of DOMNode#nodeName here. Only DOMElement defines + // DOMElement#tagName. So, if there's trailing text - represented by + // DOMText - then accessing #tagName will trigger an error. + if ( $node->nodeName === $firstHeadingName ) { + // The heading we are transforming is always 1 section ahead of the + // section we are currently processing + /** @phan-suppress-next-line PhanTypeMismatchArgument DOMNode vs. DOMElement */ + $this->prepareHeading( $doc, $node, $sectionNumber + 1 ); + // Insert the previous section body and reset it for the new section + $container->insertBefore( $sectionBody, $node ); + + $sectionNumber += 1; + $sectionBody = $this->createSectionBodyElement( $doc, $sectionNumber ); + continue; + } + + // If it is not a top level heading, keep appending the nodes to the + // section body container. + $sectionBody->appendChild( $node ); + } + + // Append the last section body. + $container->appendChild( $sectionBody ); + + return $doc; + } + + /** + * Prepare section headings, add required classes + * + * @param DOMDocument $doc + * @param DOMElement $heading + * @param int $sectionNumber + * @param bool $isCollapsible + */ + private function prepareHeading( DOMDocument $doc, DOMElement $heading, $sectionNumber ) { + $className = $heading->hasAttribute( 'class' ) ? $heading->getAttribute( 'class' ) . ' ' : ''; + $heading->setAttribute( 'class', $className . 'section-heading' ); + + // prepend indicator - this avoids a reflow by creating a placeholder for a toggling indicator + $indicator = $doc->createElement( 'div' ); + $indicator->setAttribute( 'class', 'section-toggle' ); + $indicator->setAttribute( 'role', 'button' ); + $heading->insertBefore( $indicator, $heading->firstChild ); + } + + /** + * Creates a Section body element + * + * @param DOMDocument $doc + * @param int $sectionNumber + * @param bool $isCollapsible + * + * @return DOMElement + */ + private function createSectionBodyElement( DOMDocument $doc, $sectionNumber ) { + $sectionBody = $doc->createElement( 'section' ); + $sectionBody->setAttribute( 'class', self::STYLE_COLLAPSIBLE_SECTION_CLASS ); + $sectionBody->setAttribute( 'id', 'section-collapsible-' . $sectionNumber ); + return $sectionBody; + } + + /** + * Gets top headings in the document. + * + * Note well that the rank order is defined by the + * MobileFormatter#topHeadingTags property. + * + * @param DOMElement $doc + * @return array An array first is the highest rank headings + */ + private function getTopHeadings( DOMDocument $doc ): array { + $headings = []; + + foreach ( $this->topHeadingTags as $tagName ) { + $allTags = $doc->getElementsByTagName( $tagName ); + + foreach ( $allTags as $el ) { + if ( $el->parentNode->getAttribute( 'class' ) !== 'toctitle' ) { + $headings[] = $el; + } + } + if ( $headings ) { + return $headings; + } + + } + + return $headings; + } + + /** + * Marks the subheadings for the approiate styles by adding + * the section-subheading class to each of them, if it + * hasn't already been added. + * + * FIXME: in-block isn't semantic in that it isn't + * obviously connected to being editable. + * + * @param DOMElement[] $headings Heading elements + */ + protected function markSubHeadings( array $headings ) { + foreach ( $headings as $heading ) { + $class = $heading->getAttribute( 'class' ); + if ( strpos( $class, 'section-subheading' ) === false ) { + $heading->setAttribute( + 'class', + ltrim( $class . ' section-subheading' ) + ); + } + } + } + + /** + * Gets all subheadings in the document in rank order. + * + * @param DOMElement $body + * @return DOMElement[] + */ + private function getSubHeadings( DOMDocument $doc ): array { + $found = false; + $subheadings = []; + foreach ( $this->topHeadingTags as $tagName ) { + $allTags = $doc->getElementsByTagName( $tagName ); + $elements = []; + foreach ( $allTags as $el ) { + if ( $el->parentNode->getAttribute( 'class' ) !== 'toctitle' ) { + $elements[] = $el; + } + } + + if ( $elements ) { + if ( !$found ) { + $found = true; + } else { + $subheadings = array_merge( $subheadings, $elements ); + } + } + } + + return $subheadings; + } +} diff --git a/includes/SkinCitizen.php b/includes/SkinCitizen.php index 7e77af0d..4cc084aa 100644 --- a/includes/SkinCitizen.php +++ b/includes/SkinCitizen.php @@ -22,6 +22,7 @@ */ use Citizen\GetConfigTrait; +use Citizen\Partials\BodyContent; use Citizen\Partials\Drawer; use Citizen\Partials\Footer; use Citizen\Partials\Header; @@ -51,6 +52,7 @@ class SkinCitizen extends SkinMustache { public function __construct( $options = [] ) { $skin = $this; $out = $skin->getOutput(); + $title = $out->getTitle(); $metadata = new Metadata( $this ); $skinTheme = new Theme( $this ); @@ -60,6 +62,35 @@ class SkinCitizen extends SkinMustache { // Theme handler $skinTheme->setSkinTheme( $options ); + // Only load in content pages + if ( $title->isContentPage() ) { + // Load Citizen collapsible sections modules if enabled + if ( $this->getConfigValue( 'CitizenEnableCollapsibleSections' ) === true ) { + $options['scripts'] = array_merge( + $options['scripts'], + [ 'skins.citizen.scripts.collapsiblesections' ] + ); + $options['styles'] = array_merge( + $options['styles'], + [ + 'skins.citizen.styles.collapsiblesections', + 'skins.citizen.icons.collapsiblesections' + ] + ); + } + + // Load table of content script if ToC presents + if ( $out->isTOCEnabled() ) { + // Add class to body that notifies the page has TOC + $out->addBodyClasses( 'skin-citizen-has-toc' ); + // Disabled style condition loading due to pop in + $options['scripts'] = array_merge( + $options['scripts'], + [ 'skins.citizen.scripts.toc' ] + ); + } + } + // Load Citizen search suggestion styles if enabled if ( $this->getConfigValue( 'CitizenEnableSearch' ) === true ) { $options['styles'] = array_merge( @@ -91,17 +122,6 @@ class SkinCitizen extends SkinMustache { ); } - // Load table of content script if ToC presents - if ( $out->isTOCEnabled() ) { - // Add class to body that notifies the page has TOC - $out->addBodyClasses( 'skin-citizen-has-toc' ); - // Disabled style condition loading due to pop in - $options['scripts'] = array_merge( - $options['scripts'], - [ 'skins.citizen.scripts.toc' ] - ); - } - $options['templateDirectory'] = __DIR__ . '/templates'; parent::__construct( $options ); } @@ -116,6 +136,7 @@ class SkinCitizen extends SkinMustache { $header = new Header( $this ); $drawer = new Drawer( $this ); + $bodycontent = new BodyContent( $this ); $footer = new Footer( $this ); $tools = new PageTools( $this ); @@ -161,6 +182,8 @@ class SkinCitizen extends SkinMustache { 'msg-tagline' => $this->msg( 'tagline' )->text(), + 'html-body-content-new' => $bodycontent->buildBodyContent( $out ), + 'data-footer' => $footer->getFooterData(), ]; } @@ -201,6 +224,17 @@ class SkinCitizen extends SkinMustache { return parent::buildContentNavigationUrls(); } + /** + * Change access to public, as it is used in partials + * + * @param $title + * @param $html + * @return array + */ + final public function wrapHTMLPublic( $title, $html ) { + return parent::wrapHTML( $title, $html ); + } + /** * @param string $label to be used to derive the id and human readable label of the menu * If the key has an entry in the constant MENU_LABEL_KEYS then that message will be used for the diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache index 243569eb..af3552fb 100644 --- a/includes/templates/skin.mustache +++ b/includes/templates/skin.mustache @@ -39,7 +39,7 @@
{{{html-subtitle}}}
{{#html-undelete-link}}
{{{html-undelete-link}}}
{{/html-undelete-link}} - {{{html-body-content}}} + {{{html-body-content-new}}} {{{html-categories}}}
diff --git a/resources/skins.citizen.icons/shared/collapse.svg b/resources/skins.citizen.icons/shared/collapse.svg new file mode 100644 index 00000000..9bbf6622 --- /dev/null +++ b/resources/skins.citizen.icons/shared/collapse.svg @@ -0,0 +1,7 @@ + + + + collapse + + + diff --git a/resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js b/resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js new file mode 100644 index 00000000..1671de32 --- /dev/null +++ b/resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js @@ -0,0 +1,21 @@ + + +function main() { + var collSection = document.getElementsByClassName( 'section-collapsible' ), + collToggle = document.getElementsByClassName( 'section-toggle' ), + i, j; + + for (i = 0; i < collToggle.length; i++) { + collToggle[i].addEventListener("click", bindClick( collToggle, collSection, i)); + } +} + +function bindClick( collToggle, collSection, i ) { + return function() { + j = i + 1; + this.classList.toggle( 'section-toggle--collapsed' ); + collSection[j].classList.toggle( 'section-collapsible--collapsed' ); + }; +} + +main(); diff --git a/resources/skins.citizen.styles.collapsiblesections/skins.citizen.styles.collapsiblesections.less b/resources/skins.citizen.styles.collapsiblesections/skins.citizen.styles.collapsiblesections.less new file mode 100644 index 00000000..90ed1bda --- /dev/null +++ b/resources/skins.citizen.styles.collapsiblesections/skins.citizen.styles.collapsiblesections.less @@ -0,0 +1,54 @@ +@import '../variables.less'; + +.section { + &-toggle { + width: 18px; + height: 18px; + padding: 5px; + margin-right: 10px; + background-position: center; + background-repeat: no-repeat; + background-size: 18px; + cursor: pointer; + opacity: var( --opacity-icon-base ); + transition: @transition-opacity-quick, @transition-transform-quick; + + &:hover { + opacity: var( --opacity-icon-base--hover ); + } + + &:active { + opacity: var( --opacity-icon-base--active ); + } + + &--collapsed { + transform: rotate3d( 1, 0, 0, 180deg ); + } + } + + // Fix button alignment + &-heading, + &-subheading { + display: flex; + align-items: center; + } + + &-collapsible { + &--collapsed { + display: none; + } + } +} + +.skin-citizen-dark { + .section-toggle { + filter: invert( 1 ); + } +} + +// Hide toggle when client is noscript +.client-nojs { + .section-toggle { + display: none; + } +} diff --git a/skin.json b/skin.json index 72ddc465..6bfc19f1 100644 --- a/skin.json +++ b/skin.json @@ -139,6 +139,15 @@ "features": [], "styles": [ "resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less" ] }, + "skins.citizen.styles.collapsiblesections": { + "class": "ResourceLoaderSkinModule", + "targets": [ + "desktop", + "mobile" + ], + "features": [], + "styles": [ "resources/skins.citizen.styles.collapsiblesections/skins.citizen.styles.collapsiblesections.less" ] + }, "skins.citizen.scripts": { "packageFiles": [ "resources/skins.citizen.scripts/skin.js", @@ -189,6 +198,11 @@ "resources/skins.citizen.scripts.drawer/drawerSubSearch.js" ] }, + "skins.citizen.scripts.collapsiblesections": { + "scripts": [ + "resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js" + ] + }, "skins.citizen.icons": { "class": "ResourceLoaderImageModule", "selector": "{name}", @@ -306,6 +320,14 @@ "light": "resources/skins.citizen.icons/shared/moon.svg", "dark": "resources/skins.citizen.icons/shared/bright.svg" } + }, + "skins.citizen.icons.collapsiblesections": { + "class": "ResourceLoaderImageModule", + "selector": ".section-toggle", + "useDataURI": false, + "images": { + "collapse": "resources/skins.citizen.icons/shared/collapse.svg" + } } }, "ResourceFileModulePaths": { @@ -619,6 +641,12 @@ "description": "Enables to search the drawer for menu entries", "descriptionmsg": "citizen-config-enabledrawersubsearch", "public": true + }, + "EnableCollapsibleSections": { + "value": true, + "description": "Enables or disable collapsible sections on content pages", + "descriptionmsg": "citizen-config-enablecollapsiblesections", + "public": true } }, "manifest_version": 2 From 669be20879a12703252c8aa57f1a1b45d737937d Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 2 Mar 2021 19:09:39 -0500 Subject: [PATCH 2/7] fix: fix error caused by PHP comments --- includes/Partials/BodyContent.php | 26 ++++++++++++-------------- includes/SkinCitizen.php | 4 ++-- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/includes/Partials/BodyContent.php b/includes/Partials/BodyContent.php index a64bcc89..8d2abad3 100644 --- a/includes/Partials/BodyContent.php +++ b/includes/Partials/BodyContent.php @@ -50,6 +50,12 @@ final class BodyContent extends Partial { */ private $topHeadingTags = [ "h1", "h2", "h3", "h4", "h5", "h6 "]; + /** + * Rebuild the body content + * + * @param string $out OutputPage + * @return string html + */ public function buildBodyContent( $out ) { $printSource = Html::rawElement( 'div', [ 'class' => 'printfooter' ], $this->skin->printSource() ); $htmlBodyContent = $bodyContent = $out->getHTML() . "\n" . $printSource; @@ -68,18 +74,18 @@ final class BodyContent extends Partial { $htmlBodyContent = $doc->saveHTML(); } - $newbodyContent = $this->skin->wrapHTMLPublic( $title, $htmlBodyContent ); + $newBodyContent = $this->skin->wrapHTMLPublic( $title, $htmlBodyContent ); - return $newbodyContent; + return $newBodyContent; } /** * Actually splits splits the body of the document into sections * - * @param DOMElement $body representing the HTML of the current article. In the HTML the sections + * @param DOMElement $doc representing the HTML of the current article. In the HTML the sections * should not be wrapped. * @param DOMElement[] $headings The headings returned by - * @see MobileFormatter::getHeadings + * @return DOMDocument */ private function makeSections( DOMDocument $doc, array $headings ) { $xpath = new DOMXpath( $doc ); @@ -136,7 +142,6 @@ final class BodyContent extends Partial { * @param DOMDocument $doc * @param DOMElement $heading * @param int $sectionNumber - * @param bool $isCollapsible */ private function prepareHeading( DOMDocument $doc, DOMElement $heading, $sectionNumber ) { $className = $heading->hasAttribute( 'class' ) ? $heading->getAttribute( 'class' ) . ' ' : ''; @@ -154,7 +159,6 @@ final class BodyContent extends Partial { * * @param DOMDocument $doc * @param int $sectionNumber - * @param bool $isCollapsible * * @return DOMElement */ @@ -168,10 +172,7 @@ final class BodyContent extends Partial { /** * Gets top headings in the document. * - * Note well that the rank order is defined by the - * MobileFormatter#topHeadingTags property. - * - * @param DOMElement $doc + * @param DOMDocument $doc * @return array An array first is the highest rank headings */ private function getTopHeadings( DOMDocument $doc ): array { @@ -199,9 +200,6 @@ final class BodyContent extends Partial { * the section-subheading class to each of them, if it * hasn't already been added. * - * FIXME: in-block isn't semantic in that it isn't - * obviously connected to being editable. - * * @param DOMElement[] $headings Heading elements */ protected function markSubHeadings( array $headings ) { @@ -219,7 +217,7 @@ final class BodyContent extends Partial { /** * Gets all subheadings in the document in rank order. * - * @param DOMElement $body + * @param DOMDocument $doc * @return DOMElement[] */ private function getSubHeadings( DOMDocument $doc ): array { diff --git a/includes/SkinCitizen.php b/includes/SkinCitizen.php index 4cc084aa..2670e35a 100644 --- a/includes/SkinCitizen.php +++ b/includes/SkinCitizen.php @@ -227,8 +227,8 @@ class SkinCitizen extends SkinMustache { /** * Change access to public, as it is used in partials * - * @param $title - * @param $html + * @param Title $title + * @param string $html body text * @return array */ final public function wrapHTMLPublic( $title, $html ) { From 527692cd99c914ab770a63f29b01d079ac223245 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 2 Mar 2021 19:13:50 -0500 Subject: [PATCH 3/7] fix: fix various javascript error --- .../collapsibleSections.js | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js b/resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js index 1671de32..6be1767a 100644 --- a/resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js +++ b/resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js @@ -1,21 +1,19 @@ - +function bindClick( collToggle, collSection, i, j ) { + return function () { + j = i + 1; + this.classList.toggle( 'section-toggle--collapsed' ); + collSection[ j ].classList.toggle( 'section-collapsible--collapsed' ); + }; +} function main() { var collSection = document.getElementsByClassName( 'section-collapsible' ), collToggle = document.getElementsByClassName( 'section-toggle' ), i, j; - for (i = 0; i < collToggle.length; i++) { - collToggle[i].addEventListener("click", bindClick( collToggle, collSection, i)); + for ( i = 0; i < collToggle.length; i++ ) { + collToggle[ i ].addEventListener( 'click', bindClick( collToggle, collSection, i, j ) ); } } -function bindClick( collToggle, collSection, i ) { - return function() { - j = i + 1; - this.classList.toggle( 'section-toggle--collapsed' ); - collSection[j].classList.toggle( 'section-collapsible--collapsed' ); - }; -} - main(); From fcd796d1e2dbd16b8a9700356fb8758686e1d87e Mon Sep 17 00:00:00 2001 From: github-actions Date: Wed, 3 Mar 2021 00:14:48 +0000 Subject: [PATCH 4/7] ci: lint code to MediaWiki standards Check commit and GitHub actions for more details --- includes/Partials/BodyContent.php | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/includes/Partials/BodyContent.php b/includes/Partials/BodyContent.php index 8d2abad3..11ed2fa1 100644 --- a/includes/Partials/BodyContent.php +++ b/includes/Partials/BodyContent.php @@ -28,9 +28,7 @@ namespace Citizen\Partials; use DOMDocument; use DOMElement; use DOMXpath; -use Exception; use Html; -use Skin; final class BodyContent extends Partial { @@ -48,13 +46,13 @@ final class BodyContent extends Partial { * List of tags that could be considered as section headers. * @var array */ - private $topHeadingTags = [ "h1", "h2", "h3", "h4", "h5", "h6 "]; + private $topHeadingTags = [ "h1", "h2", "h3", "h4", "h5", "h6 " ]; /** * Rebuild the body content * * @param string $out OutputPage - * @return string html + * @return string html */ public function buildBodyContent( $out ) { $printSource = Html::rawElement( 'div', [ 'class' => 'printfooter' ], $this->skin->printSource() ); @@ -196,8 +194,8 @@ final class BodyContent extends Partial { } /** - * Marks the subheadings for the approiate styles by adding - * the section-subheading class to each of them, if it + * Marks the subheadings for the approiate styles by adding + * the section-subheading class to each of them, if it * hasn't already been added. * * @param DOMElement[] $headings Heading elements From 624d896d7308f249d273c4a1f2e3edb1eec38f19 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 2 Mar 2021 19:28:54 -0500 Subject: [PATCH 5/7] refactor: rename variables and modules --- includes/SkinCitizen.php | 8 ++++---- includes/templates/skin.mustache | 2 +- .../sections.js} | 0 .../skins.citizen.styles.sections.less} | 0 skin.json | 10 +++++----- 5 files changed, 10 insertions(+), 10 deletions(-) rename resources/{skins.citizen.scripts.collapsiblesections/collapsibleSections.js => skins.citizen.scripts.sections/sections.js} (100%) rename resources/{skins.citizen.styles.collapsiblesections/skins.citizen.styles.collapsiblesections.less => skins.citizen.styles.sections/skins.citizen.styles.sections.less} (100%) diff --git a/includes/SkinCitizen.php b/includes/SkinCitizen.php index 2670e35a..de28a439 100644 --- a/includes/SkinCitizen.php +++ b/includes/SkinCitizen.php @@ -68,13 +68,13 @@ class SkinCitizen extends SkinMustache { if ( $this->getConfigValue( 'CitizenEnableCollapsibleSections' ) === true ) { $options['scripts'] = array_merge( $options['scripts'], - [ 'skins.citizen.scripts.collapsiblesections' ] + [ 'skins.citizen.scripts.sections' ] ); $options['styles'] = array_merge( $options['styles'], [ - 'skins.citizen.styles.collapsiblesections', - 'skins.citizen.icons.collapsiblesections' + 'skins.citizen.styles.sections', + 'skins.citizen.icons.sections' ] ); } @@ -182,7 +182,7 @@ class SkinCitizen extends SkinMustache { 'msg-tagline' => $this->msg( 'tagline' )->text(), - 'html-body-content-new' => $bodycontent->buildBodyContent( $out ), + 'html-body-content--formatted' => $bodycontent->buildBodyContent( $out ), 'data-footer' => $footer->getFooterData(), ]; diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache index af3552fb..861f84c9 100644 --- a/includes/templates/skin.mustache +++ b/includes/templates/skin.mustache @@ -39,7 +39,7 @@
{{{html-subtitle}}}
{{#html-undelete-link}}
{{{html-undelete-link}}}
{{/html-undelete-link}} - {{{html-body-content-new}}} + {{{html-body-content--formatted}}} {{{html-categories}}}
diff --git a/resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js b/resources/skins.citizen.scripts.sections/sections.js similarity index 100% rename from resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js rename to resources/skins.citizen.scripts.sections/sections.js diff --git a/resources/skins.citizen.styles.collapsiblesections/skins.citizen.styles.collapsiblesections.less b/resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less similarity index 100% rename from resources/skins.citizen.styles.collapsiblesections/skins.citizen.styles.collapsiblesections.less rename to resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less diff --git a/skin.json b/skin.json index 6bfc19f1..85e53ed2 100644 --- a/skin.json +++ b/skin.json @@ -139,14 +139,14 @@ "features": [], "styles": [ "resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less" ] }, - "skins.citizen.styles.collapsiblesections": { + "skins.citizen.styles.sections": { "class": "ResourceLoaderSkinModule", "targets": [ "desktop", "mobile" ], "features": [], - "styles": [ "resources/skins.citizen.styles.collapsiblesections/skins.citizen.styles.collapsiblesections.less" ] + "styles": [ "resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less" ] }, "skins.citizen.scripts": { "packageFiles": [ @@ -198,9 +198,9 @@ "resources/skins.citizen.scripts.drawer/drawerSubSearch.js" ] }, - "skins.citizen.scripts.collapsiblesections": { + "skins.citizen.scripts.sections": { "scripts": [ - "resources/skins.citizen.scripts.collapsiblesections/collapsibleSections.js" + "resources/skins.citizen.scripts.sections/Sections.js" ] }, "skins.citizen.icons": { @@ -321,7 +321,7 @@ "dark": "resources/skins.citizen.icons/shared/bright.svg" } }, - "skins.citizen.icons.collapsiblesections": { + "skins.citizen.icons.sections": { "class": "ResourceLoaderImageModule", "selector": ".section-toggle", "useDataURI": false, From d6b5da3e3b641aa57dafefcbb360b42d4d661ec0 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 2 Mar 2021 19:32:55 -0500 Subject: [PATCH 6/7] feat: tweak section styles --- .../skins.citizen.styles.sections.less | 10 ++++++++++ resources/skins.citizen.styles/common/content.less | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less b/resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less index 90ed1bda..9f83394c 100644 --- a/resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less +++ b/resources/skins.citizen.styles.sections/skins.citizen.styles.sections.less @@ -23,6 +23,16 @@ &--collapsed { transform: rotate3d( 1, 0, 0, 180deg ); + + ~ .mw-headline { + color: var( --color-base ); + } + } + } + + &-heading { + .mw-headline { + transition: @transition-color-quick; } } diff --git a/resources/skins.citizen.styles/common/content.less b/resources/skins.citizen.styles/common/content.less index bda076bb..13d79ff9 100644 --- a/resources/skins.citizen.styles/common/content.less +++ b/resources/skins.citizen.styles/common/content.less @@ -42,7 +42,7 @@ .mw-editsection { display: flex; - margin-left: 10px; + margin-left: auto; a { .resource-loader-icon-link-small; From c466d04f7f6cb2df5b617af1e72c3f51ad05cb16 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 2 Mar 2021 19:35:57 -0500 Subject: [PATCH 7/7] build: bump to 1.4.0 --- skin.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skin.json b/skin.json index 85e53ed2..480d567e 100644 --- a/skin.json +++ b/skin.json @@ -1,6 +1,6 @@ { "name": "Citizen", - "version": "1.3.5", + "version": "1.4.0", "author": [ "[https://www.mediawiki.org/wiki/User:Alistair3149 Alistair3149]", "[https://www.mediawiki.org/wiki/User:Octfx Octfx]"