Kaldari has uploaded a new change for review.
https://gerrit.wikimedia.org/r/134978
Change subject: Promoting mobile typography changes from beta to stable: Part 2
......................................................................
Promoting mobile typography changes from beta to stable: Part 2
This is part 2 of 2 and includes the updates to tablet styles. The
way these styles is loaded has been changed to use a regular top
position ResourceLoader module rather than the fancy matchMedia
hack, as it seems a bit risky for stable. The tablet styles are
pretty small anyway, so it doesn't seem like it would be a
significant change to the footprint of the head. Ideally, if we
want to use a method similar to matchMedia in stable, we should
probably get such a capability added to ResourceLoader itself.
Change-Id: Ia2ddca666c42762378e4c2bfe8e6a82ee3e43420
---
M includes/Resources.php
M includes/skins/SkinMinerva.php
M includes/skins/SkinMinervaBeta.php
D javascripts/common/matchMedia.js
M less/tablet/common.less
M less/tablet/hacks.less
6 files changed, 83 insertions(+), 152 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/78/134978/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 29233f0..d3bb689 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -85,11 +85,11 @@
),
'tablet.styles' => $wgMFMobileResourceBoilerplate + array(
- 'dependencies' => array( 'mobile.startup' ),
'styles' => array(
'less/tablet/common.less',
'less/tablet/hacks.less',
),
+ 'position' => 'top',
),
'mobile.toc' => $wgMFMobileResourceBoilerplate + array(
@@ -184,16 +184,6 @@
'mobile-frontend-last-modified-with-user-months',
'mobile-frontend-last-modified-with-user-years',
'mobile-frontend-last-modified-with-user-just-now',
- ),
- 'position' => 'top',
- ),
-
- 'mobile.head.beta' => $wgMFMobileResourceBoilerplate + array(
- 'dependencies' => array(
- 'mobile.head',
- ),
- 'scripts' => array(
- 'javascripts/common/matchMedia.js',
),
'position' => 'top',
),
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index ec9be88..5b449d9 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -791,6 +791,7 @@
'skins.minerva.content.styles',
'skins.minerva.drawers.styles',
// FIXME: Rename to use skins.minerva prefix - don't
break cache in process
+ 'tablet.styles',
'mobile.styles.page',
'mobile.pagelist.styles',
);
diff --git a/includes/skins/SkinMinervaBeta.php
b/includes/skins/SkinMinervaBeta.php
index 6fc2aa7..5a0c341 100644
--- a/includes/skins/SkinMinervaBeta.php
+++ b/includes/skins/SkinMinervaBeta.php
@@ -14,37 +14,7 @@
# Replace page content before DOMParse to make sure images are
scrubbed
# and Zero transformations are applied.
$this->handleNewPages( $out );
- $this->prepareResponsiveStyles();
parent::outputPage( $out );
- }
-
- /**
- * Prepares head items that add conditionally loaded responsive styles.
- * FIXME: Review this approach thoroughly before pushing to stable.
- * Loosely based on:
- *
http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/
- */
- protected function prepareResponsiveStyles() {
- global $wgMFDeviceWidthTablet;
-
- $url = ResourceLoader::makeLoaderURL(
- array( 'tablet.styles' ),
- $this->getLanguage()->getCode(),
- $this->getSkinName(),
- null,
- null,
- ResourceLoader::inDebugMode(),
- 'styles'
- );
- $attrs = array(
- 'data-href' => $url,
- 'data-media' => '(min-width: ' . $wgMFDeviceWidthTablet
.'px)'
- );
- $out = $this->getOutput();
- $out->addHeadItem( 'responsiveStyles', Html::element( 'style',
$attrs ) );
- $out->addHeadItem( 'responsiveScript', Html::inlineScript(
- "jQuery.matchMedia();"
- ) );
}
protected function getSearchPlaceHolderText() {
@@ -88,7 +58,6 @@
public function getDefaultModules() {
$modules = parent::getDefaultModules();
- $modules['mobile'][] = 'mobile.head.beta';
$modules['talk'] = array( 'mobile.talk' );
$modules['beta'] = array( 'mobile.beta' );
$modules['beta'][] = 'mobile.geonotahack';
diff --git a/javascripts/common/matchMedia.js b/javascripts/common/matchMedia.js
deleted file mode 100644
index df27ecd..0000000
--- a/javascripts/common/matchMedia.js
+++ /dev/null
@@ -1,14 +0,0 @@
-( function( $ ) {
- $.matchMedia = function() {
- if ( window.matchMedia ) {
- $( 'style[data-media]' ).each( function() {
- var $el = $( this );
- if ( window.matchMedia( $el.data( 'media' )
).matches ) {
- $( '<link rel="stylesheet">' ).
- attr( 'href', $el.data( 'href'
) ).
- insertAfter( $el );
- }
- } );
- }
- };
-} ( jQuery ) );
diff --git a/less/tablet/common.less b/less/tablet/common.less
index 92ef57d..030f9a2 100644
--- a/less/tablet/common.less
+++ b/less/tablet/common.less
@@ -9,79 +9,71 @@
@contentMaxWidth: 890px + (@contentPaddingTablet * 2);
@media all and (min-width: @wgMFDeviceWidthTablet) {
- .beta, .alpha {
- #content_wrapper {
- .content_block {
- width: auto;
- clear: none;
- }
- }
-
- .pre-content {
- position: relative;
- padding: 20px @contentPaddingTablet 0
@contentPaddingTablet;
- border: none;
-
- h1#section_0 {
- border-bottom: 1px solid @sectionBorderColor;
- // FIXME: After this and the new page-action
CSS below are promoted to stable,
- // move page-actions before the h1 in the DOM,
remove the 220px padding on the
- // header, and change the absolute positioning
of page-actions to float.
- padding: 12px 220px 7px 0;
- }
-
- #page-actions {
- padding: 40px @contentPaddingTablet 0 0;
- position: absolute;
- right: 0;
- top: 0;
- li:last-child {
- margin-right: 0 !important;
- }
- }
- }
-
- // FIXME: Have a class that identifies all 4 of these
- .drawer,
- .pre-content,
- .content,
- .content-overlay {
- max-width: @contentMaxWidth;
- margin: 0 auto;
- }
-
- .content {
- padding: 1.6em @contentPaddingTablet 0
@contentPaddingTablet;
- // Classes added by thumbnails
- // e.g. [[File:Scholars mate
animation.gif|frame|left|"[[Scholar's mate]]"]]
- .thumb {
- &.tleft {
- float: left;
- clear: left;
- margin-right: 1.4em;
- }
-
- &.tright {
- float: right;
- clear: right;
- margin-left: 1.4em;
- }
- }
-
- // Blockquotes
- blockquote {
- // Increase horizontal padding
- padding-right: @blockquotePaddingRight + 10px;
- padding-left: @blockquotePaddingLeft + 10px;
- }
- }
-
- #footer {
- padding: 2em @contentPaddingTablet 1.5em
@contentPaddingTablet;
+ #content_wrapper {
+ .content_block {
+ width: auto;
+ clear: none;
}
}
+ .pre-content {
+ position: relative;
+ padding: 20px @contentPaddingTablet 0 @contentPaddingTablet;
+ border: none;
+
+ h1#section_0 {
+ border-bottom: 1px solid @sectionBorderColor;
+ // FIXME: After this and the new page-action CSS below
are promoted to stable,
+ // move page-actions before the h1 in the DOM, remove
the 220px padding on the
+ // header, and change the absolute positioning of
page-actions to float.
+ padding: 12px 220px 7px 0;
+ }
+
+ #page-actions {
+ padding: 40px @contentPaddingTablet 0 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ li:last-child {
+ margin-right: 0 !important;
+ }
+ }
+ }
+
+ // FIXME: Have a class that identifies all 4 of these
+ .drawer,
+ .pre-content,
+ .content,
+ .content-overlay {
+ max-width: @contentMaxWidth;
+ margin: 0 auto;
+ }
+
.content {
+ padding: 1.6em @contentPaddingTablet 0 @contentPaddingTablet;
+ // Classes added by thumbnails
+ // e.g. [[File:Scholars mate
animation.gif|frame|left|"[[Scholar's mate]]"]]
+ .thumb {
+ &.tleft {
+ float: left;
+ clear: left;
+ margin-right: 1.4em;
+ }
+
+ &.tright {
+ float: right;
+ clear: right;
+ margin-left: 1.4em;
+ }
+ }
+
+ // Blockquotes
+ blockquote {
+ // Increase horizontal padding
+ padding-right: @blockquotePaddingRight + 10px;
+ padding-left: @blockquotePaddingLeft + 10px;
+ }
+
// Override rules in common/common.less
table {
display: table;
@@ -94,11 +86,16 @@
}
}
+ // For Main Page
#mw-mf-last-modified {
padding: 5px 0;
}
}
+ #footer {
+ padding: 2em @contentPaddingTablet 1.5em @contentPaddingTablet;
+ }
+
// On most pages the last modified bar is outside the content div
#mw-mf-last-modified {
padding: 5px @contentPaddingTablet;
diff --git a/less/tablet/hacks.less b/less/tablet/hacks.less
index 6748d9d..186dc72 100644
--- a/less/tablet/hacks.less
+++ b/less/tablet/hacks.less
@@ -14,41 +14,29 @@
/* Tablet specific styling */
@media all and (min-width: @wgMFDeviceWidthTablet) {
-
.content {
// Revert to showing nav boxes on tablet/desktop
.navbox, .vertical-navbox {
display: inherit;
}
-
- // Infobox styling
- .infobox {
- margin-left: 1em !important;
- width: 23em !important;
- float: right !important;
- clear: right;
- }
}
- .beta, .alpha {
- #content_wrapper {
+ #content_wrapper {
+ // Float infoboxes to the right of the page
+ table.infobox {
+ margin: .5em 0 .5em 1em !important;
+ // Note this is fixed to ensure that we leave enough
space for the sections to the infoboxes left
+ max-width: @infoboxWidth;
+ // FIXME [Templates]: Inline styles force us to use
!important
+ width: auto !important;
+ float: right !important;
+ margin-left: @contentMargin !important;
+ clear: right !important;
+ }
- // Float infoboxes to the right of the page
- table.infobox {
- margin: .5em 0 .5em 1em !important;
- // Note this is fixed to ensure that we leave
enough space for the sections to the infoboxes left
- max-width: @infoboxWidth;
- // FIXME [Templates]: Inline styles force us to
use !important
- width: auto !important;
- float: right !important;
- margin-left: @contentMargin !important;
- clear: right !important;
- }
-
- // Match caption styling from MediaWiki:Common.css
- caption {
- font-weight: bold;
- }
+ // Match caption styling from MediaWiki:Common.css
+ caption {
+ font-weight: bold;
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/134978
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia2ddca666c42762378e4c2bfe8e6a82ee3e43420
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kaldari <rkald...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
