Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/279561
Change subject: Remove flashes of unstyled content on page load
......................................................................
Remove flashes of unstyled content on page load
* section-heading class added to headings in MobileFormatter
* Box model changing css rules for headings (border and margin moved
into non-js stylesheet)
* Space left for toggle icon when JS enabled
Bug: T128982
Change-Id: I0b4a0267a383efc9b41749cd55c57a44be84578a
---
M includes/MobileFormatter.php
M minerva.less/minerva.variables.less
M resources/mobile.toggle/toggle.less
M resources/skins.minerva.base.styles/ui.less
4 files changed, 24 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/61/279561/1
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index 1fe66c3..913822b 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -368,6 +368,12 @@
$sectionBody = $doc->createElement( 'div' );
$sectionBody->setAttribute( 'class', 'mf-section-' .
$sectionNumber );
+ // Mark the top level headings which will become collapsible
soon.
+ foreach ( $headings as $heading ) {
+ $className = $heading->hasAttribute( 'class' ) ?
$heading->getAttribute( 'class' ) . ' ' : '';
+ $heading->setAttribute( 'class', $className . '
section-heading' );
+ }
+
while ( $sibling ) {
$node = $sibling;
$sibling = $sibling->nextSibling;
diff --git a/minerva.less/minerva.variables.less
b/minerva.less/minerva.variables.less
index 12a8de9..d04f4ca 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -110,3 +110,6 @@
@z-indexMain: 3;
@z-indexOverlay: 4;
@z-indexOverOverlay: 5;
+
+// indicators
+@indicatorFontSize: .4em;
diff --git a/resources/mobile.toggle/toggle.less
b/resources/mobile.toggle/toggle.less
index 06756d6..72e1501 100644
--- a/resources/mobile.toggle/toggle.less
+++ b/resources/mobile.toggle/toggle.less
@@ -15,17 +15,11 @@
cursor: pointer;
position: relative;
- border-bottom: solid 1px @sectionBorderColor;
-
.indicator {
float: left;
margin-top: .7em;
- font-size: .4em;
+ font-size: @indicatorFontSize;
}
- }
-
- .section-heading {
- margin-bottom: @headingMargin;
}
.collapsible-block {
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index a8ced72..0052517 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -177,6 +177,20 @@
}
}
+ .section-heading {
+ border-bottom: solid 1px @sectionBorderColor;
+ margin-bottom: @headingMargin;
+ // Avoid flash of unstyled content by leaving space for the
icon.
+ padding-left: (@iconSize + @iconGutterWidth + @iconGutterWidth)
* @indicatorFontSize;
+
+ .client-nojs &,
+ &.collapsible-heading {
+ padding-left: 0;
+ // Account for -1px glitch when collapse chevron appears
+ margin-left: -1px;
+ }
+ }
+
.section-heading,
.in-block {
// Safari needs this. @see T106347
--
To view, visit https://gerrit.wikimedia.org/r/279561
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0b4a0267a383efc9b41749cd55c57a44be84578a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
