Mattflaschen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/69282
Change subject: Improve appearence of task toolbar on low width screens.
......................................................................
Improve appearence of task toolbar on low width screens.
Bug: 48562
Change-Id: I44a472e97e99f4107a964f64422e7892533d194b
---
M GettingStarted.php
M resources/ext.gettingstarted.taskToolbar.css
M resources/ext.gettingstarted.taskToolbar.js
A resources/ext.gettingstarted.taskToolbar.lowWidth.css
4 files changed, 42 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GettingStarted
refs/changes/82/69282/1
diff --git a/GettingStarted.php b/GettingStarted.php
index 3bdeb61..bbb158a 100644
--- a/GettingStarted.php
+++ b/GettingStarted.php
@@ -173,10 +173,16 @@
'styles' => 'ext.gettingstarted.css',
) + $gettingStartedModuleInfo;
-// Added if they are in the test group and this page is one of their
GettingStarted tasks
+// Added if this page is one of their GettingStarted tasks
$wgResourceModules[ 'ext.gettingstarted.taskToolbar' ] = array(
'scripts' => 'ext.gettingstarted.taskToolbar.js',
- 'styles' => 'ext.gettingstarted.taskToolbar.css',
+ 'styles' => array(
+ 'ext.gettingstarted.taskToolbar.css' => array( 'media' =>
'screen' ),
+ 'ext.gettingstarted.taskToolbar.lowWidth.css' => array( 'media'
=> 'screen and (max-width: 1005px)' ),
+
+ // Requires fix for
https://bugzilla.wikimedia.org/show_bug.cgi?id=49722 to work.
+ 'ext.gettingstarted.taskToolbar.print.css' => array( 'media' =>
'print' ),
+ ),
'dependencies' => array(
'mediawiki.action.view.postEdit',
'mediawiki.jqueryMsg',
diff --git a/resources/ext.gettingstarted.taskToolbar.css
b/resources/ext.gettingstarted.taskToolbar.css
index d6117e7..2deb569 100644
--- a/resources/ext.gettingstarted.taskToolbar.css
+++ b/resources/ext.gettingstarted.taskToolbar.css
@@ -2,12 +2,12 @@
below the onboarding toolbar.
TODO (mattflaschen, 2013-04-18): This can probably be done in a better way.
*/
-.mw-gettingstarted-relative-40 {
+.mw-gettingstarted-relative-vshift {
position: relative;
top: 40px;
}
-.mw-gettingstarted-margin-40 {
+.mw-gettingstarted-margin-vshift {
margin-top: 40px;
}
diff --git a/resources/ext.gettingstarted.taskToolbar.js
b/resources/ext.gettingstarted.taskToolbar.js
index bfd3c19..3adcc02 100644
--- a/resources/ext.gettingstarted.taskToolbar.js
+++ b/resources/ext.gettingstarted.taskToolbar.js
@@ -1,6 +1,6 @@
( function ( $, mw ) {
$( document ).ready( function () {
- var $toolbar, $left, $center, $right, $tryAnother, $close,
+ var $toolbar, $left, $center, $centerMessage, $right,
$tryAnother, $close,
toolbarInfo, $relativeElements, $marginElements, logging,
cfg, $returnToList, returnToListUri, tryAnotherUri, $showGuide,
fullTask;
@@ -43,6 +43,10 @@
$center = $( '<div>' ).attr( {
'class': 'mw-gettingstarted-toolbar-center'
+ } );
+
+ $centerMessage = $( '<span>' ).attr( {
+ 'class': 'mw-gettingstarted-toolbar-center-message'
} ).text( mw.message( toolbarInfo.description ) );
$showGuide = $( '<a>' ).attr( {
@@ -55,7 +59,7 @@
evt.stopPropagation();
} );
- $center.append( $showGuide );
+ $center.append( $centerMessage, $showGuide );
tryAnotherUri = new mw.Uri(
@@ -97,8 +101,8 @@
logging.setTask( title.getPrefixedText(), null );
$toolbar.slideUp( 200, function () {
- $relativeElements.removeClass(
'mw-gettingstarted-relative-40' );
- $marginElements.removeClass(
'mw-gettingstarted-margin-40' );
+ $relativeElements.removeClass(
'mw-gettingstarted-relative-vshift' );
+ $marginElements.removeClass(
'mw-gettingstarted-margin-vshift' );
} );
} );
@@ -116,8 +120,8 @@
$marginElements = $( '#mw-head, #mw-panel' );
function showToolbarInternal() {
- $relativeElements.addClass(
'mw-gettingstarted-relative-40' );
- $marginElements.addClass( 'mw-gettingstarted-margin-40'
);
+ $relativeElements.addClass(
'mw-gettingstarted-relative-vshift' );
+ $marginElements.addClass(
'mw-gettingstarted-margin-vshift' );
$toolbar.slideDown( 200, function () {
mw.libs.guiders.reposition();
diff --git a/resources/ext.gettingstarted.taskToolbar.lowWidth.css
b/resources/ext.gettingstarted.taskToolbar.lowWidth.css
new file mode 100644
index 0000000..d3bb92f
--- /dev/null
+++ b/resources/ext.gettingstarted.taskToolbar.lowWidth.css
@@ -0,0 +1,22 @@
+.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/69282
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I44a472e97e99f4107a964f64422e7892533d194b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: Mattflaschen <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
