| Index: trunk/extensions/UsabilityInitiative/OptIn/OptIn.css |
| — | — | @@ -125,20 +125,35 @@ |
| 126 | 126 | margin: 0; |
| 127 | 127 | padding: 0; |
| 128 | 128 | } |
| 129 | | -form#optin-survey table { |
| | 129 | +form#optin-survey dl { |
| 130 | 130 | margin: 0; |
| 131 | 131 | padding: 0; |
| 132 | 132 | } |
| 133 | | -form#optin-survey table td { |
| | 133 | +form#optin-survey dl dt, |
| | 134 | +form#optin-survey dl dd { |
| 134 | 135 | margin: 0; |
| 135 | | - padding: 0.5em; |
| | 136 | + margin-bottom: 0.5em; |
| 136 | 137 | line-height: 2em; |
| 137 | 138 | } |
| 138 | | -form#optin-survey table td p { |
| | 139 | +form#optin-survey dl dt { |
| | 140 | + font-size: large; |
| | 141 | +} |
| | 142 | +form#optin-survey dl dd { |
| | 143 | + margin-left: 2em; |
| | 144 | +} |
| | 145 | +form#optin-survey dl dd textarea { |
| | 146 | + width: 30em; |
| | 147 | + height: 4em; |
| | 148 | +} |
| | 149 | +form#optin-survey dl dt p, |
| | 150 | +form#optin-survey dl dd p { |
| 139 | 151 | margin: 0; |
| 140 | 152 | padding: 0; |
| 141 | 153 | line-height: 2em; |
| 142 | 154 | } |
| 143 | | -form#optin-survey table td.optin-survey-submit { |
| | 155 | +form#optin-survey dl dt.optin-survey-submit { |
| 144 | 156 | text-align: right; |
| | 157 | +} |
| | 158 | +form#optin-survey input.optin-need-other { |
| | 159 | + clear: both; |
| 145 | 160 | } |
| \ No newline at end of file |
| Index: trunk/extensions/UsabilityInitiative/OptIn/SpecialOptIn.php |
| — | — | @@ -185,17 +185,17 @@ |
| 186 | 186 | $wgOptInStyleVersion ); |
| 187 | 187 | UsabilityInitiativeHooks::addStyle( 'OptIn/OptIn.css', |
| 188 | 188 | $wgOptInStyleVersion ); |
| 189 | | - $retval = Xml::openElement( 'table' ); |
| | 189 | + $retval = Xml::openElement( 'dl' ); |
| 190 | 190 | foreach ( $wgOptInSurvey as $id => $question ) { |
| 191 | 191 | switch ( $question['type'] ) { |
| 192 | 192 | case 'dropdown': |
| 193 | | - $retval .= Xml::openElement( 'tr' ); |
| 194 | | - $retval .= Xml::tags( 'td', array( 'valign' => 'top' ), |
| 195 | | - wfMsgWikiHtml( $question['question'] ) ); |
| 196 | | - $retval .= Xml::openElement( 'td', |
| 197 | | - array( 'valign' => 'top' ) ); |
| 198 | | - $attrs = array( 'id' => "survey-$id", |
| 199 | | - 'name' => "survey-$id" ); |
| | 193 | + $retval .= Xml::tags( |
| | 194 | + 'dt', null, wfMsgWikiHtml( $question['question'] ) |
| | 195 | + ); |
| | 196 | + $retval .= Xml::openElement( 'dd' ); |
| | 197 | + $attrs = array( |
| | 198 | + 'id' => "survey-$id", 'name' => "survey-$id" |
| | 199 | + ); |
| 200 | 200 | if ( isset( $question['other'] ) ) { |
| 201 | 201 | $attrs['class'] = 'optin-need-other'; |
| 202 | 202 | } |
| — | — | @@ -205,153 +205,184 @@ |
| 206 | 206 | $retval .= Xml::option( wfMsg( $answer ), $aid ); |
| 207 | 207 | } |
| 208 | 208 | if ( isset( $question['other'] ) ) { |
| 209 | | - $retval .= Xml::option( wfMsg( $question['other'] ), |
| 210 | | - 'other' ); |
| | 209 | + $retval .= Xml::option( |
| | 210 | + wfMsg( $question['other'] ), 'other' |
| | 211 | + ); |
| 211 | 212 | } |
| 212 | 213 | $retval .= Xml::closeElement( 'select' ); |
| 213 | 214 | if ( isset( $question['other'] ) ) { |
| 214 | 215 | $retval .= ' '; |
| 215 | | - $retval .= Xml::input( "survey-$id-other", |
| 216 | | - false, false, |
| 217 | | - array( 'class' => 'optin-other-select', |
| 218 | | - 'id' => "survey-$id-other" ) ); |
| | 216 | + $retval .= Xml::input( |
| | 217 | + "survey-$id-other", |
| | 218 | + false, |
| | 219 | + false, |
| | 220 | + array( |
| | 221 | + 'class' => 'optin-other-select', |
| | 222 | + 'id' => "survey-$id-other" |
| | 223 | + ) |
| | 224 | + ); |
| 219 | 225 | } |
| 220 | | - $retval .= Xml::closeElement( 'td' ); |
| 221 | | - $retval .= Xml::closeElement( 'tr' ); |
| | 226 | + $retval .= Xml::closeElement( 'dd' ); |
| 222 | 227 | break; |
| 223 | 228 | case 'radios': |
| 224 | | - $retval .= Xml::openElement( 'tr' ); |
| 225 | | - $retval .= Xml::tags( 'td', |
| 226 | | - array( 'valign' => 'top' ), |
| 227 | | - wfMsgWikiHtml( $question['question'] ) ); |
| 228 | | - $retval .= Xml::openElement( 'td', |
| 229 | | - array( 'valign' => 'top' ) ); |
| | 229 | + $retval .= Xml::tags( |
| | 230 | + 'dt', null, wfMsgWikiHtml( $question['question'] ) |
| | 231 | + ); |
| | 232 | + $retval .= Xml::openElement( 'dd' ); |
| 230 | 233 | $radios = array(); |
| 231 | 234 | foreach ( $question['answers'] as $aid => $answer ) { |
| 232 | | - $radios[] = Xml::radioLabel( wfMsg( $answer ), |
| 233 | | - "survey-$id", $aid, "survey-$id-$aid" ); |
| | 235 | + $radios[] = Xml::radioLabel( |
| | 236 | + wfMsg( $answer ), "survey-$id", $aid, "survey-$id-$aid" |
| | 237 | + ); |
| 234 | 238 | } |
| 235 | 239 | if ( isset( $question['other'] ) ) { |
| 236 | | - $radios[] = Xml::radioLabel( wfMsg( $question['other'] ), |
| 237 | | - "survey-$id", 'other', "survey-$id-other-radio" ) . |
| 238 | | - ' ' . |
| 239 | | - Xml::input( "survey-$id-other", |
| 240 | | - false, false, |
| 241 | | - array( 'class' => 'optin-other-radios' ) ); |
| | 240 | + $radios[] = Xml::radioLabel( |
| | 241 | + wfMsg( $question['other'] ), |
| | 242 | + "survey-$id", |
| | 243 | + 'other', |
| | 244 | + "survey-$id-other-radio" |
| | 245 | + ) . |
| | 246 | + ' ' . |
| | 247 | + Xml::input( |
| | 248 | + "survey-$id-other", |
| | 249 | + false, |
| | 250 | + false, |
| | 251 | + array( 'class' => 'optin-other-radios' ) |
| | 252 | + ); |
| 242 | 253 | } |
| 243 | 254 | $retval .= implode( Xml::element( 'br' ), $radios ); |
| 244 | | - $retval .= Xml::closeElement( 'td' ); |
| 245 | | - $retval .= Xml::closeElement( 'tr' ); |
| | 255 | + $retval .= Xml::closeElement( 'dd' ); |
| 246 | 256 | break; |
| 247 | 257 | case 'checkboxes': |
| 248 | | - $retval .= Xml::openElement( 'tr' ); |
| 249 | | - $retval .= Xml::tags( 'td', |
| 250 | | - array( 'valign' => 'top' ), |
| 251 | | - wfMsgWikiHtml( $question['question'] ) ); |
| 252 | | - $retval .= Xml::openElement( 'td', |
| 253 | | - array( 'valign' => 'top' ) ); |
| | 258 | + $retval .= Xml::tags( |
| | 259 | + 'dt', null, wfMsgWikiHtml( $question['question'] ) |
| | 260 | + ); |
| | 261 | + $retval .= Xml::openElement( 'dd' ); |
| 254 | 262 | $checkboxes = array(); |
| 255 | 263 | foreach ( $question['answers'] as $aid => $answer ) { |
| 256 | | - $checkboxes[] = Xml::checkLabel( wfMsg( $answer ), |
| 257 | | - "survey-{$id}[]", "survey-$id-$aid", false, |
| 258 | | - array( 'value' => $aid ) ); |
| | 264 | + $checkboxes[] = Xml::checkLabel( |
| | 265 | + wfMsg( $answer ), |
| | 266 | + "survey-{$id}[]", |
| | 267 | + "survey-$id-$aid", |
| | 268 | + false, |
| | 269 | + array( 'value' => $aid ) |
| | 270 | + ); |
| 259 | 271 | } |
| 260 | 272 | if ( isset( $question['other'] ) ) { |
| 261 | | - $checkboxes[] = Xml::checkLabel( wfMsg( $question['other'] ), |
| 262 | | - "survey-{$id}[]", "survey-$id-other-check", false, |
| 263 | | - array( 'value' => 'other' ) ) . |
| 264 | | - ' ' . |
| 265 | | - Xml::input( "survey-$id-other", |
| 266 | | - false, false, |
| 267 | | - array( 'class' => 'optin-other-checks' ) ); |
| | 273 | + $checkboxes[] = Xml::checkLabel( |
| | 274 | + wfMsg( $question['other'] ), |
| | 275 | + "survey-{$id}[]", |
| | 276 | + "survey-$id-other-check", |
| | 277 | + false, |
| | 278 | + array( 'value' => 'other' ) |
| | 279 | + ) . |
| | 280 | + ' ' . |
| | 281 | + Xml::input( |
| | 282 | + "survey-$id-other", |
| | 283 | + false, |
| | 284 | + false, |
| | 285 | + array( 'class' => 'optin-other-checks' ) |
| | 286 | + ); |
| 268 | 287 | } |
| 269 | 288 | $retval .= implode( Xml::element( 'br' ), $checkboxes ); |
| 270 | | - $retval .= Xml::closeElement( 'td' ); |
| 271 | | - $retval .= Xml::closeElement( 'tr' ); |
| | 289 | + $retval .= Xml::closeElement( 'dd' ); |
| 272 | 290 | break; |
| 273 | 291 | case 'yesno': |
| 274 | | - $retval .= Xml::openElement( 'tr' ); |
| 275 | | - $retval .= Xml::tags( 'td', |
| 276 | | - array( 'valign' => 'top' ), |
| 277 | | - wfMsgWikiHtml( $question['question'] ) ); |
| 278 | | - $retval .= Xml::openElement( 'td', |
| 279 | | - array( 'valign' => 'top' ) ); |
| 280 | | - $retval .= Xml::radioLabel( wfMsg( 'optin-survey-yes' ), |
| 281 | | - "survey-$id", 'yes', "survey-$id-yes", |
| 282 | | - false, array( 'class' => 'survey-yes' ) ); |
| | 292 | + $retval .= Xml::tags( |
| | 293 | + 'dt', null, wfMsgWikiHtml( $question['question'] ) |
| | 294 | + ); |
| | 295 | + $retval .= Xml::openElement( 'dd' ); |
| | 296 | + $retval .= Xml::radioLabel( |
| | 297 | + wfMsg( 'optin-survey-yes' ), |
| | 298 | + "survey-$id", |
| | 299 | + 'yes', |
| | 300 | + "survey-$id-yes", |
| | 301 | + false, |
| | 302 | + array( 'class' => 'survey-yes' ) |
| | 303 | + ); |
| 283 | 304 | $retval .= Xml::element( 'br' ); |
| 284 | | - $retval .= Xml::radioLabel( wfMsg( 'optin-survey-no' ), |
| 285 | | - "survey-$id", 'no', "survey-$id-no", |
| 286 | | - false, array( 'class' => 'survey-no' ) ); |
| 287 | | - $retval .= Xml::closeElement( 'td' ); |
| 288 | | - $retval .= Xml::closeElement( 'tr' ); |
| 289 | | - |
| | 305 | + $retval .= Xml::radioLabel( |
| | 306 | + wfMsg( 'optin-survey-no' ), |
| | 307 | + "survey-$id", |
| | 308 | + 'no', |
| | 309 | + "survey-$id-no", |
| | 310 | + false, |
| | 311 | + array( 'class' => 'survey-no' ) |
| | 312 | + ); |
| | 313 | + $retval .= Xml::closeElement( 'dd' ); |
| 290 | 314 | if ( isset( $question['ifyes'] ) ) { |
| 291 | | - $retval .= Xml::openElement( 'tr', |
| 292 | | - array( 'class' => 'survey-ifno', |
| 293 | | - 'id' => "survey-$id-ifyes-row" ) ); |
| 294 | | - $retval .= Xml::tags( 'td', |
| 295 | | - array( 'valign' => 'top' ), |
| 296 | | - wfMsgWikiHtml( $question['ifyes'] ) ); |
| 297 | | - $retval .= Xml::openElement( 'td', |
| 298 | | - array( 'valign' => 'top' ) ); |
| 299 | | - $retval .= Xml::textarea( "survey-$id-ifyes", '' ); |
| 300 | | - $retval .= Xml::closeElement( 'td' ); |
| 301 | | - $retval .= Xml::closeElement( 'tr' ); |
| | 315 | + $retval .= Xml::openElement( |
| | 316 | + 'blockquote', array( |
| | 317 | + 'id' => "survey-$id-ifyes-row", |
| | 318 | + 'class' => 'survey-ifyes', |
| | 319 | + ) |
| | 320 | + ); |
| | 321 | + $retval .= Xml::tags( |
| | 322 | + 'dt', null, wfMsgWikiHtml( $question['ifyes'] ) |
| | 323 | + ); |
| | 324 | + $retval .= Xml::tags( |
| | 325 | + 'dd', null, Xml::textarea( "survey-$id-ifyes", '' ) |
| | 326 | + ); |
| | 327 | + $retval .= Xml::closeElement( 'blockquote' ); |
| 302 | 328 | } |
| 303 | 329 | if ( isset( $question['ifno'] ) ) { |
| 304 | | - $retval .= Xml::openElement( 'tr', |
| 305 | | - array( 'class' => 'survey-ifno', |
| 306 | | - 'id' => "survey-$id-ifno-row" ) ); |
| 307 | | - $retval .= Xml::tags( 'td', |
| 308 | | - array( 'valign' => 'top' ), |
| 309 | | - wfMsgWikiHtml( $question['ifno'] ) ); |
| 310 | | - $retval .= Xml::openElement( 'td', |
| 311 | | - array( 'valign' => 'top' ) ); |
| 312 | | - $retval .= Xml::textarea( "survey-$id-ifno", '' ); |
| 313 | | - $retval .= Xml::closeElement( 'td' ); |
| 314 | | - $retval .= Xml::closeElement( 'tr' ); |
| | 330 | + $retval .= Xml::openElement( |
| | 331 | + 'blockquote', array( |
| | 332 | + 'id' => "survey-$id-ifno-row", |
| | 333 | + 'class' => 'survey-ifyes', |
| | 334 | + ) |
| | 335 | + ); |
| | 336 | + $retval .= Xml::tags( |
| | 337 | + 'dt', null, wfMsgWikiHtml( $question['ifno'] ) |
| | 338 | + ); |
| | 339 | + $retval .= Xml::tags( |
| | 340 | + 'dd', null, Xml::textarea( "survey-$id-ifno", '' ) |
| | 341 | + ); |
| | 342 | + $retval .= Xml::closeElement( 'blockquote' ); |
| 315 | 343 | } |
| 316 | 344 | break; |
| 317 | 345 | case 'resolution': |
| 318 | | - $retval .= Xml::openElement( 'tr' ); |
| 319 | | - $retval .= Xml::tags( 'td', |
| 320 | | - array( 'valign' => 'top' ), |
| 321 | | - wfMsgWikiHtml( $question['question'] ) ); |
| 322 | | - $retval .= Xml::openElement( 'td', |
| 323 | | - array( 'valign' => 'top' ) ); |
| 324 | | - $retval .= Xml::input( "survey-$id-x", |
| 325 | | - 5, false, array( |
| 326 | | - 'class' => 'optin-resolution-x', |
| 327 | | - 'id' => "survey-$id-x", |
| 328 | | - ) |
| | 346 | + $retval .= Xml::tags( |
| | 347 | + 'dt', null, wfMsgWikiHtml( $question['question'] ) |
| 329 | 348 | ); |
| | 349 | + $retval .= Xml::openElement( 'dd' ); |
| | 350 | + $retval .= Xml::input( |
| | 351 | + "survey-$id-x", |
| | 352 | + 5, |
| | 353 | + false, |
| | 354 | + array( |
| | 355 | + 'class' => 'optin-resolution-x', |
| | 356 | + 'id' => "survey-$id-x", |
| | 357 | + ) |
| | 358 | + ); |
| 330 | 359 | $retval .= ' x '; |
| 331 | | - $retval .= Xml::input( "survey-$id-y", |
| 332 | | - 5, false, array( |
| 333 | | - 'class' => 'optin-resolution-y', |
| 334 | | - 'id' => "survey-$id-y", |
| 335 | | - ) |
| | 360 | + $retval .= Xml::input( |
| | 361 | + "survey-$id-y", |
| | 362 | + 5, |
| | 363 | + false, |
| | 364 | + array( |
| | 365 | + 'class' => 'optin-resolution-y', |
| | 366 | + 'id' => "survey-$id-y", |
| | 367 | + ) |
| 336 | 368 | ); |
| 337 | | - $retval .= Xml::closeElement( 'td' ); |
| 338 | | - $retval .= Xml::closeElement( 'tr' ); |
| | 369 | + $retval .= Xml::closeElement( 'dd' ); |
| 339 | 370 | break; |
| 340 | 371 | case 'textarea': |
| 341 | | - $retval .= Xml::openElement( 'tr' ); |
| 342 | | - $retval .= Xml::tags( 'td', |
| 343 | | - array( 'valign' => 'top' ), |
| 344 | | - wfMsgWikiHtml( $question['question'] ) ); |
| 345 | | - $retval .= Xml::tags( 'td', |
| 346 | | - array( 'valign' => 'top' ), |
| 347 | | - Xml::textarea( "survey-$id", '' ) ); |
| 348 | | - $retval .= Xml::closeElement( 'tr' ); |
| | 372 | + $retval .= Xml::tags( |
| | 373 | + 'dt', null, wfMsgWikiHtml( $question['question'] ) |
| | 374 | + ); |
| | 375 | + $retval .= Xml::tags( |
| | 376 | + 'dd', null, Xml::textarea( "survey-$id", '' ) |
| | 377 | + ); |
| 349 | 378 | break; |
| 350 | 379 | } |
| 351 | 380 | } |
| 352 | | - $retval .= Xml::tags( 'tr', array(), |
| 353 | | - Xml::tags( 'td', array( 'colspan' => 2, 'class' => 'optin-survey-submit' ), |
| 354 | | - Xml::submitButton( wfMsg( 'optin-submit-out' ) ) ) ); |
| 355 | | - $retval .= Xml::closeElement( 'table' ); |
| | 381 | + $retval .= Xml::tags( |
| | 382 | + 'dt', |
| | 383 | + array( 'class' => 'optin-survey-submit' ), |
| | 384 | + Xml::submitButton( wfMsg( 'optin-submit-out' ) ) |
| | 385 | + ); |
| | 386 | + $retval .= Xml::closeElement( 'dl' ); |
| 356 | 387 | $wgOut->addHTML( $retval ); |
| 357 | 388 | } |
| 358 | 389 | |
| Index: trunk/extensions/UsabilityInitiative/OptIn/OptIn.js |
| — | — | @@ -4,9 +4,9 @@ |
| 5 | 5 | $( '.optin-other-select' ).hide(); |
| 6 | 6 | $( 'select.optin-need-other' ).change( function() { |
| 7 | 7 | if( $(this).val() == 'other' ) |
| 8 | | - $( '#' + $(this).attr( 'id' ) + '-other' ).show(); |
| | 8 | + $( '#' + $(this).attr( 'id' ) + '-other' ).slideDown( 'fast' ); |
| 9 | 9 | else |
| 10 | | - $( '#' + $(this).attr( 'id' ) + '-other' ).hide(); |
| | 10 | + $( '#' + $(this).attr( 'id' ) + '-other' ).slideUp( 'fast' ); |
| 11 | 11 | }); |
| 12 | 12 | |
| 13 | 13 | $( '.optin-other-radios, .optin-other-checks' ).click( function() { |
| — | — | @@ -18,11 +18,11 @@ |
| 19 | 19 | yesrow = $( '#' + $(this).attr( 'name' ) + '-ifyes-row' ); |
| 20 | 20 | norow = $( '#' + $(this).attr( 'name' ) + '-ifno-row' ); |
| 21 | 21 | if( $(this).is( '.survey-yes:checked' ) ) { |
| 22 | | - yesrow.show(); |
| 23 | | - norow.hide(); |
| | 22 | + yesrow.slideDown( 'fast' ); |
| | 23 | + norow.slideUp( 'fast' ); |
| 24 | 24 | } else if( $(this).is( '.survey-no:checked' ) ) { |
| 25 | | - yesrow.hide(); |
| 26 | | - norow.show(); |
| | 25 | + yesrow.slideUp( 'fast' ); |
| | 26 | + norow.slideDown( 'fast' ); |
| 27 | 27 | } |
| 28 | 28 | }); |
| 29 | 29 | |