mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Fixed responsive issue for launch-site wizard
No ref - Prevented preview from overlapping settings - Avoided "Save and exit" button to left-align on smaller screens
This commit is contained in:
parent
4ddfd3b3c6
commit
44c935847e
3 changed files with 21 additions and 8 deletions
|
@ -7,8 +7,7 @@
|
||||||
{{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
|
{{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
|
||||||
</div>
|
</div>
|
||||||
<div class="gh-setting-desc">
|
<div class="gh-setting-desc">
|
||||||
Stripe is our exclusive direct payments partner.<br />
|
Stripe is our exclusive direct payments partner. Ghost collects <strong>no fees</strong> on any payments! If you don’t have a Stripe account yet, you can <a href="https://stripe.com" target="_blank" rel="noopener noreferrer" class="gh-members-stripe-link">sign up here</a>.
|
||||||
Ghost collects <strong>no fees</strong> on any payments! If you don’t have a Stripe account yet, you can <a href="https://stripe.com" target="_blank" rel="noopener noreferrer" class="gh-members-stripe-link">sign up here</a>.
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -71,7 +70,7 @@
|
||||||
<div class="flex items-center mb4 justify-between mt2">
|
<div class="flex items-center mb4 justify-between mt2">
|
||||||
<a href="{{this.stripeConnectAuthUrl}}" class="stripe-connect" target="_blank" rel="noopener noreferrer"><span>Connect with Stripe</span></a>
|
<a href="{{this.stripeConnectAuthUrl}}" class="stripe-connect" target="_blank" rel="noopener noreferrer"><span>Connect with Stripe</span></a>
|
||||||
<div class="ml2 flex items-center flex-nowrap">
|
<div class="ml2 flex items-center flex-nowrap">
|
||||||
<span class="mr2 f8 midgrey nowrap {{if this.stripeConnectTestMode "gh-members-connect-testmodeon"}}">{{if this.stripeConnectTestMode "Using" "Use"}} test mode</span>
|
<span class="mr2 f8 midgrey nowrap {{if this.stripeConnectTestMode "gh-members-connect-testmodeon"}}">Test mode</span>
|
||||||
<div class="for-switch small">
|
<div class="for-switch small">
|
||||||
<label class="switch" for="stripe-connect-test-mode" {{on "click" this.toggleStripeConnectTestMode}}>
|
<label class="switch" for="stripe-connect-test-mode" {{on "click" this.toggleStripeConnectTestMode}}>
|
||||||
<input type="checkbox" class="gh-input" checked={{this.stripeConnectTestMode}} {{on "click" this.toggleStripeConnectTestMode}} data-test-checkbox="stripe-connect-test-mode">
|
<input type="checkbox" class="gh-input" checked={{this.stripeConnectTestMode}} {{on "click" this.toggleStripeConnectTestMode}} data-test-checkbox="stripe-connect-test-mode">
|
||||||
|
|
|
@ -18,6 +18,22 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-launch-wizard-content-left {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 25%;
|
||||||
|
min-width: 348px;
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 40px 48px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-launch-wizard-content-right {
|
||||||
|
position: relative;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-basis: 100%;
|
||||||
|
margin: 40px 48px 56px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-launch-wizard-preview {
|
.gh-launch-wizard-preview {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 1px rgba(0,0,0,0.02),
|
0 0 0 1px rgba(0,0,0,0.02),
|
||||||
|
@ -34,8 +50,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: calc(100vh - 136px);
|
height: calc(100vh - 136px);
|
||||||
min-width: 320px;
|
|
||||||
margin: 40px 48px 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-launch-wizard-settings-container .gh-setting-action-largeimg-delete,
|
.gh-launch-wizard-settings-container .gh-setting-action-largeimg-delete,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="fullscreen-wizard-container" {{will-destroy this.reset}}>
|
<div class="fullscreen-wizard-container" {{will-destroy this.reset}}>
|
||||||
<div class="pt7 pb5 pl12 pr12 flex justify-between-l items-center bb b--whitegrey">
|
<div class="pt7 pb5 pl12 pr12 flex justify-between items-center bb b--whitegrey">
|
||||||
<div class="flex flex-column">
|
<div class="flex flex-column">
|
||||||
<div class="ttu gh-launch-wizard-step-indicator">{{this.currentStep.position}}</div>
|
<div class="ttu gh-launch-wizard-step-indicator">{{this.currentStep.position}}</div>
|
||||||
<h2>{{this.currentStep.title}}</h2>
|
<h2>{{this.currentStep.title}}</h2>
|
||||||
|
@ -10,7 +10,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex br3 bg-white">
|
<div class="flex br3 bg-white">
|
||||||
<div class="w-25 ml12">
|
<div class="gh-launch-wizard-content-left">
|
||||||
{{component (concat "gh-launch-wizard/" this.step)
|
{{component (concat "gh-launch-wizard/" this.step)
|
||||||
nextStep=this.goNextStep
|
nextStep=this.goNextStep
|
||||||
backStep=this.goBackStep
|
backStep=this.goBackStep
|
||||||
|
@ -20,7 +20,7 @@
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="relative flex-grow-1 mt10 mr12 mb14">
|
<div class="gh-launch-wizard-content-right">
|
||||||
<GhBrowserPreview class="gh-launch-wizard-preview-container" @icon={{this.settings.icon}} @title={{this.config.blogTitle}}>
|
<GhBrowserPreview class="gh-launch-wizard-preview-container" @icon={{this.settings.icon}} @title={{this.config.blogTitle}}>
|
||||||
<GhSiteIframe class="gh-launch-wizard-preview" @src={{this.previewSrc}} @guid={{this.previewGuid}}></GhSiteIframe>
|
<GhSiteIframe class="gh-launch-wizard-preview" @src={{this.previewSrc}} @guid={{this.previewGuid}}></GhSiteIframe>
|
||||||
</GhBrowserPreview>
|
</GhBrowserPreview>
|
||||||
|
|
Loading…
Add table
Reference in a new issue