mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Updated embeddable signup form to be responsive
Refs https://github.com/TryGhost/Team/issues/3334
This commit is contained in:
Sanne de Vries
parent
022fadee01
commit
3923b5cc88
7 changed files with 70 additions and 54 deletions
|
|
@ -56,7 +56,7 @@ export default class SignupFormEmbed extends Component {
|
|||
options.title = this.settings.title;
|
||||
options.description = this.settings.description;
|
||||
options['background-color'] = '#f9f9f9';
|
||||
style = 'height: 60vh; min-height: 400px;';
|
||||
style = 'height: 40vmin; min-height: 360px;';
|
||||
}
|
||||
|
||||
let dataOptionsString = '';
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@
|
|||
</p>
|
||||
|
||||
<!-- Because we need to use ESM modules during develoment, the src should be different to force reexecution of each script -->
|
||||
<div style="height: 60vh; min-height: 400px;">
|
||||
<div style="height: 40vmin; min-height: 360px;">
|
||||
<script
|
||||
type="module"
|
||||
src="/src/index.tsx"
|
||||
data-title="My site name"
|
||||
data-description="An independent publication about embeddable signup forms."
|
||||
data-logo="https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png"
|
||||
data-background-color="#eeeeee"
|
||||
data-button-color="#4664dd"
|
||||
data-logo="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png"
|
||||
data-background-color="#F1F3F4"
|
||||
data-button-color="#ff0095"
|
||||
data-site="%VITE_SITE_URL%"
|
||||
data-label-1="Signup form"
|
||||
data-label-2="With logo"
|
||||
|
|
@ -36,14 +36,14 @@
|
|||
<hr>
|
||||
<h1>Without logo</h1>
|
||||
|
||||
<div style="height: 60vh; min-height: 400px;">
|
||||
<div style="height: 40vmin; min-height: 360px;">
|
||||
<script
|
||||
type="module"
|
||||
src="/src/index.tsx?withoutlogo"
|
||||
data-title="Site without logo"
|
||||
data-description="An independent publication about embeddable signup forms."
|
||||
data-background-color="#eeeeee"
|
||||
data-button-color="#4664dd"
|
||||
data-background-color="#F1F3F4"
|
||||
data-button-color="#ff0095"
|
||||
data-site="%VITE_SITE_URL%"
|
||||
data-label-1="Signup form"
|
||||
data-label-2="Without logo"
|
||||
|
|
|
|||
|
|
@ -18,51 +18,59 @@
|
|||
</p>
|
||||
|
||||
<!-- Because we need to use ESM modules during develoment, the src should be different to force reexecution of each script -->
|
||||
<script
|
||||
src="http://localhost:6174/signup-form.min.js"
|
||||
data-title="My site name"
|
||||
data-description="An independent publication about embeddable signup forms."
|
||||
data-logo="https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png"
|
||||
data-background-color="#eeeeee"
|
||||
data-button-color="#4664dd"
|
||||
data-site="%VITE_SITE_URL%"
|
||||
data-label-1="Signup form"
|
||||
data-label-2="With logo"
|
||||
></script>
|
||||
<div style="height: 40vmin; min-height: 360px;">
|
||||
<script
|
||||
src="http://localhost:6174/signup-form.min.js"
|
||||
data-title="My site name"
|
||||
data-description="An independent publication about embeddable signup forms."
|
||||
data-logo="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png"
|
||||
data-background-color="#F1F3F4"
|
||||
data-button-color="#ff0095"
|
||||
data-site="%VITE_SITE_URL%"
|
||||
data-label-1="Signup form"
|
||||
data-label-2="With logo"
|
||||
></script>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h1>Without logo</h1>
|
||||
<script
|
||||
src="http://localhost:6174/signup-form.min.js"
|
||||
data-title="Site without logo"
|
||||
data-description="An independent publication about embeddable signup forms."
|
||||
data-background-color="#eeeeee"
|
||||
data-button-color="#4664dd"
|
||||
data-site="%VITE_SITE_URL%"
|
||||
data-label-1="Signup form"
|
||||
data-label-2="Without logo"
|
||||
></script>
|
||||
<div style="height: 40vmin; min-height: 360px;">
|
||||
<script
|
||||
src="http://localhost:6174/signup-form.min.js"
|
||||
data-title="Site without logo"
|
||||
data-description="An independent publication about embeddable signup forms."
|
||||
data-background-color="#F1F3F4"
|
||||
data-button-color="#ff0095"
|
||||
data-site="%VITE_SITE_URL%"
|
||||
data-label-1="Signup form"
|
||||
data-label-2="Without logo"
|
||||
></script>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h1>Minimal</h1>
|
||||
|
||||
<script
|
||||
src="http://localhost:6174/signup-form.min.js"
|
||||
data-button-color="#ff0095"
|
||||
data-site="%VITE_SITE_URL%"
|
||||
data-label-1="Signup form"
|
||||
data-label-2="Minimal"
|
||||
></script>
|
||||
<div style="min-height: 58px">
|
||||
<script
|
||||
src="http://localhost:6174/signup-form.min.js"
|
||||
data-button-color="#ff0095"
|
||||
data-site="%VITE_SITE_URL%"
|
||||
data-label-1="Signup form"
|
||||
data-label-2="Minimal"
|
||||
></script>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h1>With invalid configuration</h1>
|
||||
<p>When you submit this one, it will throw an error.</p>
|
||||
|
||||
<script
|
||||
src="http://localhost:6174/signup-form.min.js"
|
||||
data-button-color="#ff0095"
|
||||
data-site="https://invalid/"
|
||||
></script>
|
||||
<div style="min-height: 58px">
|
||||
<script
|
||||
src="http://localhost:6174/signup-form.min.js"
|
||||
data-button-color="#ff0095"
|
||||
data-site="https://invalid/"
|
||||
></script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const App: React.FC<AppProps> = ({scriptTag}) => {
|
|||
const data = page.data as any; // issue with TypeScript understanding the type here when passing it to the component
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<AppContextProvider value={context}>
|
||||
<Frame>
|
||||
<ContentBox>
|
||||
|
|
@ -49,7 +49,7 @@ const App: React.FC<AppProps> = ({scriptTag}) => {
|
|||
</ContentBox>
|
||||
</Frame>
|
||||
</AppContextProvider>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@ export const FormView: React.FC<FormProps & {
|
|||
|
||||
return (
|
||||
<div
|
||||
className='flex h-[100vh] flex-col items-center justify-center p-6 md:p-8'
|
||||
className='flex h-[100vh] flex-col items-center justify-center px-4 sm:px-6 md:px-10'
|
||||
data-testid="wrapper"
|
||||
style={{backgroundColor, color: backgroundColor && textColorForBackgroundColor(backgroundColor)}}
|
||||
>
|
||||
{logo && <img alt={title} className='h-[50px] w-auto' src={logo}/>}
|
||||
{logo && <img alt={title} className='h-[64px] w-auto mb-2' src={logo}/>}
|
||||
{title && <h1 className="text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl">{title}</h1>}
|
||||
{description && <p className='mb-5 text-center'>{description}</p>}
|
||||
{description && <p className='mb-4 md:mb-5 text-center font-medium'>{description}</p>}
|
||||
|
||||
<Form {...formProps} />
|
||||
</div>
|
||||
|
|
@ -50,7 +50,7 @@ const Form: React.FC<FormProps> = ({loading, error, buttonColor, onSubmit}) => {
|
|||
<>
|
||||
<form className='relative flex w-full max-w-[440px]' onSubmit={submitHandler}>
|
||||
<input
|
||||
className={'flex-1 py-[1rem] pl-3 border rounded-[.5rem] text-grey-900 hover:border-grey-400 transition focus-visible:border-grey-500 focus-visible:outline-none ' + borderStyle}
|
||||
className={'flex-1 p-2 sm:py-[1rem] sm:px-3 border rounded-[.5rem] text-grey-900 hover:border-grey-400 transition focus-visible:border-grey-500 focus-visible:outline-none ' + borderStyle}
|
||||
data-testid="input"
|
||||
disabled={loading}
|
||||
placeholder='jamie@example.com'
|
||||
|
|
@ -59,14 +59,14 @@ const Form: React.FC<FormProps> = ({loading, error, buttonColor, onSubmit}) => {
|
|||
onChange={e => setEmail(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className='absolute inset-y-0 right-[.3rem] my-auto h-[3rem] rounded-[.3rem] px-3 py-2 text-white'
|
||||
className='absolute inset-y-0 right-[.2rem] sm:right-[.3rem] my-auto h-7 sm:h-[3rem] rounded-[.3rem] px-2 sm:px-3 text-white'
|
||||
data-testid="button"
|
||||
disabled={loading}
|
||||
style={{backgroundColor: buttonColor, color: buttonColor && textColorForBackgroundColor(buttonColor)}}
|
||||
type='submit'
|
||||
>Subscribe</button>
|
||||
{error && <p className='absolute left-0 -bottom-4 pt-0.5 text-red-500' data-testid="error-message">{error}</p>}
|
||||
</form>
|
||||
{error && <p className='pt-0.5 text-red-500' data-testid="error-message">{error}</p>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,5 +10,10 @@ type SuccessPageProps = {
|
|||
export const SuccessPage: React.FC<SuccessPageProps> = ({email}) => {
|
||||
const {options} = useAppContext();
|
||||
|
||||
return <SuccessView backgroundColor={options.backgroundColor} email={email} isMinimal={isMinimal(options)} />;
|
||||
return <SuccessView
|
||||
backgroundColor={options.backgroundColor}
|
||||
email={email}
|
||||
isMinimal={isMinimal(options)}
|
||||
logo={options.logo}
|
||||
title={options.title} />;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@ import {textColorForBackgroundColor} from '@tryghost/color-utils';
|
|||
export const SuccessView: React.FC<{
|
||||
email: string;
|
||||
isMinimal: boolean;
|
||||
title?: string
|
||||
logo?: string
|
||||
backgroundColor?: string;
|
||||
}> = ({email,isMinimal,backgroundColor}) => {
|
||||
}> = ({isMinimal, title, logo, backgroundColor}) => {
|
||||
if (isMinimal) {
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -15,12 +17,13 @@ export const SuccessView: React.FC<{
|
|||
}
|
||||
return (
|
||||
<div
|
||||
className='flex h-[100vh] flex-col items-center justify-center bg-grey-200 p-6 md:p-8'
|
||||
className='flex h-[100vh] flex-col items-center justify-center bg-grey-200 px-4 sm:px-6 md:px-10'
|
||||
data-testid="success-page"
|
||||
style={{backgroundColor, color: backgroundColor && textColorForBackgroundColor(backgroundColor)}}
|
||||
>
|
||||
>
|
||||
{logo && <img alt={title} className='h-[64px] w-auto mb-2' src={logo}/>}
|
||||
<h1 className='text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl'>Now check your email!</h1>
|
||||
<p className='mb-5 text-center'>An email has been send to {email}.</p>
|
||||
<p className='mb-4 sm:mb-[4.1rem] text-center'>To complete signup, click the confirmation link in your inbox. If it doesn't arrive within 3 minutes, check your spam folder!</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue