[MediaWiki-commits] [Gerrit] Fix the broken layout of CX source selector in Firefox - change (mediawiki...ContentTranslation)

[jenkins-bot (Code Review)]

jenkins-bot has submitted this change and it was merged.

Change subject: Fix the broken layout of CX source selector in Firefox
......................................................................


Fix the broken layout of CX source selector in Firefox

The input fields were aligned incorrectly. Fix it by wrapping them in
divs and apply grid properly

Change-Id: Ib5cf8661fd481af60eb6d0900d891e1dfd81de58
---
M modules/source/ext.cx.source.selector.js
M modules/source/styles/ext.cx.source.selector.less
M modules/tools/ext.cx.tools.mt.js
3 files changed, 44 insertions(+), 12 deletions(-)

Approvals:
  Amire80: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/modules/source/ext.cx.source.selector.js 
b/modules/source/ext.cx.source.selector.js
index 511c243..ba94286 100644
--- a/modules/source/ext.cx.source.selector.js
+++ b/modules/source/ext.cx.source.selector.js
@@ -127,6 +127,7 @@
                var $actions,
                        $sourceLanguageLabel,
                        $heading, $targetLanguageLabel,
+                       $sourceInputs, $targetInputs,
                        index;
 
                this.$dialog = $( '<div>' )
@@ -178,15 +179,25 @@
                        .append( this.$translateFromButton );
 
                this.$titleList = $( '<datalist>' ).prop( 'id', 'searchresults' 
);
+               $sourceInputs = $( '<div>' )
+                       .addClass( 'cx-sourceselector-dialog__source-inputs' )
+                       .append( $sourceLanguageLabel,
+                               this.$sourceLanguage,
+                               this.$sourceTitleInput
+                       );
+               $targetInputs = $( '<div>' )
+                       .addClass( 'cx-sourceselector-dialog__target-inputs' )
+                       .append(
+                               $targetLanguageLabel,
+                               this.$targetLanguage,
+                               this.$targetTitleInput
+                       );
+
                this.$dialog.append( $heading,
-                       $sourceLanguageLabel,
-                       this.$sourceLanguage,
-                       this.$sourceTitleInput,
-                       $( '<br>' ),
-                       $targetLanguageLabel,
-                       this.$targetLanguage,
-                       this.$targetTitleInput,
-                       $actions, this.$titleList
+                       $sourceInputs,
+                       $targetInputs,
+                       $actions,
+                       this.$titleList
                );
 
                $( 'body' ).append( this.$dialog );
diff --git a/modules/source/styles/ext.cx.source.selector.less 
b/modules/source/styles/ext.cx.source.selector.less
index 5e16baf..7ae5f48 100644
--- a/modules/source/styles/ext.cx.source.selector.less
+++ b/modules/source/styles/ext.cx.source.selector.less
@@ -1,4 +1,5 @@
 @import "../../base/styles/grid/agora-grid";
+@import "mediawiki.mixins";
 
 .hidden {
        display: none;
@@ -44,27 +45,43 @@
        }
 }
 
+.cx-sourceselector-dialog__target-inputs,
+.cx-sourceselector-dialog__source-inputs {
+       .mw-ui-item;
+       .mw-ui-one-whole;
+}
+
 .cx-sourceselector-dialog__language-label {
        .mw-ui-item;
        .mw-ui-one-sixth;
        padding: 5px;
-       line-height: 1.5em;
        font-size: large;
 }
 
 .cx-sourceselector-dialog__language {
        .mw-ui-item;
        .mw-ui-one-third;
-       padding: 5px;
-       line-height: 1.5em;
+       margin: 5px 0;
        font-size: large;
 }
 
 .cx-sourceselector-dialog__title {
        .mw-ui-item;
        .mw-ui-one-half;
-       padding: 5px;
+       margin: 5px 0;
        font-size: large;
+       -webkit-appearance: none;
+
+       &[type=search] {
+               /* @embed */
+               .background-image-svg('../../tools/images/search.svg', 
'../../tools/images/search.png');
+               background-repeat: no-repeat;
+               background-position: 5px center;
+               background-size: 20px;
+               padding-left: 30px;
+       }
+
+       border: 1px solid #ccc;
  }
 
 .cx-sourceselector-dialog__actions {
diff --git a/modules/tools/ext.cx.tools.mt.js b/modules/tools/ext.cx.tools.mt.js
index dde3b3c..4e96c49 100644
--- a/modules/tools/ext.cx.tools.mt.js
+++ b/modules/tools/ext.cx.tools.mt.js
@@ -190,6 +190,8 @@
        MTControlCard.prototype.useSource = function () {
                this.updateSection( false );
                this.showRestore();
+
+               this.$section.focus();
        };
 
        /**
@@ -200,6 +202,8 @@
        MTControlCard.prototype.restoreTranslation = function () {
                this.updateSection( true );
                this.hideRestore();
+
+               this.$section.focus();
        };
 
        /**

-- 
To view, visit https://gerrit.wikimedia.org/r/153570
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Ib5cf8661fd481af60eb6d0900d891e1dfd81de58
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: Amire80 <amir.ahar...@mail.huji.ac.il>
Gerrit-Reviewer: Nikerabbit <niklas.laxst...@gmail.com>
Gerrit-Reviewer: Pginer <pgi...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits