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

Moved maximum width and centering outside minimal signup form

Browse source 
refs https://ghost.slack.com/archives/C04TMVA1D7A/p1686299301740999

- Easier to customize: easy to choose between centering and left alignment
- Fixes issue with centering error message
This commit is contained in:
Simon Backx 2023-06-09 10:42:24 +02:00
parent f4a822e7e0
commit 66ca072055
3 changed files with 34 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/components/modals/settings/signup-form-embed.js
View file

@ -96,7 +96,7 @@ export default class SignupFormEmbedModal extends Component {
options[`label-${i + 1}`] = label.name;
}
let style = 'min-height: 58px';
let style = 'min-height: 58px; max-width: 440px;';
if (this.style === 'all-in-one') {
// We serve twice the size of the icon to support high resolution screens
@ -113,7 +113,7 @@ export default class SignupFormEmbedModal extends Component {
if (preview) {
if (this.style === 'minimal') {
style = 'max-width: 400px;width: 100%;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);';
style = 'max-width: 440px;width: 100%;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);';
} else {
style = 'height: 100vh';
}

32
ghost/signup-form/index.html
View file

@ -55,7 +55,7 @@
<hr>
<h1>Minimal</h1>
<div style="min-height: 58px">
<div style="min-height: 58px; max-width: 440px;">
<script
type="module"
src="/src/index.tsx?other"
@ -67,6 +67,36 @@
></script>
</div>
<hr>
<h1>Minimal centered</h1>
<div style="min-height: 58px; max-width: 440px; margin: 0 auto;">
<script
type="module"
src="/src/index.tsx?other-center"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Minimal"
async
></script>
</div>
<hr>
<h1>Minimal full width</h1>
<div style="min-height: 58px;">
<script
type="module"
src="/src/index.tsx?other-full"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Minimal"
async
></script>
</div>
<hr>
<h1>With invalid configuration</h1>
<p>When you submit this one, it will throw an error.</p>

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

@ -58,7 +58,7 @@ const Form: React.FC<FormProps> = ({isMinimal, loading, success, error, buttonCo
return (
<>
<form className='relative mx-auto flex w-full max-w-[440px]' onSubmit={submitHandler}>
<form className='relative mx-auto flex w-full' onSubmit={submitHandler}>
<input
className={`flex-1 rounded-[.5rem] border bg-white p-2 text-grey-900 transition hover:border-grey-400 focus-visible:border-grey-500 focus-visible:outline-none disabled:bg-white sm:px-3 sm:py-[1rem] ${error ? '!border-red-500' : 'border-grey-300'}`}
data-testid="input"