jenkins-bot has submitted this change and it was merged.
Change subject: TUX: Simplify message search results row
......................................................................
TUX: Simplify message search results row
Using flexbox with justify-content: space-between to have the message
start from the left, and button "float" on the right. This greatly
simplifies the code and styles and makes more efficient use of space
in small screens. For browsers which do not support flexbox, the button
will show below the text, which I think is graceful degradation.
This fixes some existing issues such as of vertical alignment, huge size
of the advanced search button in mobile view, and color of the button.
Bug: T146134
Change-Id: I635fad84eda99b1fa4bb5321f17277e6d7d1a4a5
---
M resources/css/ext.translate.messagetable.less
M resources/js/ext.translate.messagetable.js
2 files changed, 13 insertions(+), 24 deletions(-)
Approvals:
Amire80: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/css/ext.translate.messagetable.less
b/resources/css/ext.translate.messagetable.less
index 97ae577..ccfdcb4 100644
--- a/resources/css/ext.translate.messagetable.less
+++ b/resources/css/ext.translate.messagetable.less
@@ -229,26 +229,18 @@
.background-image-svg( '../images/view-proofread-hi.svg',
'../images/view-proofread-hi.png' );
}
-.ext-translate-container .tux-messagelist .tux-message-filter-result {
+.tux-message-filter-result {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
color: #252525;
- line-height: 35px;
- font-size: 15px;
- vertical-align: middle;
border-bottom: 1px solid #C9C9C9;
- margin: 0;
- padding: 0 5px;
-}
-
-.tux-message-filter-result.highlight {
background: #FFF5AA;
-}
-
-.tux-message-filter-result button {
- float: right;
padding: 5px;
- margin: 5px 0;
- font-size: 15px;
- vertical-align: middle;
+
+ & button {
+ background: inherit;
+ }
}
.tux-empty-list {
diff --git a/resources/js/ext.translate.messagetable.js
b/resources/js/ext.translate.messagetable.js
index fd37339..5c9aab3 100644
--- a/resources/js/ext.translate.messagetable.js
+++ b/resources/js/ext.translate.messagetable.js
@@ -325,17 +325,14 @@
$result = this.$container.find(
'.tux-message-filter-result' );
if ( !$result.length ) {
$note = $( '<div>' )
- .addClass( 'nine columns
advanced-search' );
+ .addClass( 'advanced-search' );
- $button = $( '<div>' )
- .addClass( 'three columns' )
- .append( $( '<button>' )
- .addClass( 'mw-ui-button' )
- .text( mw.msg(
'tux-message-filter-advanced-button' ) )
- );
+ $button = $( '<button>' )
+ .addClass( 'mw-ui-button' )
+ .text( mw.msg(
'tux-message-filter-advanced-button' ) );
$result = $( '<div>' )
- .addClass( 'row highlight
tux-message-filter-result' )
+ .addClass( 'tux-message-filter-result' )
.append( $note, $button );
this.$container.prepend( $result );
--
To view, visit https://gerrit.wikimedia.org/r/310296
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I635fad84eda99b1fa4bb5321f17277e6d7d1a4a5
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/Translate
Gerrit-Branch: master
Gerrit-Owner: Nikerabbit <niklas.laxst...@gmail.com>
Gerrit-Reviewer: Amire80 <amir.ahar...@mail.huji.ac.il>
Gerrit-Reviewer: Glaisher <glaisher.w...@gmail.com>
Gerrit-Reviewer: KartikMistry <kartik.mis...@gmail.com>
Gerrit-Reviewer: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
