[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