MobileArticleTarget: Add webkit touch scrolling to panels

Also use named classes for hiding toolbars, and move the
MobileFrontend overlay z-index hack out to that repo.

Depends on Ia46e6b4d7a in MobileFrontend.

Change-Id: I0e1f527446fd10fde5dd3107e6467fd2c8f621b2
This commit is contained in:
Ed Sanders 2015-08-08 11:52:05 +01:00 committed by Jforrester
parent 9daee8b995
commit f9fbd52962
2 changed files with 32 additions and 23 deletions

View file

@ -5,9 +5,8 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
.ve-ui-overlay {
/* enough to cover .overlay-header-container with z-index: 5 */
z-index: 6;
.oo-ui-panelLayout-scrollable {
-webkit-overflow-scrolling: touch;
}
.ve-init-mw-target-surface .ve-ce-documentNode,
@ -40,7 +39,7 @@
display: none;
}
.ve-init-mw-mobileArticleTarget-toolbar .oo-ui-toolbar-actions {
.ve-init-mw-mobileArticleTarget-actions {
float: none;
display: table;
}
@ -70,28 +69,33 @@
right: 0;
}
.ve-init-mw-mobileArticleTarget-toolbar .oo-ui-toolbar-tools {
.ve-init-mw-mobileArticleTarget-tools {
display: table;
width: 100%;
}
.ve-init-mw-mobileArticleTarget-toolbar .oo-ui-toolbar-tools > .oo-ui-toolGroup {
.ve-init-mw-mobileArticleTarget-tools > .oo-ui-toolGroup {
display: table-cell;
}
.ve-init-mw-mobileArticleTarget-toolbar .oo-ui-toolbar-tools > .oo-ui-toolGroup-empty {
.ve-init-mw-mobileArticleTarget-tools > .oo-ui-toolGroup-empty {
display: none;
}
.ve-init-mw-mobileArticleTarget-toolbar .oo-ui-toolbar-tools > .oo-ui-toolGroup:last-child {
.ve-init-mw-mobileArticleTarget-tools > .oo-ui-toolGroup:last-child {
border-right: 0;
}
.ve-init-mw-mobileArticleTarget-toolbar .oo-ui-toolbar-tools > .oo-ui-toolGroup > .oo-ui-toolGroup-tools
.ve-init-mw-mobileArticleTarget-tools > .oo-ui-toolGroup > .oo-ui-toolGroup-tools
> .oo-ui-tool {
width: 100%;
}
.ve-init-mw-mobileArticleTarget-tools-hidden,
.ve-init-mw-mobileArticleTarget-actions-hidden {
display: none;
}
@media (max-width: 479px) {
.ve-init-mw-mobileArticleTarget-toolbar
.oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement.oo-ui-tool-with-label > .oo-ui-tool-link .oo-ui-tool-title {

View file

@ -93,8 +93,8 @@ ve.init.mw.MobileArticleTarget.prototype.onSurfaceReady = function () {
*/
ve.init.mw.MobileArticleTarget.prototype.onSurfaceBlur = function () {
var toolbar = this.getToolbar();
toolbar.$group.addClass( 'oo-ui-element-hidden' );
toolbar.$actions.removeClass( 'oo-ui-element-hidden' );
toolbar.$group.addClass( 've-init-mw-mobileArticleTarget-tools-hidden' );
toolbar.$actions.removeClass( 've-init-mw-mobileArticleTarget-actions-hidden' );
};
/**
@ -102,8 +102,8 @@ ve.init.mw.MobileArticleTarget.prototype.onSurfaceBlur = function () {
*/
ve.init.mw.MobileArticleTarget.prototype.onSurfaceFocus = function () {
var toolbar = this.getToolbar();
toolbar.$group.removeClass( 'oo-ui-element-hidden' );
toolbar.$actions.addClass( 'oo-ui-element-hidden' );
toolbar.$group.removeClass( 've-init-mw-mobileArticleTarget-tools-hidden' );
toolbar.$actions.addClass( 've-init-mw-mobileArticleTarget-actions-hidden' );
};
/**
@ -132,7 +132,7 @@ ve.init.mw.MobileArticleTarget.prototype.setupToolbar = function ( surface ) {
this.toolbar.$element.addClass( 've-init-mw-mobileArticleTarget-toolbar' );
// Append the context to the toolbar
this.toolbar.$bar.append( surface.context.$element );
this.toolbar.$bar.append( surface.getContext().$element );
};
/**
@ -160,15 +160,20 @@ ve.init.mw.MobileArticleTarget.prototype.attachToolbarSaveButton = function () {
this.actionsToolbar.emit( 'updateState' );
this.toolbar.$actions.append(
this.actionsToolbar.$element,
$( '<div>' ).addClass( 've-init-mw-mobileArticleTarget-title-container' ).append(
$( '<div>' ).addClass( 've-init-mw-mobileArticleTarget-title' ).text(
new mw.Title( ve.init.target.pageName ).getMainText()
)
),
this.toolbarSaveButton.$element
);
this.toolbar.$group
.addClass( 've-init-mw-mobileArticleTarget-tools' );
this.toolbar.$actions
.addClass( 've-init-mw-mobileArticleTarget-actions' )
.append(
this.actionsToolbar.$element,
$( '<div>' ).addClass( 've-init-mw-mobileArticleTarget-title-container' ).append(
$( '<div>' ).addClass( 've-init-mw-mobileArticleTarget-title' ).text(
new mw.Title( ve.init.target.pageName ).getMainText()
)
),
this.toolbarSaveButton.$element
);
};
/**