mediawiki-extensions-Discus.../tests/cases/timestamp-format-switch/timestamp-format-switch-formatted-mobile.html
Bartosz Dziewoński 04cfffe323 Move visualenhancements metadata and some buttons outside of <h2>
We wrap a `<div>` tag around the `<h2>`, and move some elements there.
The markup is inspired by and compatible with my proposal for T13555.

The "ext-discussiontools-init-section" class is moved to the `<div>`.

A small patch is needed in MobileFrontend to preserve the section
collapsing functionality: I11bff21e81046898ca63f3f432797129fa70ad88.

The following elements are now outside of `<h2>`:
* Metadata bar
* Subscribe button
* Ellipsis menu (only shown on mobile)

The following elements are sadly still inside of `<h2>`:
* Subscribe links (only shown on desktop)
* Section edit links from MediaWiki core
Trying to move them mucks up the CSS too much. I hope we can resolve
this later as a part of the work on T13555.

Depends-On: I11bff21e81046898ca63f3f432797129fa70ad88
Bug: T314714
Change-Id: I0bbdcfa02c334858737855349d7a35746de1d8f2
2022-11-10 23:35:40 +01:00

49 lines
10 KiB
HTML

<div class="mw-parser-output">
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span class="ext-discussiontools-init-section-subscribe mw-editsection-like"><span class="ext-discussiontools-init-section-subscribe-bracket">[</span><a href="" class="ext-discussiontools-init-section-subscribe-link" role="button" tabindex="0" title="(discussiontools-topicsubscription-button-subscribe-tooltip)">(discussiontools-topicsubscription-button-subscribe)</a><span class="ext-discussiontools-init-section-subscribe-bracket">]</span></span><span class="mw-headline" id="Test_past" data-mw-thread-id="h-Test_past-2022-07-10T00:00:00.000Z"><span data-mw-comment-start="" id="h-Test_past-2022-07-10T00:00:00.000Z"></span>Test past<span data-mw-comment-end="h-Test_past-2022-07-10T00:00:00.000Z"></span></span></h2><span class='ext-discussiontools-init-section-ellipsisButton oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-buttonWidget' data-ooui='{"_":"OO.ui.ButtonMenuSelectWidget","rel":["nofollow"],"framed":false,"icon":"ellipsis","classes":["ext-discussiontools-init-section-ellipsisButton"]}'><a role='button' tabindex='0' rel='nofollow' class='oo-ui-buttonElement-button'><span class='oo-ui-iconElement-icon oo-ui-icon-ellipsis'></span><span class='oo-ui-labelElement-label'></span><span class='oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator'></span></a></span><div class="ext-discussiontools-init-section-bar"><div class="ext-discussiontools-init-section-metadata"><span class='ext-discussiontools-init-section-metaitem ext-discussiontools-init-section-timestampLabel'>(discussiontools-topicheader-latestcomment: <a href="#c-Matma_Rex-2022-07-10T00:00:00.000Z-Test_past">1657411200</a>)</span><span class='ext-discussiontools-init-section-metaitem ext-discussiontools-init-section-commentCountLabel'>(discussiontools-topicheader-commentcount: 1)</span><span class='ext-discussiontools-init-section-metaitem ext-discussiontools-init-section-authorCountLabel'>(discussiontools-topicheader-authorcount: 1)</span></div><div class="ext-discussiontools-init-section-actions"><span class='ext-discussiontools-init-section-subscribeButton oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-labelElement oo-ui-flaggedElement-progressive oo-ui-buttonWidget' data-ooui='{"_":"OO.ui.ButtonWidget","rel":["nofollow"],"framed":false,"icon":"bellOutline","label":"(discussiontools-topicsubscription-button-subscribe-label)","title":"(discussiontools-topicsubscription-button-subscribe-tooltip)","flags":["progressive"],"classes":["ext-discussiontools-init-section-subscribeButton"]}'><a role='button' title='(discussiontools-topicsubscription-button-subscribe-tooltip)' tabindex='0' rel='nofollow' class='oo-ui-buttonElement-button'><span class='oo-ui-iconElement-icon oo-ui-icon-bellOutline oo-ui-image-progressive'></span><span class='oo-ui-labelElement-label'>(discussiontools-topicsubscription-button-subscribe-label)</span><span class='oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-progressive'></span></a></span></div></div></div>
<p><span data-mw-comment-start="" id="c-Matma_Rex-2022-07-10T00:00:00.000Z-Test_past"></span>Hello from the past! <a href="http://localhost/wiki/User:Matma_Rex" title="User:Matma Rex">Matma Rex</a> (<a href="http://localhost/wiki/User_talk:Matma_Rex" title="User talk:Matma Rex">talk</a>) 00:00, 10 July 2022 (UTC)<span class="ext-discussiontools-init-replylink-buttons" data-mw-thread-id="c-Matma_Rex-2022-07-10T00:00:00.000Z-Test_past"><span class="ext-discussiontools-init-replybutton oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-labelElement oo-ui-flaggedElement-progressive oo-ui-buttonWidget" data-ooui='{"_":"OO.ui.ButtonWidget","rel":["nofollow"],"framed":false,"icon":"share","label":"(discussiontools-replybutton)","flags":["progressive"],"classes":["ext-discussiontools-init-replybutton"]}'><a role="button" tabindex="0" rel="nofollow" class="oo-ui-buttonElement-button"><span class="oo-ui-iconElement-icon oo-ui-icon-share oo-ui-image-progressive"></span><span class="oo-ui-labelElement-label">(discussiontools-replybutton)</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-progressive"></span></a></span><span class="ext-discussiontools-init-replylink-bracket">[</span><a class="ext-discussiontools-init-replylink-reply" role="button" tabindex="0" href="">(discussiontools-replylink)</a><span class="ext-discussiontools-init-replylink-bracket">]</span></span><span data-mw-comment-end="c-Matma_Rex-2022-07-10T00:00:00.000Z-Test_past"></span>
</p>
<div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2><span class="ext-discussiontools-init-section-subscribe mw-editsection-like"><span class="ext-discussiontools-init-section-subscribe-bracket">[</span><a href="" class="ext-discussiontools-init-section-subscribe-link" role="button" tabindex="0" title="(discussiontools-topicsubscription-button-subscribe-tooltip)">(discussiontools-topicsubscription-button-subscribe)</a><span class="ext-discussiontools-init-section-subscribe-bracket">]</span></span><span class="mw-headline" id="Test_future" data-mw-thread-id="h-Test_future-20220715000000"><span data-mw-comment-start="" id="h-Test_future-20220715000000"></span>Test future<span data-mw-comment-end="h-Test_future-20220715000000"></span></span></h2><span class='ext-discussiontools-init-section-ellipsisButton oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-buttonWidget' data-ooui='{"_":"OO.ui.ButtonMenuSelectWidget","rel":["nofollow"],"framed":false,"icon":"ellipsis","classes":["ext-discussiontools-init-section-ellipsisButton"]}'><a role='button' tabindex='0' rel='nofollow' class='oo-ui-buttonElement-button'><span class='oo-ui-iconElement-icon oo-ui-icon-ellipsis'></span><span class='oo-ui-labelElement-label'></span><span class='oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator'></span></a></span><div class="ext-discussiontools-init-section-bar"><div class="ext-discussiontools-init-section-metadata"><span class='ext-discussiontools-init-section-metaitem ext-discussiontools-init-section-timestampLabel'>(discussiontools-topicheader-latestcomment: <a href="#c-Matma_Rex-20220715000000-Test_future">1657843200</a>)</span><span class='ext-discussiontools-init-section-metaitem ext-discussiontools-init-section-commentCountLabel'>(discussiontools-topicheader-commentcount: 1)</span><span class='ext-discussiontools-init-section-metaitem ext-discussiontools-init-section-authorCountLabel'>(discussiontools-topicheader-authorcount: 1)</span></div><div class="ext-discussiontools-init-section-actions"><span class='ext-discussiontools-init-section-subscribeButton oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-labelElement oo-ui-flaggedElement-progressive oo-ui-buttonWidget' data-ooui='{"_":"OO.ui.ButtonWidget","rel":["nofollow"],"framed":false,"icon":"bellOutline","label":"(discussiontools-topicsubscription-button-subscribe-label)","title":"(discussiontools-topicsubscription-button-subscribe-tooltip)","flags":["progressive"],"classes":["ext-discussiontools-init-section-subscribeButton"]}'><a role='button' title='(discussiontools-topicsubscription-button-subscribe-tooltip)' tabindex='0' rel='nofollow' class='oo-ui-buttonElement-button'><span class='oo-ui-iconElement-icon oo-ui-icon-bellOutline oo-ui-image-progressive'></span><span class='oo-ui-labelElement-label'>(discussiontools-topicsubscription-button-subscribe-label)</span><span class='oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-progressive'></span></a></span></div></div></div>
<p><span data-mw-comment-start="" id="c-Matma_Rex-20220715000000-Test_future"></span>Hello from the future! <a href="http://localhost/wiki/User:Matma_Rex" title="User:Matma Rex">Matma Rex</a> (<a href="http://localhost/wiki/User_talk:Matma_Rex" title="User talk:Matma Rex">talk</a>) 00:00, 15 July 2022 (UTC)<span class="ext-discussiontools-init-replylink-buttons" data-mw-thread-id="c-Matma_Rex-20220715000000-Test_future"><span class="ext-discussiontools-init-replybutton oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-labelElement oo-ui-flaggedElement-progressive oo-ui-buttonWidget" data-ooui='{"_":"OO.ui.ButtonWidget","rel":["nofollow"],"framed":false,"icon":"share","label":"(discussiontools-replybutton)","flags":["progressive"],"classes":["ext-discussiontools-init-replybutton"]}'><a role="button" tabindex="0" rel="nofollow" class="oo-ui-buttonElement-button"><span class="oo-ui-iconElement-icon oo-ui-icon-share oo-ui-image-progressive"></span><span class="oo-ui-labelElement-label">(discussiontools-replybutton)</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-progressive"></span></a></span><span class="ext-discussiontools-init-replylink-bracket">[</span><a class="ext-discussiontools-init-replylink-reply" role="button" tabindex="0" href="">(discussiontools-replylink)</a><span class="ext-discussiontools-init-replylink-bracket">]</span></span><span data-mw-comment-end="c-Matma_Rex-20220715000000-Test_future"></span>
</p>
</div>
<!--__DTLATESTCOMMENTPAGE__{"id":"c-Matma_Rex-20220715000000-Test_future","timestamp":"20220715000000","author":"Matma Rex","heading":{"headingLevel":2,"name":"h-Matma_Rex-20220715000000","type":"heading","level":0,"id":"h-Test_future-20220715000000","replies":["c-Matma_Rex-20220715000000-Test_future"],"text":"Test future","linkableTitle":"Test future"}}__--><!--__DTHASLEDECONTENT__-->
<pre>
{
"wgDiscussionToolsPageThreads": [
{
"headingLevel": 2,
"name": "h-Matma_Rex-2022-07-10T00:00:00.000Z",
"type": "heading",
"level": 0,
"id": "h-Test_past-2022-07-10T00:00:00.000Z",
"replies": [
{
"timestamp": "2022-07-10T00:00:00.000Z",
"author": "Matma Rex",
"type": "comment",
"level": 1,
"id": "c-Matma_Rex-2022-07-10T00:00:00.000Z-Test_past",
"replies": []
}
]
},
{
"headingLevel": 2,
"name": "h-Matma_Rex-20220715000000",
"type": "heading",
"level": 0,
"id": "h-Test_future-20220715000000",
"replies": [
{
"timestamp": "20220715000000",
"author": "Matma Rex",
"type": "comment",
"level": 1,
"id": "c-Matma_Rex-20220715000000-Test_future",
"replies": []
}
]
}
]
}
</pre>