Phuedx has uploaded a new change for review.
https://gerrit.wikimedia.org/r/115176
Change subject: Make the toolbar respond to a content overflow
......................................................................
Make the toolbar respond to a content overflow
The breakpoint defined in ext.gettingstarted.taskToolbar.lowWidth.less
is fixed and therefore doesn't handle long translations well. Instead,
calculate the point of overflow when the toolbar is inserted into the
DOM and monitor the width of the toolbar so that the appropriate
styles can be applied when the breakpoint is reached.
Bug: 61230
Change-Id: I87b89f49f45e65f2f178565ca60a306ed80fbf9f
---
M GettingStarted.php
M resources/ext.gettingstarted.taskToolbar.js
M resources/ext.gettingstarted.taskToolbar.less
D resources/ext.gettingstarted.taskToolbar.lowWidth.less
4 files changed, 62 insertions(+), 44 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GettingStarted
refs/changes/76/115176/1
diff --git a/GettingStarted.php b/GettingStarted.php
index 2cdfcb2..9d85330 100644
--- a/GettingStarted.php
+++ b/GettingStarted.php
@@ -181,8 +181,6 @@
'scripts' => 'ext.gettingstarted.taskToolbar.js',
'styles' => array(
'ext.gettingstarted.taskToolbar.less' => array( 'media' =>
'screen ' ),
- 'ext.gettingstarted.taskToolbar.lowWidth.less' =>
- array( 'media' => 'only screen and (min-width: 851px)
and (max-width: 1150px)' ),
// Requires fix for
https://bugzilla.wikimedia.org/show_bug.cgi?id=49722 and
// https://bugzilla.wikimedia.org/show_bug.cgi?id=49851 to work
on printable=yes view.
diff --git a/resources/ext.gettingstarted.taskToolbar.js
b/resources/ext.gettingstarted.taskToolbar.js
index ee64177..a2d6294 100644
--- a/resources/ext.gettingstarted.taskToolbar.js
+++ b/resources/ext.gettingstarted.taskToolbar.js
@@ -38,7 +38,8 @@
function displayToolbar( toolbarInfo, suggestedTitle ) {
var $toolbar, $center, $centerMessage, $right, $tryAnother,
$close,
$relativeElements, $marginElements, tryAnotherUrl, $showGuide,
- fullTask, afterRemovalHookInstalled;
+ fullTask, afterRemovalHookInstalled, $centerMessageClone,
+ centerMessageWidth, centerMinWidth, isToolbarExpanded;
fullTask = 'gettingstarted-' + toolbarInfo.taskName;
@@ -130,24 +131,33 @@
$( document.body ).prepend( $toolbar );
$relativeElements = $( '#mw-page-base, #mw-head-base, #content,
#footer' );
+ $relativeElements.css( 'position', 'relative' );
+
$marginElements = $( '#mw-head, #mw-panel' );
+ function pushPageDown() {
+ var offset = $toolbar.outerHeight() + 1;
+ $relativeElements.css( 'top', offset + 'px' );
+ $marginElements.css( 'margin-top', offset + 'px' );
+ }
+
+ function pullPageUp() {
+ $relativeElements.css( 'top', '' );
+ $marginElements.css( 'margin-top', '' );
+ }
// This intentionally logs again if the toolbar redisplays
after VE is hidden,
// either due to a save or simply returning to Read.
function showToolbarInternal() {
- $relativeElements.addClass(
'mw-gettingstarted-relative-vshift' );
- $marginElements.addClass(
'mw-gettingstarted-margin-vshift' );
-
$toolbar.slideDown( 200, function () {
+ pushPageDown();
mw.libs.guiders.reposition();
} );
}
function hideToolbar() {
$toolbar.slideUp( 200, function () {
- $relativeElements.removeClass(
'mw-gettingstarted-relative-vshift' );
- $marginElements.removeClass(
'mw-gettingstarted-margin-vshift' );
+ pullPageUp();
mw.libs.guiders.reposition();
} );
}
@@ -189,6 +199,43 @@
mw.hook( 've.activationComplete' ).add( hideToolbar );
mw.hook( 've.deactivationComplete' ).add( showToolbar );
+
+ // Calculate the width of the task description.
+ $centerMessageClone = $centerMessage.clone();
+ $centerMessageClone.css( {
+ position: 'absolute',
+ left: -9999
+ } );
+ $( document.body ).append( $centerMessageClone );
+ centerMessageWidth = $centerMessageClone.width();
+ $centerMessageClone.remove();
+ centerMinWidth = centerMessageWidth + $showGuide.outerWidth(
true );
+
+ isToolbarExpanded = $center.width() < centerMinWidth;
+ if ( isToolbarExpanded ) {
+ $toolbar.addClass( 'mw-gettingstarted-toolbar-expanded'
);
+ }
+
+ $( window ).on( 'resize', function () {
+ if ( $center.width() >= centerMinWidth ) {
+ // The contents of the toolbar can be displayed
+ // inline.
+
+ if ( isToolbarExpanded ) {
+ $toolbar.removeClass(
'mw-gettingstarted-toolbar-expanded' );
+ pushPageDown();
+ isToolbarExpanded = false;
+ }
+
+ return;
+ }
+
+ if ( ! isToolbarExpanded ) {
+ $toolbar.addClass(
'mw-gettingstarted-toolbar-expanded' );
+ pushPageDown();
+ isToolbarExpanded = true;
+ }
+ } );
}
$( document ).ready( function () {
diff --git a/resources/ext.gettingstarted.taskToolbar.less
b/resources/ext.gettingstarted.taskToolbar.less
index 510626e..20ee066 100644
--- a/resources/ext.gettingstarted.taskToolbar.less
+++ b/resources/ext.gettingstarted.taskToolbar.less
@@ -6,17 +6,14 @@
box-shadow: @arguments;
}
-/* These are hack/helper classes to shift the content down
- below the onboarding toolbar.
- TODO (mattflaschen, 2013-04-18): This can probably be done in a better way.
*/
+#mw-gettingstarted-toolbar.mw-gettingstarted-toolbar-expanded {
+ .mw-gettingstarted-toolbar-center-message {
+ display: block;
+ }
-.mw-gettingstarted-relative-vshift {
- position: relative;
- top: 40px;
-}
-
-.mw-gettingstarted-margin-vshift {
- margin-top: 40px;
+ .mw-gettingstarted-toolbar-show-guiders {
+ margin-top: 10px;
+ }
}
/* css for entire top toolbar */
@@ -30,14 +27,12 @@
z-index: 100000006; /* I'm looking at you, Guiders */
top: 0;
width: 100%;
- height: 39px;
- max-height: 39px;
.vertical-gradient( #7d7e7d, #333333 );
.box-shadow( inset 0px 1px #999, 0px 3px 3px #bbb );
- padding-top: 12px;
+ padding: 12px;
font-size: 0.8em;
color: white;
text-shadow: 0 -1px #444;
@@ -60,7 +55,7 @@
.mw-gettingstarted-toolbar-show-guiders {
opacity: 0; /* NOT display:none because it should appear without
shifting around other elements */
margin: 0 1em;
- margin-top: -4px;
+ margin-top: -1px;
padding: 3px 1em 2px 1em;
}
diff --git a/resources/ext.gettingstarted.taskToolbar.lowWidth.less
b/resources/ext.gettingstarted.taskToolbar.lowWidth.less
deleted file mode 100644
index d3bb92f..0000000
--- a/resources/ext.gettingstarted.taskToolbar.lowWidth.less
+++ /dev/null
@@ -1,22 +0,0 @@
-.mw-gettingstarted-relative-vshift {
- top: 85px;
-}
-
-.mw-gettingstarted-margin-vshift {
- margin-top: 85px;
-}
-
-#mw-gettingstarted-toolbar {
- height: 84px;
- max-height: 84px;
-}
-
-.mw-gettingstarted-toolbar-center-message {
- display: block;
-}
-
-.mw-gettingstarted-toolbar-left,
-.mw-gettingstarted-toolbar-show-guiders,
-.mw-gettingstarted-toolbar-right {
- margin-top: 10px;
-}
--
To view, visit https://gerrit.wikimedia.org/r/115176
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I87b89f49f45e65f2f178565ca60a306ed80fbf9f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: Phuedx <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
