Updated background flicker for portal preview
refs https://github.com/TryGhost/members.js/issues/77 - There was a quick flicker before the portal popup appears due to the site theme being visible in background till portal loads - Adds the constant background with slight delay to show the frame which ensures the portal script is successfully loaded to minimise the visible flicker
This commit is contained in:
parent
e439149a56
commit
d87a3e4391
|
@ -405,4 +405,4 @@
|
||||||
@confirm={{action "leavePortalSettings"}}
|
@confirm={{action "leavePortalSettings"}}
|
||||||
@close={{action "closeLeaveSettingsModal"}}
|
@close={{action "closeLeaveSettingsModal"}}
|
||||||
@modifier="action wide" />
|
@modifier="action wide" />
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
|
@ -294,10 +294,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gh-portal-preview-container {{if this.showLinksPage "hide"}}">
|
<div class="gh-portal-preview-container {{if this.showLinksPage "hide"}}">
|
||||||
|
<div class="gh-portal-site-frame-cover"> </div>
|
||||||
<GhSiteIframe
|
<GhSiteIframe
|
||||||
@guid="test-site-portal"
|
@guid="portal-preview-site"
|
||||||
@src={{this.portalPreviewUrl}}
|
@src={{this.portalPreviewUrl}}
|
||||||
@classNames="gh-portal-siteiframe"
|
@classNames="gh-portal-siteiframe {{if this.hidePreviewFrame "invisible"}}"
|
||||||
></GhSiteIframe>
|
></GhSiteIframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -130,6 +130,7 @@ export default ModalComponent.extend({
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
this._super(...arguments);
|
this._super(...arguments);
|
||||||
|
this.set('hidePreviewFrame', true);
|
||||||
this.buttonStyleOptions = [
|
this.buttonStyleOptions = [
|
||||||
{name: 'icon-and-text', label: 'Icon and text'},
|
{name: 'icon-and-text', label: 'Icon and text'},
|
||||||
{name: 'icon-only', label: 'Icon only'},
|
{name: 'icon-only', label: 'Icon only'},
|
||||||
|
@ -144,6 +145,13 @@ export default ModalComponent.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
didInsertElement() {
|
||||||
|
this._super(...arguments);
|
||||||
|
run.later(this, function () {
|
||||||
|
this.set('hidePreviewFrame', false);
|
||||||
|
}, 1200);
|
||||||
|
},
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
toggleFreePlan(isChecked) {
|
toggleFreePlan(isChecked) {
|
||||||
this.updateAllowedPlan('free', isChecked);
|
this.updateAllowedPlan('free', isChecked);
|
||||||
|
|
|
@ -267,6 +267,17 @@
|
||||||
height: calc((1 / 0.95) * 100%) !important;
|
height: calc((1 / 0.95) * 100%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-portal-site-frame-cover {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #edf0f2;
|
||||||
|
overflow: hidden;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-portal-preview-container {
|
.gh-portal-preview-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
Loading…
Reference in New Issue