0
Fork 0
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:
Sanne de Vries 2021-02-08 14:10:34 +01:00
parent 4ddfd3b3c6
commit 44c935847e
3 changed files with 21 additions and 8 deletions

View file

@ -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 dont 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 dont 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">

View file

@ -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,

View file

@ -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>