jenkins-bot has submitted this change and it was merged.
Change subject: Story 1621: Fixing VE content area typography/design for mobile
......................................................................
Story 1621: Fixing VE content area typography/design for mobile
Lots of changes to make sure that page content looks the same in VE
as it does in regular page view on mobile:
* Add VisualEditorOverlay.less to override some VE specific styling
* Change h3 selector to more specific .mw-mf-overlay-header in
OverlayNew.less so that it doesn't apply to regular h3s in VE.
* Move thumbcaption styles out of thumb selector since thumb
captions aren't inside thumb divs in VE :(
* Add rellink to hatnote styles since it should be styled the same
as dablinks.
* Change margin to padding in hatnote styles, so that it doesn't
affect position of floated elements below them.
* Changing all #content selectors to .content since the ID doesn't
exist in VE.
* Make sure appropriate header styles are applied in VisualEditor.
Change-Id: Ie5084349a5f5edc5f9a05c93bdcf9786a07b49f6
---
M includes/Resources.php
M less/common/OverlayNew.less
M less/common/commonNew.less
M less/common/hacks.less
M less/common/typographyNew.less
A less/modules/editor/VisualEditorOverlay.less
R less/modules/editor/editor.less
M less/tablet/hacks.less
8 files changed, 82 insertions(+), 23 deletions(-)
Approvals:
JGonera: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/Resources.php b/includes/Resources.php
index a9628e9..cffe597 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -266,7 +266,7 @@
'javascripts/modules/editor/EditorOverlayBase.js',
),
'styles' => array(
- 'less/modules/editor.less',
+ 'less/modules/editor/editor.less',
),
'templates' => array(
'modules/editor/EditorOverlayBase',
@@ -309,6 +309,9 @@
'scripts' => array(
'javascripts/modules/editor/VisualEditorOverlay.js',
),
+ 'styles' => array(
+ 'less/modules/editor/VisualEditorOverlay.less',
+ ),
'templates' => array(
'modules/editor/VisualEditorOverlay',
),
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index bc24103..9394669 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -277,7 +277,7 @@
line-height: 1.4;
}
- h3 {
+ .mw-mf-overlay-header {
font-weight: normal;
font-size: .9em;
padding: .3em @contentMargin;
diff --git a/less/common/commonNew.less b/less/common/commonNew.less
index fea228c..208204d 100644
--- a/less/common/commonNew.less
+++ b/less/common/commonNew.less
@@ -16,15 +16,16 @@
.thumbinner {
margin: 0 auto;
}
+ }
- .thumbcaption {
- margin: 0;
- font-size: .8em;
- line-height: 1.5;
- text-align: left;
- padding: 0 !important;
- color: @grayMedium;
- }
+ // Although .thumbcaption is normally inside .thumb, it isn't in
VisualEditor
+ .thumbcaption {
+ margin: 0;
+ font-size: .8em;
+ line-height: 1.5;
+ text-align: left;
+ padding: 0 !important;
+ color: @grayMedium;
}
// Avoid line-height issues caused by sup
diff --git a/less/common/hacks.less b/less/common/hacks.less
index e975cfe..59fb6b3 100644
--- a/less/common/hacks.less
+++ b/less/common/hacks.less
@@ -13,7 +13,7 @@
@import "minerva.mixins";
/* Hide some on-wiki defined classes */
-#content {
+.content {
// Hide cleanup templates by default to non-javascript users as these
stop them from reading the article itself
// Note not in issues.less as that is only loaded via JavaScript
.ambox,
@@ -51,10 +51,6 @@
.editsection,
.mw-editsection {
display: none;
-}
-
-.dablink {
- margin-bottom: 10px;
}
/* force portals to use a one column layout on mobile */
@@ -102,9 +98,11 @@
}
.beta, .alpha {
- .dablink {
- margin-bottom: .6em;
- padding-left: 0;
+ .dablink,
+ .rellink {
+ // Use bottom padding instead of bottom margin so that it
doesn't affect the
+ // position of floated elements below the hatnotes.
+ padding: 0 0 .6em 0;
color: @grayMedium;
font-size: .8em;
font-style: italic;
diff --git a/less/common/typographyNew.less b/less/common/typographyNew.less
index e6664df..e7cc0f1 100644
--- a/less/common/typographyNew.less
+++ b/less/common/typographyNew.less
@@ -16,7 +16,7 @@
font-size: 1.7em;
}
- #content {
+ .content {
line-height: @contentLineHeight;
p {
diff --git a/less/modules/editor/VisualEditorOverlay.less
b/less/modules/editor/VisualEditorOverlay.less
new file mode 100644
index 0000000..0123e0f
--- /dev/null
+++ b/less/modules/editor/VisualEditorOverlay.less
@@ -0,0 +1,58 @@
+@import "minerva.variables";
+@import "minerva.mixins";
+
+// These are set as !important since they have to override styles set in
VisualEditor
+// FIXME: Remove protected node once VE is correctly identifying which nodes
are
+// supported in mobile.
+.ve-ce-alienNode-phantom,
+.ve-ce-protectedNode-phantom {
+ box-shadow: none !important;
+ opacity: 0.5 !important;
+ background-color: white !important;
+}
+
+// FIXME: Remove !importants once they are no longer necessary, i.e. once
figure styles
+// are moved out of VisualEditor and into the skins
+.content {
+ // VisualEditor doesn't have section_heading class, so we need to apply
+ // heading styles to the header tags directly.
+ h1, h2 {
+ margin-bottom: .5em;
+ border-bottom: solid 1px @sectionBorderColor;
+ }
+
+ figure[typeof*='mw:Image'] {
+ &.mw-halign-left {
+ float: left !important;
+ clear: left !important;
+ margin-right: 1.4em !important;
+ }
+
+ &.mw-halign-right {
+ float: right !important;
+ clear: right !important;
+ margin-left: 1.4em !important;
+ }
+
+ &.mw-halign-center {
+ margin-left: auto !important;
+ margin-right: auto !important;
+ }
+
+ .ve-ce-mwBlockImageNode-thumbimage {
+ border: none !important;
+ }
+ }
+
+ figure[typeof='mw:Image/Thumb'],
+ figure[typeof='mw:Image/Frame'] {
+ margin: 0.6em 0 !important;
+ max-width: 100% !important;
+ background-color: transparent !important;
+ border: none !important;
+ padding: 0 !important;
+ overflow: hidden !important;
+ font-size: inherit !important;
+ text-align: inherit !important;
+ }
+}
diff --git a/less/modules/editor.less b/less/modules/editor/editor.less
similarity index 100%
rename from less/modules/editor.less
rename to less/modules/editor/editor.less
diff --git a/less/tablet/hacks.less b/less/tablet/hacks.less
index 3008d28..6748d9d 100644
--- a/less/tablet/hacks.less
+++ b/less/tablet/hacks.less
@@ -14,14 +14,13 @@
/* Tablet specific styling */
@media all and (min-width: @wgMFDeviceWidthTablet) {
- /* Revert to showing nav boxes on tablet/desktop */
- #content {
+
+ .content {
+ // Revert to showing nav boxes on tablet/desktop
.navbox, .vertical-navbox {
display: inherit;
}
- }
- .content {
// Infobox styling
.infobox {
margin-left: 1em !important;
--
To view, visit https://gerrit.wikimedia.org/r/110122
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie5084349a5f5edc5f9a05c93bdcf9786a07b49f6
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
