Renamed Finishing Touches onboarding step to Done with other changes and styling tweaks
refs: https://github.com/TryGhost/Team/issues/1376 - renamed finishing touches file to done - no last modal, just the done screen for first start - added options for next steps
This commit is contained in:
James Morris
parent
7ab6a47b69
commit
8820a76c71
|
|
@ -15,7 +15,7 @@ Router.map(function () {
|
|||
this.route('two');
|
||||
this.route('three');
|
||||
});
|
||||
this.route('setup.finishing-touches', {path: '/setup/finishing-touches'});
|
||||
this.route('setup.done', {path: '/setup/done'});
|
||||
|
||||
this.route('signin');
|
||||
this.route('signout');
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default class HomeRoute extends Route {
|
|||
super.beforeModel(...arguments);
|
||||
|
||||
if (this.feature.improvedOnboarding && transition.to?.queryParams?.firstStart === 'true') {
|
||||
return this.transitionTo('setup.finishing-touches');
|
||||
return this.transitionTo('setup.done');
|
||||
}
|
||||
|
||||
this.transitionTo('dashboard');
|
||||
|
|
|
|||
|
|
@ -1090,6 +1090,6 @@ kbd {
|
|||
|
||||
/* Finishing touches */
|
||||
/* ---------------------------------------------------- */
|
||||
.gh-finishing-touches {
|
||||
.gh-done {
|
||||
background: #15171A;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1808,31 +1808,38 @@ section.gh-ds h2 {
|
|||
}
|
||||
}
|
||||
|
||||
.gh-finishing-touches {
|
||||
.gh-done {
|
||||
background: linear-gradient(315deg,#efefef,#fff);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-finishing-touches header {
|
||||
padding: 0 0 24px;
|
||||
.gh-done header {
|
||||
padding: 0 0 48px;
|
||||
margin-top: -4px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.gh-finishing-touches header h1 {
|
||||
.gh-done header h1 {
|
||||
font-size: 3.1rem;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.gh-finishing-touches header p {
|
||||
.gh-done header p {
|
||||
font-size: 1.9rem;
|
||||
line-height: 1.5em;
|
||||
margin: 0.5rem 0 2rem;
|
||||
padding: 0 4rem 0 0;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-finishing-touches main {
|
||||
.gh-done section h2 {
|
||||
font-size: 1.8rem;
|
||||
margin: 0 0 4rem;
|
||||
}
|
||||
|
||||
.gh-done main {
|
||||
background: var(--white);
|
||||
box-shadow: 0 0 30px rgb(0 0 0 / 4%);
|
||||
width: 100%;
|
||||
|
|
@ -1843,44 +1850,123 @@ section.gh-ds h2 {
|
|||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.gh-finishing-touches .gh-nav-design-settings {
|
||||
background: transparent;
|
||||
padding-top: 31px;
|
||||
.gh-done section a {
|
||||
display: grid;
|
||||
grid-template-columns: 56px auto;
|
||||
grid-template-areas:
|
||||
"icon top"
|
||||
"icon content";
|
||||
margin: 0 0 3.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-nav-design-settings .gh-stack {
|
||||
.gh-done section span {
|
||||
grid-area: icon;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
background: #fff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.gh-done section a.gh-done-yellow span {
|
||||
background: #ffb41f;
|
||||
|
||||
/* color: #ffb41f;
|
||||
border: 1px solid #ffb41f; */
|
||||
}
|
||||
|
||||
.gh-done section a.gh-done-blue span {
|
||||
background: #14b8ff;
|
||||
|
||||
/* color: #14b8ff;
|
||||
border: 1px solid #14b8ff; */
|
||||
}
|
||||
|
||||
.gh-done section a.gh-done-green span {
|
||||
background: #30cf43;
|
||||
|
||||
/* color: #30cf43;
|
||||
border: 1px solid #30cf43; */
|
||||
}
|
||||
|
||||
.gh-done section a.gh-done-pink span {
|
||||
background: #fb2d8d;
|
||||
|
||||
/* color: #fb2d8d;
|
||||
border: 1px solid #fb2d8d; */
|
||||
}
|
||||
|
||||
.gh-done section a:hover span {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.gh-done section a svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.gh-done section a h6 {
|
||||
grid-area: top;
|
||||
margin: 0 0 4px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.gh-done section a p {
|
||||
color: #7c8b9a;
|
||||
grid-area: content;
|
||||
margin: 0;
|
||||
padding: 0 4rem 0 0;
|
||||
}
|
||||
|
||||
.gh-done .gh-done-panel {
|
||||
margin: 8px 0 24px;
|
||||
padding: 52px var(--main-layout-area-padding) 16px;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-done .gh-done-panel .gh-stack {
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
|
||||
.gh-finishing-touches .gh-setting-desc {
|
||||
.gh-done .gh-setting-desc {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.gh-finishing-touches .gh-nav-design .gh-setting-action {
|
||||
.gh-done .gh-nav-design .gh-setting-action {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.gh-finishing-touches-preview {
|
||||
.gh-done-preview {
|
||||
flex-grow: 1;
|
||||
padding: 10vmin;
|
||||
background: var(--whitegrey-l2);
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.gh-finishing-touches .gh-browserpreview-previewcontainer {
|
||||
.gh-done .gh-browserpreview-previewcontainer {
|
||||
border-radius: 5px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gh-finishing-touches .gh-browserpreview-browser .tabs div {
|
||||
.gh-done .gh-browserpreview-browser .tabs div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-finishing-touches .gh-stack-item .gh-btn {
|
||||
.gh-done .gh-stack-item .gh-btn {
|
||||
background: var(--whitegrey);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gh-finishing-touches .gh-finishing-touches-button {
|
||||
.gh-done .gh-done-button {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
|
|
@ -1890,8 +1976,8 @@ section.gh-ds h2 {
|
|||
padding: 32px;
|
||||
}
|
||||
|
||||
.gh-finishing-touches .gh-nav {
|
||||
flex: 0 0 420px !important;
|
||||
.gh-done .gh-nav {
|
||||
flex: 0 0 360px !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<div class="gh-flow gh-done">
|
||||
<main class="flex flex-row h-100">
|
||||
<div class="gh-nav gh-nav-contextual gh-nav-design">
|
||||
<div class="flex flex-column h-100">
|
||||
<div class="gh-nav-body">
|
||||
<div class="gh-done-panel">
|
||||
<div class="gh-stack">
|
||||
<header>
|
||||
<h1>All done!</h1>
|
||||
<p>Your brand new publication is set up and ready to go.</p>
|
||||
</header>
|
||||
<section>
|
||||
<LinkTo class="gh-done-yellow" @route="editor.new" @model="post">
|
||||
<span>{{svg-jar "posts"}}</span>
|
||||
<h6>Write your first post</h6>
|
||||
<p>Test out the editor and get a feel for creating content inside Ghost.</p>
|
||||
</LinkTo>
|
||||
<LinkTo class="gh-done-green" @route="settings.design">
|
||||
<span>{{svg-jar "paint-palette"}}</span>
|
||||
<h6>Customise your design</h6>
|
||||
<p>Drop into the theme editor to tweak your site and make it your own.</p>
|
||||
</LinkTo>
|
||||
<a class="gh-done-blue" href="https://ghost.org/docs/migration/">
|
||||
<span>{{svg-jar "members"}}</span>
|
||||
<h6>Import members</h6>
|
||||
<p>Learn how to move over to Ghost from other tools with our migration guides.</p>
|
||||
</a>
|
||||
<LinkTo class="gh-done-pink" @route="dashboard">
|
||||
<span>{{svg-jar "house"}}</span>
|
||||
<h6>Explore Ghost admin</h6>
|
||||
<p>See the dashboard, click around and explore Ghost for yourself.</p>
|
||||
</LinkTo>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{!-- <div class="gh-done-button">
|
||||
<GhTaskButton
|
||||
class="gh-btn gh-btn-large gh-btn-black gh-btn-icon w-100"
|
||||
@task={{this.saveAndContinueTask}}
|
||||
@buttonText="Let me just explore →"
|
||||
@runningText="Saving..."
|
||||
@showSuccess={{false}}
|
||||
data-test-button="save-and-continue"
|
||||
/>
|
||||
</div> --}}
|
||||
</div>
|
||||
<div class="gh-done-preview">
|
||||
<GhBrowserPreview>
|
||||
<GhHtmlIframe class="site-frame" @html={{this.themeManagement.previewHtml}} />
|
||||
</GhBrowserPreview>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<div class="gh-flow gh-finishing-touches">
|
||||
<main class="flex flex-row h-100">
|
||||
<div class="gh-nav gh-nav-contextual gh-nav-design">
|
||||
<div class="flex flex-column h-100">
|
||||
<div class="gh-nav-body">
|
||||
<div class="gh-nav-design-settings">
|
||||
<div class="gh-stack">
|
||||
<header>
|
||||
<h1>Finishing touches</h1>
|
||||
<p class="gh-finishing-touches-subhed">You chose a theme, now it's time to make it your own.</p>
|
||||
</header>
|
||||
{{#if this.descriptionVisible}}
|
||||
<Settings::FormFields::SiteDescription class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
|
||||
{{/if}}
|
||||
|
||||
{{#if this.colorVisible}}
|
||||
<Settings::FormFields::AccentColor class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
|
||||
{{/if}}
|
||||
|
||||
{{#if this.logoVisible}}
|
||||
<Settings::FormFields::PublicationLogo class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
|
||||
{{/if}}
|
||||
|
||||
{{#if this.coverImageVisible}}
|
||||
<Settings::FormFields::PublicationCover class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-finishing-touches-button">
|
||||
<GhTaskButton
|
||||
class="gh-btn gh-btn-large gh-btn-black gh-btn-icon w-100"
|
||||
@task={{this.saveAndContinueTask}}
|
||||
@buttonText="Ready to go →"
|
||||
@runningText="Saving..."
|
||||
@showSuccess={{false}}
|
||||
data-test-button="save-and-continue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-finishing-touches-preview">
|
||||
<GhBrowserPreview>
|
||||
<GhHtmlIframe class="site-frame" @html={{this.themeManagement.previewHtml}} />
|
||||
</GhBrowserPreview>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -365,9 +365,9 @@ describe('Acceptance: Setup', function () {
|
|||
await authenticateSession();
|
||||
});
|
||||
|
||||
it('transitions to finishing-touches screen', async function () {
|
||||
it('transitions to done screen', async function () {
|
||||
await visit('/?firstStart=true');
|
||||
expect(currentURL()).to.equal('/setup/finishing-touches');
|
||||
expect(currentURL()).to.equal('/setup/done');
|
||||
});
|
||||
|
||||
it('transitions to dashboard with get-started modal on save', async function () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue