);
$divCssClasses = array( "mw-htmlform-field-$fieldType", $this->mClass, $errorClass );
if ( $this->mParent->isVForm() ) {
- $divCssClasses[] = 'mw-ui-vform-div';
+ $divCssClasses[] = 'mw-ui-vform-field';
}
$wrapperAttributes = array(
<?php } ?>
</div>
- <div>
+ <div class="mw-ui-vform-field">
<label for='wpName2'>
<?php $this->msg( 'userlogin-yourname' ); ?>
?>
</div>
- <div>
+ <div class="mw-ui-vform-field">
<?php if ( $this->data['createemail'] ) { ?>
<label class="mw-ui-checkbox-label">
<input name="wpCreateaccountMail" type="checkbox" value="1" id="wpCreateaccountMail" tabindex="2"
<?php } ?>
</div>
- <div class="mw-row-password">
+ <div class="mw-ui-vform-field mw-row-password">
<label for='wpPassword2'><?php $this->msg( 'userlogin-yourpassword' ); ?></label>
<?php
echo Html::input( 'wpPassword', null, 'password', array(
$select->addOption( $dom );
}
?>
- <div id="mw-user-domain-section">
+ <div class="mw-ui-vform-field" id="mw-user-domain-section">
<label for="wpDomain"><?php $this->msg( 'yourdomainname' ); ?></label>
<div class="mw-input">
<?php echo $select->getHTML(); ?>
</div>
<?php } ?>
- <div class="mw-row-password">
+ <div class="mw-ui-vform-field mw-row-password">
<label for='wpRetype'><?php $this->msg( 'createacct-yourpasswordagain' ); ?></label>
<?php
echo Html::input( 'wpRetype', null, 'password', array(
?>
</div>
- <div>
+ <div class="mw-ui-vform-field">
<?php if ( $this->data['useemail'] ) { ?>
<label for='wpEmail'>
<?php
</div>
<?php if ( $this->data['userealname'] ) { ?>
- <div>
+ <div class="mw-ui-vform-field">
<label for='wpRealName'><?php $this->msg( 'createacct-realname' ); ?></label>
<input type='text' class='mw-input loginText' name="wpRealName" id="wpRealName"
tabindex="7"
<?php } ?>
<?php if ( $this->data['usereason'] ) { ?>
- <div>
+ <div class="mw-ui-vform-field">
<label for='wpReason'><?php $this->msg( 'createacct-reason' ); ?></label>
<?php echo Html::input( 'wpReason', $this->data['reason'], 'text', array(
'class' => 'mw-input loginText',
$tabIndex = 9;
if ( isset( $this->data['extraInput'] ) && is_array( $this->data['extraInput'] ) ) {
foreach ( $this->data['extraInput'] as $inputItem ) { ?>
- <div>
+ <div class="mw-ui-vform-field">
<?php
// If it's a checkbox, output the whole thing (assume it has a msg).
if ( $inputItem['type'] == 'checkbox' ) {
// so skip one index.
$tabIndex++;
?>
- <div class="mw-submit">
+ <div class="mw-ui-vform-field mw-submit">
<?php
echo Html::input(
'wpCreateaccount',
</div>
<?php } ?>
- <div>
+ <div class="mw-ui-vform-field">
<label for='wpName1'>
<?php
$this->msg( 'userlogin-yourname' );
?>
</div>
- <div>
+ <div class="mw-ui-vform-field">
<label for='wpPassword1'>
<?php
$this->msg( 'userlogin-yourpassword' );
$select->addOption( $dom );
}
?>
- <div id="mw-user-domain-section">
+ <div class="mw-ui-vform-field" id="mw-user-domain-section">
<label for='wpDomain'><?php $this->msg( 'yourdomainname' ); ?></label>
<?php echo $select->getHTML(); ?>
</div>
}
?>
- <div>
+ <div class="mw-ui-vform-field">
<?php if ( $this->data['canremember'] ) { ?>
<label class="mw-ui-checkbox-label">
<input name="wpRemember" type="checkbox" value="1" id="wpRemember" tabindex="4"
<?php } ?>
</div>
- <div>
+ <div class="mw-ui-vform-field">
<?php
echo Html::input( 'wpLoginAttempt', $this->getMsg( 'pt-login-button' )->text(), 'submit', array(
'id' => 'wpLoginAttempt',
) );
?>
</div>
- <div id="mw-userlogin-help">
+
+ <div class="mw-ui-vform-field" id="mw-userlogin-help">
<?php
echo Html::element(
'a',
);
?>
</div>
+
<?php if ( $this->haveData( 'createOrLoginHref' ) ) { ?>
<?php if ( $this->data['loggedin'] ) { ?>
<div id="mw-createaccount-another">
//
// Markup:
// <form class="mw-ui-vform">
-// <div class="mw-ui-vform-div">This is a form example.</div>
-// <div class="mw-ui-vform-div">
+// <div class="mw-ui-vform-field">This is a form example.</div>
+// <div class="mw-ui-vform-field">
// <label>Username </label>
// <input value="input">
// </div>
-// <div>
+// <div class="mw-ui-vform-field">
// <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
// </div>
// </form>
width: @defaultFormWidth;
- // Immediate divs in a vform are block and spaced-out.
- // XXX: We shouldn't depend on the tag name here...
- & > div {
- display: block;
- margin: 0 0 15px 0;
- padding: 0;
- width: 100%;
- }
-
// MW currently doesn't use the type attribute everywhere on inputs.
input,
select,
// <div class="error">
// <ul><li>There are problems with some of your input.</li></ul>
// </div>
- // <div class="mw-ui-vform-div">
+ // <div class="mw-ui-vform-field">
// <input type="text" value="input" class="mw-ui-input">
// </div>
- // <div class="mw-ui-vform-div">
+ // <div class="mw-ui-vform-field">
// <select>
// <option value="1">Option 1</option>
// <option value="2">Option 2</option>
// </select>
// <span class="error">The value you specified is not a valid option.</span>
// </div>
- // <div>
+ // <div class="mw-ui-vform-field">
// <button class="mw-ui-button">Button in vform</button>
// </div>
// </form>
// This specifies styling for individual field validation error messages.
// Show them below the fields to prevent line break glitches, and leave
// some space between the field and the error message box.
- .mw-ui-vform-div .error {
+ .mw-ui-vform-div .error, /* for backwards-compatibility, remove before 1.24 */
+ .mw-ui-vform-field .error {
display: block;
margin-top: 5px;
}
// Elements
// --------------------------------------------------------------------------
-// Apply this to individual elements to style them.
-// You generally don't need to use this class on divs within an Agora
-// form container such as mw-ui-vform
-// XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
-// XXX: What is this even for?
-.mw-ui-vform-div {
+// A wrapper for a single form field: the <input> / <select> / <button> element,
+// help text, labels, associated error/warning/success messages, and so on.
+// Elements with this class are generated by HTMLFormField in core MediaWiki.
+//
+// (We use a broad definition of 'field' here: a purely textual information
+// block is also a "field".)
+.mw-ui-vform-div, /* for backwards-compatibility, remove before 1.24 */
+.mw-ui-vform-field {
display: block;
margin: 0 0 15px;
padding: 0;