Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/52179
Change subject: Bug 44646: Standardise login and account creation forms
......................................................................
Bug 44646: Standardise login and account creation forms
Make them use the same css, tweak css (Munaf approved)
Change-Id: I7f799a913d603f309507820ce850d7ef14a05d33
---
M includes/skins/UserAccountCreateMobileTemplate.php
M includes/skins/UserLoginMobileTemplate.php
M less/common/mf-common.less
M less/specials/userlogin.less
M stylesheets/common/mf-common.css
M stylesheets/specials/userlogin.css
6 files changed, 62 insertions(+), 149 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/79/52179/1
diff --git a/includes/skins/UserAccountCreateMobileTemplate.php
b/includes/skins/UserAccountCreateMobileTemplate.php
index 2552dfa..7796f68 100644
--- a/includes/skins/UserAccountCreateMobileTemplate.php
+++ b/includes/skins/UserAccountCreateMobileTemplate.php
@@ -48,6 +48,7 @@
Html::openElement( 'form',
array( 'name' => 'userlogin2',
'method' => 'post',
+ 'class' => 'user-login',
'action' => $action,
'id' => 'userlogin2' ) ) .
Html::openElement( 'div',
diff --git a/includes/skins/UserLoginMobileTemplate.php
b/includes/skins/UserLoginMobileTemplate.php
index 50775ac..c87b689 100644
--- a/includes/skins/UserLoginMobileTemplate.php
+++ b/includes/skins/UserLoginMobileTemplate.php
@@ -61,20 +61,12 @@
$form = Html::openElement( 'div', array() ) .
Html::openElement( 'form',
array( 'name' => 'userlogin',
+ 'class' => 'user-login',
'method' => 'post',
'action' => $action ) ) .
- Html::openElement( 'table',
- array( 'class' => 'user-login' ) ) .
- Html::openElement( 'tbody' ) .
- Html::openElement( 'tr' ) .
- Html::openElement( 'td',
- array( 'class' => 'mw-label' ) ) .
- Html::element( 'label',
- array( 'for' => 'wpName1' ), wfMessage(
'mobile-frontend-username' )->text() ) .
- Html::closeElement( 'td' ) .
- Html::closeElement( 'tr' ) .
- Html::openElement( 'tr' ) .
- Html::openElement( 'td' ) .
+ Html::openElement( 'div', array(
+ 'class' => 'wpInputs',
+ ) ) .
Html::input( 'wpName', $username, 'text',
array( 'class' => 'loginText',
'placeholder' => wfMessage(
'mobile-frontend-username-placeholder' )->text(),
@@ -82,40 +74,17 @@
'tabindex' => '1',
'size' => '20',
'required' ) ) .
- Html::closeElement( 'td' ) .
- Html::closeElement( 'tr' ) .
- Html::openElement( 'tr' ) .
- Html::openElement( 'td',
- array( 'class' => 'mw-label' ) ) .
- Html::element( 'label',
- array( 'for' => 'wpPassword1' ), wfMessage(
'mobile-frontend-password' )->text() ) .
- Html::closeElement( 'td' ) .
- Html::closeElement( 'tr' ) .
- Html::openElement( 'tr' ) .
- Html::openElement( 'td',
- array( 'class' => 'mw-input' ) ) .
Html::input( 'wpPassword', null, 'password',
array( 'class' => 'loginPassword',
'placeholder' => wfMessage(
'mobile-frontend-password-placeholder' )->text(),
'id' => 'wpPassword1',
'tabindex' => '2',
'size' => '20' ) ) .
- Html::closeElement( 'td' ) .
- Html::closeElement( 'tr' ) .
- Html::openElement( 'tr' ) .
- Html::element( 'td' ) .
- Html::closeElement( 'tr' ) .
- Html::openElement( 'tr' ) .
- Html::openElement( 'td',
- array( 'class' => 'mw-submit' ) ) .
+ Html::closeElement( 'div' ) .
Html::input( 'wpLoginAttempt', wfMessage(
'mobile-frontend-login' )->text(), 'submit',
array( 'id' => 'wpLoginAttempt',
'tabindex' => '3' ) ) .
$signupLink .
- Html::closeElement( 'td' ) .
- Html::closeElement( 'tr' ) .
- Html::closeElement( 'tbody' ) .
- Html::closeElement( 'table' ) .
Html::input( 'wpLoginToken', $token, 'hidden' ) .
Html::input( 'watch', $watchArticle, 'hidden' ) .
$stickHTTPS .
diff --git a/less/common/mf-common.less b/less/common/mf-common.less
index b0916cc..a0dc398 100644
--- a/less/common/mf-common.less
+++ b/less/common/mf-common.less
@@ -26,7 +26,6 @@
input:not([type=submit]), textarea {
background: #fff;
border: 1px solid #ccc;
- .boxshadow( inset, 0, 0, 4px, #ddd );
}
button.disabled {
diff --git a/less/specials/userlogin.less b/less/specials/userlogin.less
index 54dd5ce..2e0a1b4 100644
--- a/less/specials/userlogin.less
+++ b/less/specials/userlogin.less
@@ -21,10 +21,12 @@
#mw-mf-accountcreate {
.watermark {
background-position: center center;
- height: 90px;
+ height: 72px;
+ .background-size( auto, 72px );
width: 100%;
background-image: url(images/W.png);
background-repeat: no-repeat;
+ margin-bottom: @headingMarginTop;
}
.headmsg {
@@ -44,61 +46,19 @@
}
}
-table.user-login {
- border: none;
- display: table;
- font-family: @fontFamily;
-
- tbody {
- display: table-row-group;
- }
-
- tr {
- display: table-row;
- td {
- border: none;
- }
- }
-
- .mw-label {
- display: none;
- }
-
- td,
- tr,
- input {
- width: 100%;
- }
-
- input.loginPassword,
- input.loginText {
- font-family: @fontFamily;
- font-size: @baseFontSize * 0.9;
- .box-sizing(border-box);
- border: 1px solid #C9C9C9;
- box-shadow: none;
- .border-radius(5px);
- width: 100%;
- padding: ( @inputFontSize/2 ) ( @inputFontSize * 1.5 ) (
@inputFontSize/2 ) ( @overlayHeadingIndent );
- }
-
- a.mw-mf-create-account {
- text-align: center;
- margin-top: 20px;
- display: block;
- }
-}
-
/* sign up form */
-form#userlogin2 {
+form.user-login {
+ padding-bottom: 12px;
input {
+ -webkit-appearance: none;
box-shadow: none;
display: block;
width: 100%;
- padding: 0;
text-align: left;
- padding: 8px;
+ text-shadow: none;
+ padding: 1em 0.5em;
+ font-size: @baseFontSize;
border: none;
border-bottom: solid 1px #E1E1E1;
.box-sizing( border-box );
@@ -115,7 +75,6 @@
}
div.wpCaptcha {
- margin: 12px 0;
input {
border-bottom: none;
@@ -127,14 +86,26 @@
}
}
+ div.wpCaptcha,
+ #wpLoginAttempt {
+ margin: 12px 0;
+ }
+
+ #wpLoginAttempt,
#wpCreateaccount {
text-align: center;
padding-top: 8px;
- .border-radius( 0 );
padding-top: 12px;
padding-bottom: 12px;
+ margin-bottom: 12px;
font-size: @baseFontSize;
}
+
+ .mw-mf-create-account {
+ padding-top: 12px;
+ display: block;
+ text-align: center;
+ }
}
// FIXME: temporary hack to make CentralNotice a bit less confusing.
diff --git a/stylesheets/common/mf-common.css b/stylesheets/common/mf-common.css
index 0a51df0..46af7b2 100644
--- a/stylesheets/common/mf-common.css
+++ b/stylesheets/common/mf-common.css
@@ -23,7 +23,6 @@
textarea {
background: #fff;
border: 1px solid #ccc;
- box-shadow: inset 0 0 4px #dddddd;
}
button.disabled {
opacity: 0.2;
diff --git a/stylesheets/specials/userlogin.css
b/stylesheets/specials/userlogin.css
index 828e5dc..f6428f6 100644
--- a/stylesheets/specials/userlogin.css
+++ b/stylesheets/specials/userlogin.css
@@ -7,10 +7,17 @@
#mw-mf-login .watermark,
#mw-mf-accountcreate .watermark {
background-position: center center;
- height: 90px;
+ height: 72px;
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: auto 72px;
+ -o-background-size: auto 72px;
+ -webkit-background-size: auto 72px;
+ background-size: auto 72px;
width: 100%;
background-image: url(images/W.png);
background-repeat: no-repeat;
+ margin-bottom: 14pt;
}
#mw-mf-login .headmsg,
#mw-mf-accountcreate .headmsg {
@@ -25,57 +32,19 @@
margin-left: 0;
margin-right: 0;
}
-table.user-login {
- border: none;
- display: table;
- font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-}
-table.user-login tbody {
- display: table-row-group;
-}
-table.user-login tr {
- display: table-row;
-}
-table.user-login tr td {
- border: none;
-}
-table.user-login .mw-label {
- display: none;
-}
-table.user-login td,
-table.user-login tr,
-table.user-login input {
- width: 100%;
-}
-table.user-login input.loginPassword,
-table.user-login input.loginText {
- font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
- font-size: 0.9em;
- -moz-box-sizing: border-box;
- -o-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border: 1px solid #C9C9C9;
- box-shadow: none;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- width: 100%;
- padding: 1em 3em 1em 0.4em;
-}
-table.user-login a.mw-mf-create-account {
- text-align: center;
- margin-top: 20px;
- display: block;
-}
/* sign up form */
-form#userlogin2 input {
+form.user-login {
+ padding-bottom: 12px;
+}
+form.user-login input {
+ -webkit-appearance: none;
box-shadow: none;
display: block;
width: 100%;
- padding: 0;
text-align: left;
- padding: 8px;
+ text-shadow: none;
+ padding: 1em 0.5em;
+ font-size: 1em;
border: none;
border-bottom: solid 1px #E1E1E1;
-moz-box-sizing: border-box;
@@ -83,37 +52,42 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
-form#userlogin2 div.wpInputs,
-form#userlogin2 div.wpCaptcha {
+form.user-login div.wpInputs,
+form.user-login div.wpCaptcha {
border: solid 1px #E1E1E1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
-form#userlogin2 div.wpInputs input:last-child,
-form#userlogin2 div.wpCaptcha input:last-child {
+form.user-login div.wpInputs input:last-child,
+form.user-login div.wpCaptcha input:last-child {
border-bottom: none;
}
-form#userlogin2 div.wpCaptcha {
- margin: 12px 0;
-}
-form#userlogin2 div.wpCaptcha input {
+form.user-login div.wpCaptcha input {
border-bottom: none;
}
-form#userlogin2 div.wpCaptcha img.wpCaptcha {
+form.user-login div.wpCaptcha img.wpCaptcha {
display: block;
margin: auto;
}
-form#userlogin2 #wpCreateaccount {
+form.user-login div.wpCaptcha,
+form.user-login #wpLoginAttempt {
+ margin: 12px 0;
+}
+form.user-login #wpLoginAttempt,
+form.user-login #wpCreateaccount {
text-align: center;
padding-top: 8px;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
padding-top: 12px;
padding-bottom: 12px;
+ margin-bottom: 12px;
font-size: 1em;
}
+form.user-login .mw-mf-create-account {
+ padding-top: 12px;
+ display: block;
+ text-align: center;
+}
#mw-returnto {
padding-top: 2em;
height: 100%;
--
To view, visit https://gerrit.wikimedia.org/r/52179
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7f799a913d603f309507820ce850d7ef14a05d33
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
