Position the "Refresh" link over the image

This changes the CSS of the .fancycaptcha-image-container to allow
positioning within it, and repositions .fancycaptcha-reload at its
lower-right.  The container is taller than nearly all images, but
there's a chance the ↻Refresh link might obscure part of a captcha
image.

This is compatible with the new Create account form's repositioning of
the FancyCaptcha inside a gray frame using JS, though gerrit I003c5f1b75
improves Create account once this is deployed.

Bug: 47699
Change-Id: I57be0bc8aa80b9ea6148db979ad28397d2107b86
This commit is contained in:
S Page 2013-05-03 13:04:35 -07:00
parent 677b06eb85
commit dbe64ca161
2 changed files with 9 additions and 1 deletions

View file

@ -119,6 +119,7 @@ class FancyCaptcha extends SimpleCaptcha {
'alt' => '' 'alt' => ''
) )
) . ) .
$captchaReload .
"</div>\n" . "</div>\n" .
'<p>' . '<p>' .
Html::element( 'label', array( Html::element( 'label', array(
@ -137,7 +138,6 @@ class FancyCaptcha extends SimpleCaptcha {
'tabindex' => 1 'tabindex' => 1
) )
) . // tab in before the edit textarea ) . // tab in before the edit textarea
$captchaReload .
Html::element( 'input', array( Html::element( 'input', array(
'type' => 'hidden', 'type' => 'hidden',
'name' => 'wpCaptchaId', 'name' => 'wpCaptchaId',

View file

@ -7,6 +7,8 @@
layout, for normal CAPTCHA sizes. */ layout, for normal CAPTCHA sizes. */
.fancycaptcha-image-container { .fancycaptcha-image-container {
min-height: 95px; min-height: 95px;
position: relative; /* to position Reload link within this */
display: inline-block;
} }
.client-nojs .fancycaptcha-reload { .client-nojs .fancycaptcha-reload {
@ -31,3 +33,9 @@ layout, for normal CAPTCHA sizes. */
/* @embed */ /* @embed */
background: url(images/ajax-loader-10x10.gif) no-repeat scroll left center transparent; background: url(images/ajax-loader-10x10.gif) no-repeat scroll left center transparent;
} }
.fancycaptcha-image-container .fancycaptcha-reload {
position: absolute;
bottom: 0;
right: 4px;
}