[MediaWiki-commits] [Gerrit] mediawiki...MobileFrontend[master]: Improve layout of fallback editor
jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/347127 )
Change subject: Improve layout of fallback editor
..
Improve layout of fallback editor
This attempts to make the save changes button visible without
the user having to scroll down the page and clean up the UI.
Note for anonymous users, the user will have to scroll as the warning
text appears before the form. This is unavoidable and an encouragement
to login!
Styles apply when show changes or show preview have been clicked
When the non-JavaScript editor is open
* Reduce heading font-size
* Reduce size of checkbox labels, warnings and licenses to be consistent
with license box in overlays. Pull out a generic mixin until this
component can be generalised. Note given
skins.minerva.fallbackeditor is only applied when action=edit
there is no additional bloat to the resulting CSS payload on standard
mobile views
* Reducing padding of elements to make room for the important textarea
and buttons.
* In preview mode, style "Remember this is only a preview" as a warningbox
to improve visual separation from rest of content
* Remove use of large headings in editor which make UI more cluttered
Bug: T125174
Change-Id: Ibb7355b828c3bedbe8ba9aeaf95a0391c42a18d6
---
M minerva.less/minerva.mixins.less
M resources/mobile.messageBox/messageBox.less
M resources/mobile.startup/Overlay.less
M resources/skins.minerva.fallbackeditor/fallbackeditor.less
4 files changed, 68 insertions(+), 4 deletions(-)
Approvals:
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/minerva.less/minerva.mixins.less b/minerva.less/minerva.mixins.less
index 93c7de2..b12c6f6 100644
--- a/minerva.less/minerva.mixins.less
+++ b/minerva.less/minerva.mixins.less
@@ -45,3 +45,11 @@
-webkit-transition: -webkit-transform @arguments;
transition: transform @arguments;
}
+
+// Generic mixin for applying styles to text that accompanies/adds context to
workflows
+.secondary-text() {
+ font-size: 0.9em;
+ color: @grayMedium;
+ margin-top: 0.5em;
+ line-height: 1.4;
+}
diff --git a/resources/mobile.messageBox/messageBox.less
b/resources/mobile.messageBox/messageBox.less
index debf81f..921e645 100644
--- a/resources/mobile.messageBox/messageBox.less
+++ b/resources/mobile.messageBox/messageBox.less
@@ -2,6 +2,8 @@
@import 'minerva.mixins';
@import 'mediawiki.mixins';
+// Necessary for fallback editor preview.
+.previewnote p,
// Used for messages on login screen (They're more informational than actual
warnings.)
// FIXME: standardise these two classes
.warningbox,
@@ -16,13 +18,20 @@
background: @colorSuccessBackground;
}
+// Necessary for fallback editor preview.
+.previewnote p,
.successbox,
.errorbox,
.warningbox,
.mw-revision {
padding: 1em @contentMargin;
margin: 0 0 1em;
+}
+.successbox,
+.errorbox,
+.warningbox,
+.mw-revision {
h2 {
font: bold 100% @fontFamily;
padding: 0;
diff --git a/resources/mobile.startup/Overlay.less
b/resources/mobile.startup/Overlay.less
index 99927ea..e8c6cd2 100644
--- a/resources/mobile.startup/Overlay.less
+++ b/resources/mobile.startup/Overlay.less
@@ -140,10 +140,7 @@
}
.license {
- font-size: 0.9em;
- color: @grayMedium;
- margin-top: 0.5em;
- line-height: 1.4;
+ .secondary-text();
}
.content {
diff --git a/resources/skins.minerva.fallbackeditor/fallbackeditor.less
b/resources/skins.minerva.fallbackeditor/fallbackeditor.less
index 09a098f..54712ef 100644
--- a/resources/skins.minerva.fallbackeditor/fallbackeditor.less
+++ b/resources/skins.minerva.fallbackeditor/fallbackeditor.less
@@ -15,3 +15,53 @@
max-height: 14em;
}
+.action-submit,
+.action-edit {
+ #page-secondary-actions,
+ #page-actions {
+ display: none;
+ }
+
+ .heading-holder {
+ padding-bottom: 8px;
+ padding-top: 0;
+ font-weight: bold;
+ }
+
+ .editCheckboxes {
+ margin-top: 8px;
+ }
+
+ #mw-anon-edit-warning {
+ padding: 8px;
+ }
+
+ // Parsing information doesn't need to be so big
+ .preview-limit-report-wrapper,
+ // neither to headers for diffs
+ .diff-otitle,
+ .diff-ntitle,
+ // neither does the page title
+ #section_0,
+ // neither do all the warnings
+ #editpage-copywarn,
+ #mw-anon-edit-warning {
+ .secondary-text();
+ }
+
+ // Preview header is hidden given the warning box already
+ // tells the user they are in preview mode.
+ .previewnote h2 {
+ display: none;
+ }
+
+ // show changes specific
+ #wikiDiff table {
+ margin-top: 0;
+
+
[MediaWiki-commits] [Gerrit] mediawiki...MobileFrontend[master]: Improve layout of fallback editor
Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/347127 )
Change subject: Improve layout of fallback editor
..
Improve layout of fallback editor
This attempts to make the save changes button visible without
the user having to scroll down the page and clean up the UI.
Note for anonymous users, the user will have to scroll as the warning
text appears before the form. This is unavoidable and an encouragement
to login!
Styles apply when show changes or show preview have been clicked
When the non-JavaScript editor is open
* Reduce heading font-size
* Reduce size of checkbox labels, warnings and licenses to be consistent
with license box in overlays. Pull out a generic mixin until this
component can be generalised. Note given
skins.minerva.fallbackeditor is only applied when action=edit
there is no additional bloat to the resulting CSS payload on standard
mobile views
* Reducing padding of elements to make room for the important textarea
and buttons.
* In preview mode, style "Remember this is only a preview" as a warningbox
to improve visual separation from rest of content
* Remove use of large headings in editor which make UI more cluttered
Bug: T125174
Change-Id: Ibb7355b828c3bedbe8ba9aeaf95a0391c42a18d6
---
M minerva.less/minerva.mixins.less
M resources/mobile.messageBox/messageBox.less
M resources/mobile.startup/Overlay.less
M resources/skins.minerva.fallbackeditor/fallbackeditor.less
4 files changed, 63 insertions(+), 4 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/27/347127/1
diff --git a/minerva.less/minerva.mixins.less b/minerva.less/minerva.mixins.less
index 93c7de2..b12c6f6 100644
--- a/minerva.less/minerva.mixins.less
+++ b/minerva.less/minerva.mixins.less
@@ -45,3 +45,11 @@
-webkit-transition: -webkit-transform @arguments;
transition: transform @arguments;
}
+
+// Generic mixin for applying styles to text that accompanies/adds context to
workflows
+.secondary-text() {
+ font-size: 0.9em;
+ color: @grayMedium;
+ margin-top: 0.5em;
+ line-height: 1.4;
+}
diff --git a/resources/mobile.messageBox/messageBox.less
b/resources/mobile.messageBox/messageBox.less
index debf81f..c9be983 100644
--- a/resources/mobile.messageBox/messageBox.less
+++ b/resources/mobile.messageBox/messageBox.less
@@ -2,6 +2,8 @@
@import 'minerva.mixins';
@import 'mediawiki.mixins';
+// Necessary for fallback editor preview.
+.previewnote p,
// Used for messages on login screen (They're more informational than actual
warnings.)
// FIXME: standardise these two classes
.warningbox,
@@ -16,6 +18,8 @@
background: @colorSuccessBackground;
}
+// Necessary for fallback editor preview.
+.previewnote p,
.successbox,
.errorbox,
.warningbox,
diff --git a/resources/mobile.startup/Overlay.less
b/resources/mobile.startup/Overlay.less
index 99927ea..e8c6cd2 100644
--- a/resources/mobile.startup/Overlay.less
+++ b/resources/mobile.startup/Overlay.less
@@ -140,10 +140,7 @@
}
.license {
- font-size: 0.9em;
- color: @grayMedium;
- margin-top: 0.5em;
- line-height: 1.4;
+ .secondary-text();
}
.content {
diff --git a/resources/skins.minerva.fallbackeditor/fallbackeditor.less
b/resources/skins.minerva.fallbackeditor/fallbackeditor.less
index 09a098f..54712ef 100644
--- a/resources/skins.minerva.fallbackeditor/fallbackeditor.less
+++ b/resources/skins.minerva.fallbackeditor/fallbackeditor.less
@@ -15,3 +15,53 @@
max-height: 14em;
}
+.action-submit,
+.action-edit {
+ #page-secondary-actions,
+ #page-actions {
+ display: none;
+ }
+
+ .heading-holder {
+ padding-bottom: 8px;
+ padding-top: 0;
+ font-weight: bold;
+ }
+
+ .editCheckboxes {
+ margin-top: 8px;
+ }
+
+ #mw-anon-edit-warning {
+ padding: 8px;
+ }
+
+ // Parsing information doesn't need to be so big
+ .preview-limit-report-wrapper,
+ // neither to headers for diffs
+ .diff-otitle,
+ .diff-ntitle,
+ // neither does the page title
+ #section_0,
+ // neither do all the warnings
+ #editpage-copywarn,
+ #mw-anon-edit-warning {
+ .secondary-text();
+ }
+
+ // Preview header is hidden given the warning box already
+ // tells the user they are in preview mode.
+ .previewnote h2 {
+ display: none;
+ }
+
+ // show changes specific
+ #wikiDiff table {
+ margin-top: 0;
+
+ .diff-otitle,
+ .diff-ntitle {
+ text-align: left;
+ }
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/347127
To unsubscribe, visit
