mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-09-24 02:38:29 +00:00
Refactor "last-modified" bar to use flexbox layout.
Brings the last-modified toolbar (links to history page at the bottom of articles) in line with recent icon changes. Removes the icon class from the toolbar itself and by employing a flexbox layout, reducing the amount of CSS required for this toolbar. Bug: T233172 Change-Id: I27658477aaeed3290aced844caa64fc5e1c34fbd
This commit is contained in:
Jan Drewniak
Jdrewniak
parent
060c163b24
commit
51049c0ceb
|
|
@ -122,12 +122,12 @@ class MinervaTemplate extends BaseTemplate {
|
|||
$action = Action::getActionName( RequestContext::getMain() );
|
||||
if ( isset( $data['historyLink'] ) && $action === 'view' ) {
|
||||
$args = [
|
||||
'clockIconClass' => MinervaUI::iconClass( 'clock', 'before', 'mw-ui-icon-small' ),
|
||||
'clockIconClass' => MinervaUI::iconClass( 'clock', 'mw-ui-icon-small' ),
|
||||
'arrowIconClass' => MinervaUI::iconClass(
|
||||
'expand-gray', 'element',
|
||||
'expand-gray', 'small',
|
||||
// FIXME: `mw-ui-icon-mf-arrow-gray` can be removed from list of classes
|
||||
// when Ibbc706146710a9e31a72b3c2cd4e247d7a227488 lands.
|
||||
'mw-ui-icon-small mf-mw-ui-icon-rotate-anti-clockwise indicator mw-ui-icon-mf-arrow-gray',
|
||||
'mf-mw-ui-icon-rotate-anti-clockwise indicator mw-ui-icon-mf-arrow-gray',
|
||||
// Uses icon in MobileFrontend so must be prefixed mf.
|
||||
// Without MobileFrontend it will not render.
|
||||
// Rather than maintain 2 versions (and variants) of the arrow icon which can conflict
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<div class="last-modified-bar view-border-box footer-element">
|
||||
<div class="content">
|
||||
<div class="last-modified-bar__text truncated-text {{clockIconClass}}">
|
||||
<span class="{{arrowIconClass}}"></span>
|
||||
<a href="{{href}}"
|
||||
<div class="last-modified-bar">
|
||||
<div class="content last-modified-bar__content">
|
||||
<span class="last-modified-bar__icon {{clockIconClass}}"></span>
|
||||
<a class="last-modified-bar__text" href="{{href}}"
|
||||
data-user-name="{{data-user-name}}"
|
||||
data-user-gender="{{data-user-gender}}"
|
||||
data-timestamp="{{data-timestamp}}">
|
||||
<span>{{text}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
<span class="{{arrowIconClass}}"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,4 +63,4 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mw-notification-area" data-mw="interface"></div>
|
||||
<!-- v:8.1.11 -->
|
||||
<!-- v:8.1.12 -->
|
||||
|
|
|
|||
|
|
@ -8,8 +8,33 @@
|
|||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.last-modified-bar__content {
|
||||
align-items: center;
|
||||
.flex-display();
|
||||
}
|
||||
|
||||
// styles that apply to nested footer components
|
||||
footer {
|
||||
.indicator {
|
||||
.client-nojs & {
|
||||
// Certain browsers e.g. Opera Mini do not support css transforms
|
||||
// We assume that we do not run JS on these browsers so hide the chevron
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: cached HTML for T233172. Can be removed 2 weeks after deployment.
|
||||
.content:not( .last-modified-bar__content ) {
|
||||
> div {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
float: right;
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
// links should be separated by same color
|
||||
.hlist {
|
||||
li:after {
|
||||
|
|
@ -18,53 +43,22 @@ footer {
|
|||
}
|
||||
|
||||
.last-modified-bar {
|
||||
margin: 0;
|
||||
border-bottom: solid 1px @footerBorderColor;
|
||||
background-color: @lastModifiedBarBgColor;
|
||||
display: block;
|
||||
color: @lastModifiedBarTextColor;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
padding-top: @icon-padding-md;
|
||||
padding-bottom: @icon-padding-md;
|
||||
}
|
||||
|
||||
// for compatibility with cached HTML. Can be returned 2 weeks after
|
||||
// I53fa45058dbc81c91089840073e03113ff1a4b9c lands.
|
||||
.last-modifier-tagline {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: @font-size-minerva-small;
|
||||
}
|
||||
|
||||
.last-modified-bar__text {
|
||||
@end-padding: @iconGutterWidth + @iconGutterWidth + @iconSize;
|
||||
display: block;
|
||||
padding-right: 40px;
|
||||
padding-left: 0;
|
||||
height: auto;
|
||||
padding-right: @end-padding;
|
||||
padding-left: @icon-padding-md;
|
||||
vertical-align: middle;
|
||||
flex-grow: 1;
|
||||
.truncated-text();
|
||||
|
||||
&:before {
|
||||
float: left;
|
||||
}
|
||||
|
||||
> a,
|
||||
> span > span,
|
||||
> span:last-child {
|
||||
font-size: @font-size-minerva-small;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
top: -@icon-padding-md;
|
||||
right: 0;
|
||||
|
||||
.client-nojs & {
|
||||
// Certain browsers e.g. Opera Mini do not support css transforms
|
||||
// We assume that we do not run JS on these browsers so hide the chevron
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .post-content {
|
||||
|
|
@ -94,12 +88,10 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
footer {
|
||||
.last-modified-bar {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: 1em;
|
||||
.last-modified-bar__text {
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@
|
|||
$bar.find( '.mw-ui-icon-minerva-clock' ).addClass( 'mw-ui-icon-minerva-clock-invert' );
|
||||
$bar.find( '.mw-ui-icon-mf-expand-gray' ).addClass( 'mw-ui-icon-mf-expand-invert' );
|
||||
}
|
||||
msg = $( '<span>' ).html(
|
||||
msg = $( '<span>' ).addClass( 'last-modified-bar__text' ).html(
|
||||
time.getLastModifiedMessage( ts, username, gender, historyUrl )
|
||||
);
|
||||
$lastModifiedLink.replaceWith( msg );
|
||||
|
|
@ -324,7 +324,7 @@
|
|||
initModifiedInfo();
|
||||
initRegistrationInfo();
|
||||
// eslint-disable-next-line no-jquery/no-global-selector
|
||||
initHistoryLink( $( '.last-modified-bar__text a' ) );
|
||||
initHistoryLink( $( 'a.last-modified-bar__text' ) );
|
||||
if ( toolbarElement ) {
|
||||
Toolbar.bind( window, toolbarElement );
|
||||
Toolbar.render( window, toolbarElement );
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@
|
|||
box-sizing: content-box !important;
|
||||
width: @icon-size-md;
|
||||
height: @icon-size-md;
|
||||
flex-basis: @icon-size-md;
|
||||
|
||||
// alignment
|
||||
vertical-align: middle;
|
||||
|
|
@ -108,6 +109,7 @@
|
|||
.mw-ui-icon-small {
|
||||
width: @icon-size-sm;
|
||||
height: @icon-size-sm;
|
||||
flex-basis: @icon-size-sm;
|
||||
line-height: @icon-size-sm;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ class ArticlePage extends MinervaPage {
|
|||
get overlay_category_topic_item_element() { return $( '.topic-title-list li' ); }
|
||||
get red_link_element() { return $( 'a.new' ); }
|
||||
get is_authenticated_element() { return $( 'body.is-authenticated' ); }
|
||||
get last_modified_bar_history_link_element() { return $( '.last-modified-bar__text a[href*=\'Special:History\']' ); }
|
||||
get last_modified_bar_history_link_element() { return $( 'a.last-modified-bar__text[href*=\'Special:History\']' ); }
|
||||
}
|
||||
|
||||
module.exports = new ArticlePage();
|
||||
|
|
|
|||
Loading…
Reference in a new issue