Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Added signup form button animation (minimal)

Browse source 
no issue
This commit is contained in:
Simon Backx 2023-06-09 12:07:30 +02:00
parent afe18d54de
commit 381149e45b
2 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/signup-form/preview.html
View file

@ -95,7 +95,9 @@
></script>
</div>
<div style="min-height: 58px">
<hr>
<div style="min-height: 58px; max-width: 440px;">
<script
src="http://localhost:6174/signup-form.min.js"
data-button-color="#ff0095"

8
ghost/signup-form/src/components/pages/FormView.tsx
View file

@ -69,15 +69,15 @@ const Form: React.FC<FormProps> = ({isMinimal, loading, success, error, buttonCo
onChange={e => setEmail(e.target.value)}
/>
<button
className='absolute inset-y-0 right-[.2rem] my-auto grid h-7 items-center justify-items-center rounded-[.3rem] px-2 font-medium text-white xs:right-[.3rem] xs:h-[3rem] xs:px-3'
className='absolute inset-y-0 right-[.2rem] my-auto grid h-7 touch-manipulation items-center justify-items-center overflow-hidden rounded-[.3rem] px-2 font-medium text-white xs:right-[.3rem] xs:h-[3rem] xs:px-3'
data-testid="button"
disabled={loading || success}
style={{backgroundColor: buttonColor, color: buttonTextColor}}
type='submit'
>
<span className={`col-start-1 row-start-1 ${loading || success ? 'invisible' : 'visible'}`}>{t('Subscribe')}</span>
{isMinimal && <span className={`col-start-1 row-start-1 ${loading || !success ? 'invisible' : 'visible'}`}>{t('Email sent')}</span>}
{loading && <span className='inset-0 col-start-1 row-start-1 flex items-center justify-center'><LoadingIcon /></span>}
<span className={`whitespace-no-wrap col-start-1 row-start-1 transition-opacity duration-200 ${loading || success ? 'opacity-0' : 'opacity-1'}`}>{t('Subscribe')}</span>
{isMinimal && <span className={`whitespace-no-wrap col-start-1 row-start-1 [transition:margin_300ms,opacity_200ms] ${loading || !success ? 'mx-[-40px] opacity-0' : 'opacity-1 mx-0'}`}>{t('Email sent')}</span>}
<span className={`inset-0 col-start-1 row-start-1 flex items-center justify-center transition-opacity duration-200 ${loading ? 'opacity-1' : 'opacity-0'}`}><LoadingIcon /></span>
</button>
</form>
</>