Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -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"> <div class="modal-signup-form-embed-preview">
<Settings::SignupForm::Preview <Settings::SignupForm::Preview
@html={{this.previewCode}} @html={{this.previewCode}}
@style={{this.style}}
/> />
</div> </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 <iframe
srcDoc="<!DOCTYPE html>" 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" frameborder="0"
allowtransparency="true" allowtransparency="true"
title="Signup Form Preview 1" title="Signup Form Preview 1"
@ -10,7 +10,7 @@
<iframe <iframe
srcDoc="<!DOCTYPE html>" 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" frameborder="0"
allowtransparency="true" allowtransparency="true"
title="Signup Form Preview 2" 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 @tracked
iframes = [ iframes = [
{element: null, html: '', loading: true}, {element: null, html: '', loading: true, style: ''},
{element: null, html: '', loading: true} {element: null, html: '', loading: true, style: ''}
]; ];
@tracked @tracked
@ -20,6 +20,14 @@ export default class Preview extends Component {
return this.iframes[this.visibleIframeIndex].html; return this.iframes[this.visibleIframeIndex].html;
} }
get firstIframeStyle() {
return this.iframes[0].style;
}
get secondIframeStyle() {
return this.iframes[1].style;
}
@action @action
onLoad(index, event) { onLoad(index, event) {
const iframe = this.iframes[index]; const iframe = this.iframes[index];
@ -37,6 +45,9 @@ export default class Preview extends Component {
// Finished loading this iframe // Finished loading this iframe
iframe.loading = false; iframe.loading = false;
this.visibleIframeIndex = index; this.visibleIframeIndex = index;
// Force tracked update
this.iframes = [...this.iframes];
} }
} }
@ -65,10 +76,14 @@ export default class Preview extends Component {
iframe.loading = true; iframe.loading = true;
const html = `<html><head><style>body, html {padding: 0; margin: 0;}</style></head><body>${this.args.html}</body></html>`; 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.html = this.args.html;
iframe.style = this.args.style;
// Set the iframe's new HTML // Set the iframe's new HTML
iframe.element.contentWindow.document.open(); iframe.element.contentWindow.document.open();
iframe.element.contentWindow.document.write(html); iframe.element.contentWindow.document.write(html);
iframe.element.contentWindow.document.close(); 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; 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 { .fullwidth-modal {
max-width: 100%; max-width: 100%;
} }
@ -3110,14 +3095,31 @@ p.theme-validation-details {
position: relative; position: relative;
margin: 1.6rem; margin: 1.6rem;
margin-right: 0; margin-right: 0;
overflow: hidden;
} }
.modal-signup-form-embed-preview iframe { .gh-signup-form-iframe {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 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 { .modal-signup-form-embed-main {