Merge pull request #2938 from PayBas/ticket/12530

[ticket/12530] Fix captcha challange image breaking responsive layout
This commit is contained in:
Joas Schilling 2014-10-15 18:47:45 +02:00
commit 8be701db0a
4 changed files with 35 additions and 17 deletions

View file

@ -1,5 +1,5 @@
<!-- IF S_TYPE == 1 -->
<div class="panel">
<div class="panel captcha-panel">
<div class="inner">
<h3 class="captcha-title">{L_CONFIRMATION}</h3>
@ -10,7 +10,7 @@
<dl>
<dt><label for="confirm_code">{L_CONFIRM_CODE}{L_COLON}</label></dt>
<dd><img src="{CONFIRM_IMAGE_LINK}" alt="{L_CONFIRM_CODE}" /></dd>
<dd class="captcha captcha-image"><img src="{CONFIRM_IMAGE_LINK}" alt="{L_CONFIRM_CODE}" /></dd>
<dd><input type="text" name="confirm_code" id="confirm_code" size="8" maxlength="8" tabindex="{$CAPTCHA_TAB_INDEX}" class="inputbox narrow" title="{L_CONFIRM_CODE}" />
<!-- IF S_CONFIRM_REFRESH --><input type="submit" name="refresh_vc" id="refresh_vc" class="button2" value="{L_VC_REFRESH}" /><!-- ENDIF -->
<input type="hidden" name="confirm_id" id="confirm_id" value="{CONFIRM_ID}" /></dd>

View file

@ -1,5 +1,5 @@
<!-- IF S_TYPE == 1 -->
<div class="panel">
<div class="panel captcha-panel">
<div class="inner">
<h3 class="captcha-title">{L_CONFIRMATION}</h3>
@ -8,7 +8,7 @@
<dl>
<dt><label>{QA_CONFIRM_QUESTION}{L_COLON}</label><br /><span>{L_CONFIRM_QUESTION_EXPLAIN}</span></dt>
<dd>
<dd class="captcha">
<input type="text" tabindex="{$CAPTCHA_TAB_INDEX}" name="qa_answer" id="answer" size="45" class="inputbox autowidth" title="{L_ANSWER}" />
<input type="hidden" name="qa_confirm_id" id="qa_confirm_id" value="{QA_CONFIRM_ID}" />
</dd>

View file

@ -1,5 +1,5 @@
<!-- IF S_TYPE == 1 -->
<div class="panel">
<div class="panel captcha-panel">
<div class="inner">
<h3 class="captcha-title">{L_CONFIRMATION}</h3>
@ -11,24 +11,16 @@
<!-- IF S_RECAPTCHA_AVAILABLE -->
<dl>
<dt><label>{L_CONFIRM_CODE}{L_COLON}</label><br /><span>{L_RECAPTCHA_EXPLAIN}</span></dt>
<dd>
<script type="text/javascript">
// <![CDATA[
<dd class="captcha">
<script>
var RecaptchaOptions = {
lang : '{LA_RECAPTCHA_LANG}',
theme : 'clean',
tabindex : <!-- IF $CAPTCHA_TAB_INDEX -->{$CAPTCHA_TAB_INDEX}<!-- ELSE -->10<!-- ENDIF -->
};
// ]]>
</script>
<script type="text/javascript" src="{RECAPTCHA_SERVER}/challenge?k={RECAPTCHA_PUBKEY}{RECAPTCHA_ERRORGET}"></script>
<script type="text/javascript">
// <![CDATA[
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
document.getElementById('recaptcha_table').style.direction = 'ltr';
<!-- ENDIF -->
// ]]>
</script>
<script src="{RECAPTCHA_SERVER}/challenge?k={RECAPTCHA_PUBKEY}{RECAPTCHA_ERRORGET}"></script>
<noscript>
<div>
<object data="{RECAPTCHA_SERVER}/noscript?k={RECAPTCHA_PUBKEY}{RECAPTCHA_ERRORGET}" type="text/html" height="300" width="500"></object><br />
@ -37,6 +29,7 @@
</div>
</noscript>
<a href="http://www.google.com/intl/{LA_RECAPTCHA_LANG}/policies/" target="_blank"><img class="recaptcha-responsive" style="display: none" alt="" width="71" height="36" src="{RECAPTCHA_SERVER}/img/clean/logo.png"></a>
</dd>
</dl>
<!-- ELSE -->

View file

@ -350,6 +350,31 @@ fieldset.quick-login label[for="autologin"] {
select, .inputbox {
max-width: 260px;
}
.captcha-panel dd.captcha {
margin-left: 0;
}
.captcha-panel dd.captcha-image img {
width: 100%;
}
#recaptcha_challenge_image,
#recaptcha_response_field,
.recaptchatable #recaptcha_image {
width: 100% !important;
height: auto !important;
}
.recaptchatable tr td:last-child {
display: none;
}
.captcha-panel .recaptcha-responsive {
display: inline-block !important;
margin-top: 10px;
vertical-align: middle;
}
}
@media only screen and (max-width: 430px), only screen and (max-device-width: 430px) {