jenkins-bot has submitted this change and it was merged.
Change subject: Use desktop login/account creation form in alpha
......................................................................
Use desktop login/account creation form in alpha
Changes for mobile:
* Hide labels and use placeholders for inputs (Fixes bug 68758)
* Avoid duplicate messages by using desktop version (bug 71771)
* Fixes "Input blue indicators look strange when rounded corners are applied to
mediawiki ui inputs" (bug 69724)
Other changes:
* Use variables for warning, error messages on login form
* Remove error styling introduced in I6b5b98414ceeac6b467b1b7ef29a4cfd8a81a149
now
it is only used on nearby page. Move to nearby and use standard colors
* Remove generic textarea, input field styling now we are using mediawiki ui
Bug: 68758
Bug: 71771
Bug: 69724
Change-Id: I8f89bdaf3dc7fde104f199554b18486c30580910
---
M includes/MobileFrontend.hooks.php
M includes/specials/SpecialNearby.php
M less/common.less
M less/minerva.less/minerva.variables.less
M less/specials/nearby.less
M less/specials/userlogin.less
M less/ui.less
7 files changed, 152 insertions(+), 65 deletions(-)
Approvals:
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index 0deb897..b97f9ef 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -360,7 +360,9 @@
* Special:Contributions without the bells and whistles.
*/
$list['Contributions'] = 'SpecialMobileContributions';
- $list['Userlogin'] = 'SpecialMobileUserlogin';
+ if ( !$ctx->isAlphaGroupMember() ) {
+ $list['Userlogin'] = 'SpecialMobileUserlogin';
+ }
if ( class_exists( 'MWEchoNotifUser' ) ) {
$list['Notifications'] =
'SpecialMobileNotifications';
@@ -534,7 +536,7 @@
public static function onUserLoginForm( &$template ) {
wfProfileIn( __METHOD__ );
$context = MobileContext::singleton();
- if ( $context->shouldDisplayMobileView() ) {
+ if ( $context->shouldDisplayMobileView() &&
!$context->isAlphaGroupMember() ) {
$template = new UserLoginMobileTemplate( $template );
}
wfProfileOut( __METHOD__ );
@@ -551,7 +553,7 @@
public static function onUserCreateForm( &$template ) {
wfProfileIn( __METHOD__ );
$context = MobileContext::singleton();
- if ( $context->shouldDisplayMobileView() ) {
+ if ( $context->shouldDisplayMobileView() &&
!$context->isAlphaGroupMember() ) {
$template = new UserAccountCreateMobileTemplate(
$template );
}
wfProfileOut( __METHOD__ );
diff --git a/includes/specials/SpecialNearby.php
b/includes/specials/SpecialNearby.php
index a635b97..70d819b 100644
--- a/includes/specials/SpecialNearby.php
+++ b/includes/specials/SpecialNearby.php
@@ -44,7 +44,7 @@
) .
Html::openElement( 'div',
array(
- 'class' => 'noscript error alert',
+ 'class' => 'noscript errorbox',
)
) .
Html::openElement( 'div',
diff --git a/less/common.less b/less/common.less
index 99461b2..0896495 100644
--- a/less/common.less
+++ b/less/common.less
@@ -31,13 +31,6 @@
bottom: 0;
}
-#content_wrapper {
- .error {
- color: #C85353;
- background: #FAE1E1 !important;
- }
-}
-
.mw-mf-image-replacement {
font-style: italic;
color: @colorGray7;
@@ -76,13 +69,6 @@
padding: 5px 0 5px 5px;
width: 100%;
resize: none;
-}
-
-input:not([type=submit]), textarea {
- background: #fff;
- border: 1px solid @colorGray12;
- border-radius: 3px;
- padding: 5px;
}
// For old style forms
diff --git a/less/minerva.less/minerva.variables.less
b/less/minerva.less/minerva.variables.less
index e559594..a6b5896 100644
--- a/less/minerva.less/minerva.variables.less
+++ b/less/minerva.less/minerva.variables.less
@@ -44,6 +44,16 @@
// Use when an element is selected. FIXME: This should be in mediawiki ui.
@selectedBackgroundColor: #e6eeff;
+// messages
+@colorWarningBackground: #feb;
+@colorWarningBorder: #fde29b;
+@colorWarningText: #850;
+@colorSuccessBackground: #e1fddf;
+@colorSuccessBorder: #b7fdb5;
+@colorSuccessText: #009000;
+@colorErrorBackground: #fae3e3;
+@colorErrorBorder: #fac5c5;
+
// typography
@fontFamily: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial",
"Liberation Sans", sans-serif;
@fontFamilyHeading: "Linux Libertine", Georgia, Times, serif;
diff --git a/less/specials/nearby.less b/less/specials/nearby.less
index ea48af1..b08ac59 100644
--- a/less/specials/nearby.less
+++ b/less/specials/nearby.less
@@ -13,6 +13,11 @@
}
}
+.errorbox {
+ color: @colorErrorText;
+ background: @colorErrorBackground;
+}
+
.icon-refresh {
.background-image('images/refresh.png');
}
diff --git a/less/specials/userlogin.less b/less/specials/userlogin.less
index d881c4b..6ff7506 100644
--- a/less/specials/userlogin.less
+++ b/less/specials/userlogin.less
@@ -6,65 +6,149 @@
display: none;
}
-#mw-mf-login,
-#mw-mf-accountcreate {
- .watermark {
- text-align: center;
- // FIXME: Should we set the height here?
- height: 72px;
- margin-bottom: @headingMargin;
- img {
- // Important to override default max-width and height
auto combo
- height: 72px !important;
+.stable {
+ #mw-mf-login,
+ #mw-mf-accountcreate {
+ .watermark {
+ text-align: center;
+ // FIXME: Should we set the height here?
+ height: 72px;
+ margin-bottom: @headingMargin;
+ img {
+ // Important to override default max-width and
height auto combo
+ height: 72px !important;
+ }
+ }
+
+ // FIXME: Remove when mw-ui in MobileFrontend
+ .mw-ui-block {
+ display: block;
+ text-align: center;
+ padding-bottom: 12px;
}
}
- // FIXME: Remove when mw-ui in MobileFrontend
- .mw-ui-block {
- display: block;
- text-align: center;
+ #mw-mf-accountcreate {
+ .alert {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+
+ /* sign up form */
+ form.user-login {
padding-bottom: 12px;
+
+ input {
+ width: 100%;
+ display: block;
+ }
}
- .headmsg {
- background-color: @colorGray14;
- border: 1px solid @colorGray12;
- color: @grayDark;
- padding: 0.5em 1em;
- margin: 1em 0;
+ /* fancycaptcha reload button */
+ #mf-captcha-reload-container {
+ border-top: 1px dashed #e1e1e1;
+ display: inline-block;
+ padding: 14px 25%;
+
+ // FIXME: Make use of icon classes
+ .fancycaptcha-reload {
+ color: @colorGray7;
+ font-weight: bold;
+ background-image: url(images/login/refresh.png);
+ background-repeat: no-repeat;
+ background-size: 24px;
+ padding: 4px 0px 4px 26px;
+ }
}
}
-#mw-mf-accountcreate {
- .alert {
- margin-left: 0;
- margin-right: 0;
+// Styles apply to alpha version of login form.
+#mw-mf-accountcreate .headmsg,
+#mw-mf-login .headmsg,
+// Styles for new login form.
+.alpha .warningbox {
+ background-color: @colorGray14;
+ border: 1px solid @colorGray12;
+ color: @grayDark;
+ padding: 0.5em 1em;
+ margin: 1em 0;
+}
+
+.alpha {
+ .mw-ui-vform {
+ margin: auto;
}
}
-/* sign up form */
-form.user-login {
- padding-bottom: 12px;
+// The following css rules apply to beta/alpha mobile only
+// FIXME: Some of these rules should actually be mobile first, only hiding
inputs needs to be wrapped in a media query
+@media all and (max-width: @wgMFDeviceWidthTablet) {
+ @margin: 12px;
- input {
- width: 100%;
- display: block;
- }
-}
+ .alpha {
+ #userloginForm {
+ // Hide keep me logged in checkbox on mobile.
+ // FIXME: this should be checked by default on mobile.
Use JavaScript to check this?
+ .mw-ui-checkbox {
+ display: none;
+ }
-/* fancycaptcha reload button */
-#mf-captcha-reload-container {
- border-top: 1px dashed #e1e1e1;
- display: inline-block;
- padding: 14px 25%;
+ .loginText {
+ border-bottom: 0;
+ }
+ }
- // FIXME: Make use of icon classes
- .fancycaptcha-reload {
- color: @colorGray7;
- font-weight: bold;
- background-image: url(images/login/refresh.png);
- background-repeat: no-repeat;
- background-size: 24px;
- padding: 4px 0px 4px 26px;
+ // account creation
+ #userlogin2 {
+ #wpEmail,
+ .loginPassword {
+ border-bottom: 0;
+ }
+
+ .mw-ui-checkbox {
+ margin: @margin 0;
+ }
+ }
+
+ .mw-ui-vform {
+ margin: auto;
+
+ .errorbox,
+ .successbox,
+ .warningbox {
+ padding: 1em @contentMargin;
+ margin: 0 0 1em;
+ }
+
+ .mw-ui-input {
+ padding: .8em .5em;
+ border: none;
+ }
+
+ // hide on mobile only media queries (placeholder
support)
+ .mw-ui-vform-field {
+ margin-bottom: 0;
+
+ .mw-ui-button {
+ margin: @margin 0;
+ }
+
+ // user can rely on placeholder attributes in
fields media query support should mean placeholder support
+ // but don't hide any checkbox labels
+ > label {
+ display: none;
+ }
+
+ // Make the inputs look connected in mobile mode
+ .mw-ui-input {
+ border: solid 1px @colorGrayLight;
+ }
+ }
+ }
+
+ #mw-createaccount-another {
+ margin-top: @margin;
+ }
}
}
diff --git a/less/ui.less b/less/ui.less
index 71f8fbb..f8b8a23 100644
--- a/less/ui.less
+++ b/less/ui.less
@@ -97,8 +97,8 @@
margin: 0 0 1em;
&.warning {
- color: #850;
- background: #feb
+ color: @colorWarningText;
+ background: @colorWarningBackground;
}
h2 {
--
To view, visit https://gerrit.wikimedia.org/r/165634
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8f89bdaf3dc7fde104f199554b18486c30580910
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: Robmoen <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
