jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/343097 )
Change subject: Make edit merge screen responsive
......................................................................
Make edit merge screen responsive
Bug: T144610
Change-Id: Ie51417d1da2ba425a424d25378b6b40466a64e8c
---
M includes/TwoColConflictPage.php
M modules/ext.TwoColConflict.css
M modules/ext.TwoColConflict.init.js
3 files changed, 66 insertions(+), 12 deletions(-)
Approvals:
WMDE-Fisch: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/TwoColConflictPage.php b/includes/TwoColConflictPage.php
index e26dd57..e870b5a 100644
--- a/includes/TwoColConflictPage.php
+++ b/includes/TwoColConflictPage.php
@@ -114,11 +114,13 @@
);
$out = '<div class="mw-twocolconflict-changes-col">';
+ $out .= '<div class="mw-twocolconflict-col-header">';
$out .= '<h3>' . $this->getContext()->msg(
'twoColConflict-changes-col-title' )->parse() .
'</h3>';
$out .= '<div class="mw-twocolconflict-col-desc">' .
$this->getContext()->msg(
'twoColConflict-changes-col-desc', $lastUser,
$lastChangeTime, $yourChangeTime
)->parse() . '</div>';
+ $out .= '</div>';
$out .= $this->buildFilterOptionsMenu();
@@ -277,10 +279,12 @@
$lastChangeTime, $this->context->getUser()
);
- $out = '<h3>' . $this->getContext()->msg(
'twoColConflict-editor-col-title' ) . '</h3>';
+ $out = '<div class="mw-twocolconflict-col-header">';
+ $out .= '<h3>' . $this->getContext()->msg(
'twoColConflict-editor-col-title' ) . '</h3>';
$out .= '<div class="mw-twocolconflict-col-desc">' .
$this->getContext()->msg(
'twoColConflict-editor-col-desc', $lastUser,
$lastChangeTime
) . '</div>';
+ $out .= '</div>';
return $out;
}
diff --git a/modules/ext.TwoColConflict.css b/modules/ext.TwoColConflict.css
index 4ba70ca..78c9023 100644
--- a/modules/ext.TwoColConflict.css
+++ b/modules/ext.TwoColConflict.css
@@ -1,8 +1,12 @@
+.mw-twocolconflict-form form {
+ display: flex;
+ flex-flow: row wrap;
+}
+
.mw-twocolconflict-changes-col,
.mw-twocolconflict-editor-col {
- box-sizing: border-box;
- width: 50%;
- float: left;
+ flex-grow: 1;
+ width: 300px;
}
.mw-twocolconflict-changes-col {
@@ -16,14 +20,6 @@
.mw-twocolconflict-col-desc {
font-size: 0.9em;
margin-bottom: 10px;
-}
-
-.mw-twocolconflict-editor-col.mw-twocolconflict-js .mw-twocolconflict-col-desc
{
- margin-bottom: 74px; /* diff-options height - editor-toolbar height */
-}
-
-.mw-twocolconflict-editor-col.mw-twocolconflict-js.mw-twocolconflict-wikieditor
.mw-twocolconflict-col-desc {
- margin-bottom: 62px; /* diff-options height - editor-toolbar height */
}
.mw-twocolconflict-form .editOptions {
diff --git a/modules/ext.TwoColConflict.init.js
b/modules/ext.TwoColConflict.init.js
index 180ff03..e393535 100644
--- a/modules/ext.TwoColConflict.init.js
+++ b/modules/ext.TwoColConflict.init.js
@@ -55,6 +55,54 @@
} );
}
+ /**
+ * Calculates the spacing between the bottom of the header and the top
of the text editor
+ *
+ * @param {jQuery} $header
+ * @param {jQuery} $editor
+ * @return {number}
+ */
+ function getSpaceBetweenHeaderAndEditor( $header, $editor ) {
+ return $editor.offset().top - $header.offset().top -
$header.height();
+ }
+
+ /**
+ * Calculates the height difference of two headers
+ *
+ * @param {jQuery} $header1
+ * @param {jQuery} $header2
+ * @return {number}
+ */
+ function getHeaderHeightDiff( $header1, $header2 ) {
+ return $header1.height() - $header2.height();
+ }
+
+ /**
+ * Adjusts the spacing below the editor column's header in order to
synchronize the position of
+ * both columns and removes the editor column's left padding and
spacing when it collapses below
+ * the changes column
+ */
+ function adjustEditorColSpacing() {
+ var $changesCol = $( '.mw-twocolconflict-changes-col' ),
+ $editorCol = $( '.mw-twocolconflict-editor-col' ),
+ $changesColHeader = $( '.mw-twocolconflict-changes-col
.mw-twocolconflict-col-header' ),
+ $editorColHeader = $( '.mw-twocolconflict-editor-col
.mw-twocolconflict-col-header' ),
+ $changesEditor = $( '.mw-twocolconflict-changes-editor'
),
+ $wikiEditorToolbar = $( '#wikiEditor-ui-toolbar' ),
+ toolbarHeight = $wikiEditorToolbar.length ?
$wikiEditorToolbar.height() : $( '#toolbar' ).height();
+
+ if ( $changesCol.position().left !== $editorCol.position().left
) {
+ $editorColHeader.css( 'margin-bottom',
+ getSpaceBetweenHeaderAndEditor(
$changesColHeader, $changesEditor ) -
+ getHeaderHeightDiff( $editorColHeader,
$changesColHeader ) - toolbarHeight + 'px'
+ );
+ $editorCol.css( 'padding-left', '0.5em' );
+ } else {
+ $editorColHeader.css( 'margin-bottom', '10px' );
+ $editorCol.css( 'padding-left', 0 );
+ }
+ }
+
$( function () {
$( '.mw-twocolconflict-changes-editor' ).keydown( function( e )
{
if ( e.ctrlKey && e.keyCode === 65 ) { // CTRL + A
@@ -68,8 +116,14 @@
$( window ).on( 'resize', function() {
autoScroll.setScrollBaseData();
+ adjustEditorColSpacing();
} );
initHelpDialog();
+ adjustEditorColSpacing();
+
+ $( '#wpTextbox1' ).on(
'wikiEditor-toolbar-doneInitialSections', function () {
+ adjustEditorColSpacing();
+ } );
} );
}( mediaWiki, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/343097
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie51417d1da2ba425a424d25378b6b40466a64e8c
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/TwoColConflict
Gerrit-Branch: master
Gerrit-Owner: Andrew-WMDE <[email protected]>
Gerrit-Reviewer: Addshore <[email protected]>
Gerrit-Reviewer: Tobias Gritschacher <[email protected]>
Gerrit-Reviewer: WMDE-Fisch <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
