ppfun/pixelplanet
13
Fork 18
Code Issues 24 Pull Requests Releases 2 Activity

change captcha styles

Browse Source
This commit is contained in:
HF 2022-01-14 14:47:51 +01:00
parent 837b1de613
commit de83b3e06e
1 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/Captcha.jsx
View File

@ -24,6 +24,14 @@ async function getUrlAndId() {
return null;
}
const floatStyle = {
width: '100%',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
}
/*
* autoload: Load captcha immediately and autofocus input textbox
* width: width of the captcha image
@ -78,47 +86,39 @@ const Captcha = ({ autoload, width }) => {
backgroundColor: '#e0e0e0',
}}
>
<div
style={{
width: '100%',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
}}
>
{(captchaData.url)
? (
<img
style={{
width: '100%',
opacity: (imgLoaded) ? 1 : 0,
transition: '100ms',
}}
src={captchaData.url}
alt="CAPTCHA"
onLoad={() => {
setErrors([]);
setImgLoaded(true);
}}
onError={() => {
setErrors([t`Could not load captcha`]);
}}
/>
)
: (
<span
role="button"
tabIndex={0}
title={t`Load Captcha`}
className="modallink"
onClick={reloadCaptcha}
onKeyPress={reloadCaptcha}
>
{t`Click to Load Captcha`}
</span>
)}
</div>
{(captchaData.url)
? (
<img
style={{
...floatStyle,
// width: '100%',
opacity: (imgLoaded) ? 1 : 0,
transition: '100ms',
}}
src={captchaData.url}
alt="CAPTCHA"
onLoad={() => {
setErrors([]);
setImgLoaded(true);
}}
onError={() => {
setErrors([t`Could not load captcha`]);
}}
/>
)
: (
<span
style={floatStyle}
role="button"
tabIndex={0}
title={t`Load Captcha`}
className="modallink"
onClick={reloadCaptcha}
onKeyPress={reloadCaptcha}
>
{t`Click to Load Captcha`}
</span>
)}
</div>
<p className="modaltext">
{t`Can't read? Reload:`}&nbsp;