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

Increased virtual iframe width of minimal signup form preview

Browse source 
no issue

Because the signup form is responsive, it is displayed too small in the preview. To counteract this, the width of the iframe is increased to 200%, and clipped to make it larger.
This commit is contained in:
Simon Backx 2023-06-05 17:36:38 +02:00
parent e0dca2e0c7
commit 9aef897936
4 changed files with 39 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ghost/admin/app/components/modals/settings/signup-form-embed.hbs
View file

@ -4,6 +4,7 @@
<div class="modal-signup-form-embed-preview">
<Settings::SignupForm::Preview
@html={{this.previewCode}}
@style={{this.style}}
/>
</div>

6
ghost/admin/app/components/settings/signup-form/preview.hbs
View file

@ -1,7 +1,7 @@
<div {{did-update this.onChangeHtml @html}}>
<div {{did-update this.onChangeHtml @html}} class={{if this.increaseWidth "gh-iframe-increase-width"}}>
<iframe
srcDoc="<!DOCTYPE html>"
class={{if (eq this.visibleIframeIndex 0) "gh-signup-form-iframe" "gh-signup-form-iframe gh-iframe-hidden"}}
class={{concat "gh-signup-form-iframe" (unless (eq this.visibleIframeIndex 0) " gh-iframe-hidden") " gh-style-" this.firstIframeStyle}}
frameborder="0"
allowtransparency="true"
title="Signup Form Preview 1"
@ -10,7 +10,7 @@
<iframe
srcDoc="<!DOCTYPE html>"
class={{if (eq this.visibleIframeIndex 1) "gh-signup-form-iframe" "gh-signup-form-iframe gh-iframe-hidden"}}
class={{concat "gh-signup-form-iframe" (unless (eq this.visibleIframeIndex 1) " gh-iframe-hidden") " gh-style-" this.secondIframeStyle}}
frameborder="0"
allowtransparency="true"
title="Signup Form Preview 2"

19
ghost/admin/app/components/settings/signup-form/preview.js
View file

@ -9,8 +9,8 @@ export default class Preview extends Component {
@tracked
iframes = [
{element: null, html: '', loading: true},
{element: null, html: '', loading: true}
{element: null, html: '', loading: true, style: ''},
{element: null, html: '', loading: true, style: ''}
];
@tracked
@ -20,6 +20,14 @@ export default class Preview extends Component {
return this.iframes[this.visibleIframeIndex].html;
}
get firstIframeStyle() {
return this.iframes[0].style;
}
get secondIframeStyle() {
return this.iframes[1].style;
}
@action
onLoad(index, event) {
const iframe = this.iframes[index];
@ -37,6 +45,9 @@ export default class Preview extends Component {
// Finished loading this iframe
iframe.loading = false;
this.visibleIframeIndex = index;
// Force tracked update
this.iframes = [...this.iframes];
}
}
@ -65,10 +76,14 @@ export default class Preview extends Component {
iframe.loading = true;
const html = `<html><head><style>body, html {padding: 0; margin: 0;}</style></head><body>${this.args.html}</body></html>`;
iframe.html = this.args.html;
iframe.style = this.args.style;
// Set the iframe's new HTML
iframe.element.contentWindow.document.open();
iframe.element.contentWindow.document.write(html);
iframe.element.contentWindow.document.close();
// Force tracked update
this.iframes = [...this.iframes];
}
}

34
ghost/admin/app/styles/layouts/settings.css
View file

@ -3078,21 +3078,6 @@ p.theme-validation-details {
margin: 6vw 0;
}
.gh-signup-form-iframe {
width: 100%;
border: 0;
opacity: 1;
z-index: 0;
transition: none;
}
.gh-signup-form-iframe.gh-iframe-hidden {
opacity: 0;
z-index: 1;
transition: 0.3s opacity;
pointer-events: none;
}
.fullwidth-modal {
max-width: 100%;
}
@ -3110,14 +3095,31 @@ p.theme-validation-details {
position: relative;
margin: 1.6rem;
margin-right: 0;
overflow: hidden;
}
.modal-signup-form-embed-preview iframe {
.gh-signup-form-iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 0;
opacity: 1;
z-index: 0;
transition: none;
}
.gh-signup-form-iframe.gh-iframe-hidden {
opacity: 0;
z-index: 1;
transition: 0.3s opacity;
pointer-events: none;
}
.gh-signup-form-iframe.gh-style-minimal {
width: 200%;
left: -50%;
}
.modal-signup-form-embed-main {