jenkins-bot has submitted this change and it was merged.
Change subject: Fix styling regression in new editor tutorial
......................................................................
Fix styling regression in new editor tutorial
* Background color change
* Remove box shadow
* Two sentences are in separate lines
* Text is aligned left
* Buttons are aligned right and look the same in all modes
* Smaller padding for the 'start editing' button
Bug: T91141
Change-Id: I57862dc0b7fb2d990ba8a17ae6e0e50755abf6bd
---
M i18n/en.json
M javascripts/modules/tutorials/ContentOverlay.js
M less/minerva.less/minerva.variables.less
M less/modules/tutorials.less
M templates/modules/tutorials/PageActionOverlay.hogan
5 files changed, 29 insertions(+), 25 deletions(-)
Approvals:
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/i18n/en.json b/i18n/en.json
index 322d1e7..61744f8 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -96,7 +96,7 @@
"mobile-frontend-editor-switch-editor": "Switch editor",
"mobile-frontend-editor-tutorial-cancel": "No, thanks",
"mobile-frontend-editor-tutorial-confirm": "Start editing",
- "mobile-frontend-editor-tutorial-summary": "Try improving the $1 page.
Don't be scared of markup.",
+ "mobile-frontend-editor-tutorial-summary": "Try improving the $1
page.<br/>Don't be scared of markup.",
"mobile-frontend-editor-unavailable": "Mobile editing is not currently
available on your browser. Please try a different browser.",
"mobile-frontend-editor-unavailable-header": "Editor unavailable",
"mobile-frontend-editor-undo-unsupported": "Undo is not currently
supported on mobile devices.",
diff --git a/javascripts/modules/tutorials/ContentOverlay.js
b/javascripts/modules/tutorials/ContentOverlay.js
index 059bf2f..f044808 100644
--- a/javascripts/modules/tutorials/ContentOverlay.js
+++ b/javascripts/modules/tutorials/ContentOverlay.js
@@ -83,7 +83,7 @@
this._position( $pa );
this.$pointer = $( '<div>' ).css( {
- 'border-bottom': 'solid 10px #006398',
+ 'border-bottom': 'solid 10px #2E76FF',
'border-right': tb,
'border-left': tb,
position: 'absolute',
diff --git a/less/minerva.less/minerva.variables.less
b/less/minerva.less/minerva.variables.less
index 194ce2c..e5e5205 100644
--- a/less/minerva.less/minerva.variables.less
+++ b/less/minerva.less/minerva.variables.less
@@ -43,7 +43,7 @@
// note this is also used for red links
@redBase: @colorErrorText;
@mainMenuBackgroundColor: @colorGray4;
-@colorTutorial: #006398;
+@colorTutorial: #2E76FF;
@linkColor: #002bb8;
// Use when an element is selected. FIXME: This should be in mediawiki ui.
diff --git a/less/modules/tutorials.less b/less/modules/tutorials.less
index 1642396..6017fc5 100644
--- a/less/modules/tutorials.less
+++ b/less/modules/tutorials.less
@@ -1,26 +1,6 @@
@import "minerva.variables";
@import "minerva.mixins";
-.stable {
- .content-overlay {
-
- .button {
- // FIXME: without this the cloaked input seems to
interfere making cancel button start upload
- position: relative;
- padding: 12px;
- font-weight: bold;
- }
- }
-
- .tutorial-overlay {
- .button {
- // use background to override gradient in other buttons
- background: #fff;
- color: @colorTutorial;
- }
- }
-}
-
.content-overlay {
position: absolute;
top: 0;
@@ -37,13 +17,37 @@
margin: 0 0 1em;
}
+ .button {
+ // FIXME: without this the cloaked input seems to interfere
making cancel button start upload
+ position: relative;
+ padding: 12px;
+ font-weight: bold;
+ }
+
&.tutorial-overlay {
background: @colorTutorial;
+ box-shadow: none;
color: #fff;
+
+ p {
+ text-align: left;
+ }
+
+ .button {
+ // use background to override gradient in other buttons
+ background: #fff;
+ border-radius: 2px;
+ color: @colorTutorial;
+ padding: 6px;
+ }
.cancel.inline {
background: none;
color: #fff;
}
+
+ .button-bar {
+ text-align: right;
+ }
}
}
diff --git a/templates/modules/tutorials/PageActionOverlay.hogan
b/templates/modules/tutorials/PageActionOverlay.hogan
index 1bd72e1..5d034f3 100644
--- a/templates/modules/tutorials/PageActionOverlay.hogan
+++ b/templates/modules/tutorials/PageActionOverlay.hogan
@@ -1,5 +1,5 @@
-<p>{{summary}}</p>
-<div class="button-bar-centered">
+<p>{{{summary}}}</p>
+<div class="button-bar">
<button class="button cancel inline">{{cancelMsg}}</button>
<button class="button actionable">{{confirmMsg}}</button>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/196324
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I57862dc0b7fb2d990ba8a17ae6e0e50755abf6bd
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Phuedx <g...@samsmith.io>
Gerrit-Reviewer: Siebrand <siebr...@kitano.nl>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
