Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Fixed responsive issue for launch-site wizard

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ghost/admin/app/components/gh-launch-wizard/connect-stripe.hbs
View file

@ -7,8 +7,7 @@
{{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
</div>
<div class="gh-setting-desc">
Stripe is our exclusive direct payments partner.<br />
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>.
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>.
</div>
</div>
</div>
@ -71,7 +70,7 @@
<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>
<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">
<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">

18
ghost/admin/app/styles/layouts/fullscreen-wizard.css
View file

@ -18,6 +18,22 @@
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 {
box-shadow:
0 0 0 1px rgba(0,0,0,0.02),
@ -34,8 +50,6 @@
display: flex;
flex-direction: column;
height: calc(100vh - 136px);
min-width: 320px;
margin: 40px 48px 0 0;
}
.gh-launch-wizard-settings-container .gh-setting-action-largeimg-delete,

6
ghost/admin/app/templates/launch.hbs
View file

@ -1,5 +1,5 @@
<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="ttu gh-launch-wizard-step-indicator">{{this.currentStep.position}}</div>
<h2>{{this.currentStep.title}}</h2>
@ -10,7 +10,7 @@
</div>
<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)
nextStep=this.goNextStep
backStep=this.goBackStep
@ -20,7 +20,7 @@
}}
</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}}>
<GhSiteIframe class="gh-launch-wizard-preview" @src={{this.previewSrc}} @guid={{this.previewGuid}}></GhSiteIframe>
</GhBrowserPreview>