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

Added a fullscreen onboarding checklist to the dashboard (#19888)

Browse source 
ref https://linear.app/tryghost/issue/IPC-66/onboarding-checklist-v1

- Larger, 100vh onboarding checklist that’s currently on the dashboard,
but should be moved to it’s own component and route
- Every step links to the relevant screen, but the logic for completing
steps is missing
This commit is contained in:
Djordje Vlaisavljevic 2024-03-19 16:07:49 +00:00 • committed by GitHub
parent 3ff2eecb76
commit cdf45172a7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 183 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
ghost/admin/app/components/dashboard/onboarding-checklist.hbs
View file

@ -1,82 +1,85 @@
<section class="gh-dashboard-section"> <div class="gh-onboarding-wrapper">
<article class="gh-dashboard-onboarding-box"> <div class="gh-onboarding-header">
<div class="gh-dashboard-onboarding-box-message"> <video width="100" height="100" loop autoplay muted playsinline preload="metadata" style="width: 100px; height: 100px; margin-bottom: 24px;">
<div> <source src="assets/videos/logo-loader.mp4" type="video/mp4" />
{{!-- {{svg-jar "confetti"}} --}} </video>
<h3 class="gh-dashboard-onboarding-heading">Welcome to your new Ghost publication!</h3> <h2 class="gh-canvas-title">Maker Stations is ready to go!</h2>
<p>Let’s set you up for success.</p> <p>Let’s set your brand new publication up for success.</p>
<p>For additional resources, visit our Help Center.</p> </div>
</div>
<span>Dismiss</span> <div class="gh-onboarding-items">
</div> <div>
<div class="gh-dashboard-onboarding-items"> {{!-- Step 1 --}}
<div> <div class="gh-onboarding-item gh-onboarding-item--completed">
{{!-- Step 1 --}} <div class="gh-onboarding-item-content">
<div class="gh-dashboard-onboarding-item gh-dashboard-onboarding-item--completed"> {{svg-jar "rocket" }}
<div class="gh-dashboard-onboarding-item-content"> <div class="gh-onboarding-item-details">
{{svg-jar "rocket" }} <span class="gh-onboarding-item-title">Start a new Ghost publication</span>
<span class="gh-dashboard-list-text">Start a new Ghost publication</span>
</div>
<div class="gh-dashboard-onboarding-item-checkmark">
{{svg-jar "check-2" }}
</div> </div>
</div> </div>
{{!-- Step 2 --}} <div class="gh-onboarding-item-checkmark">
<LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-dashboard-onboarding-item gh-dashboard-onboarding-item--default"> {{svg-jar "check-circle-simple" }}
<div class="gh-dashboard-onboarding-item-content"> </div>
{{svg-jar "brush" }} </div>
<div class="gh-dashboard-onboarding-item-details"> {{!-- Step 2 --}}
<span class="gh-dashboard-onboarding-item-title">Customize your publication</span> <LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-onboarding-item gh-onboarding-item--next">
<span class="gh-dashboard-onboarding-item-description">Match the look and feel to your style and make it yours.</span> <div class="gh-onboarding-item-content">
</div> {{svg-jar "brush" }}
</div> <div class="gh-onboarding-item-details">
<div class="gh-dashboard-onboarding-item-action"> <span class="gh-onboarding-item-title">Customize your publication</span>
{{svg-jar "arrow-right" }} <span class="gh-onboarding-item-description">Match the look and feel to your style and make it yours.</span>
</div>
</LinkTo>
{{!-- Step 3 --}}
<LinkTo @route="lexical-editor.new" @model="post" class="gh-dashboard-onboarding-item">
<div class="gh-dashboard-onboarding-item-content">
{{svg-jar "writing" }}
<div class="gh-dashboard-onboarding-item-details">
<span class="gh-dashboard-onboarding-item-title">Create your first post</span>
<span class="gh-dashboard-onboarding-item-description">Explore the editor and tell your story — or a preview of what’s to come.</span>
</div> </div>
</div> </div>
<div class="gh-dashboard-onboarding-item-action"> <div class="gh-onboarding-item-action">
{{svg-jar "arrow-right" }} {{svg-jar "arrow-right-tail" }}
</div> </div>
</LinkTo> </LinkTo>
{{!-- Step 4 --}} {{!-- Step 3 --}}
<LinkTo @route="members" class="gh-dashboard-onboarding-item"> <LinkTo @route="lexical-editor.new" @model="post" class="gh-onboarding-item">
<div class="gh-dashboard-onboarding-item-content"> <div class="gh-onboarding-item-content">
{{svg-jar "member-add" }} {{svg-jar "writing" }}
<div class="gh-dashboard-onboarding-item-details"> <div class="gh-onboarding-item-details">
<span class="gh-dashboard-onboarding-item-title">Build your audience</span> <span class="gh-onboarding-item-title">Create your first post</span>
<span class="gh-dashboard-onboarding-item-description">Add members and grow your readership.</span> <span class="gh-onboarding-item-description">Explore the editor and tell your story.</span>
</div>
</div>
<div class="gh-dashboard-onboarding-item-action">
{{svg-jar "arrow-right" }}
</div>
</LinkTo>
{{!-- Step 5 --}}
<div role="button" {{on "click" (toggle-action "showShareModal" this)}} class="gh-dashboard-onboarding-item">
<div class="gh-dashboard-onboarding-item-content">
{{svg-jar "megaphone" }}
<div class="gh-dashboard-onboarding-item-details">
<span class="gh-dashboard-onboarding-item-title">Share your publication</span>
<span class="gh-dashboard-onboarding-item-description">Share your publication on social media.</span>
</div> </div>
</div> </div>
<div class="gh-dashboard-onboarding-item-action"> <div class="gh-onboarding-item-action">
{{svg-jar "arrow-right" }} {{svg-jar "arrow-right-tail" }}
</div> </div>
</LinkTo>
{{!-- Step 4 --}}
<LinkTo @route="members" class="gh-onboarding-item">
<div class="gh-onboarding-item-content">
{{svg-jar "member-add" }}
<div class="gh-onboarding-item-details">
<span class="gh-onboarding-item-title">Build your audience</span>
<span class="gh-onboarding-item-description">Add members and grow your readership.</span>
</div>
</div>
<div class="gh-onboarding-item-action">
{{svg-jar "arrow-right-tail" }}
</div>
</LinkTo>
{{!-- Step 5 --}}
<div role="button" {{on "click" (toggle-action "showShareModal" this)}} class="gh-onboarding-item">
<div class="gh-onboarding-item-content">
{{svg-jar "megaphone" }}
<div class="gh-onboarding-item-details">
<span class="gh-onboarding-item-title">Share your publication</span>
<span class="gh-onboarding-item-description">Share your publication on social media.</span>
</div>
</div>
<div class="gh-onboarding-item-action">
{{svg-jar "arrow-right-tail" }}
</div> </div>
</div> </div>
</div> </div>
</article> </div>
</section>
<p class="gh-onboarding-help">Need some more help? Check out our <a href="#">Help Center</a></p>
<a href="#" class="gh-onboarding-skip">Skip onboarding</a>
</div>
{{#if this.showShareModal}} {{#if this.showShareModal}}
<GhFullscreenModal @modal="share" <GhFullscreenModal @modal="share"

171
ghost/admin/app/styles/layouts/dashboard.css
View file

@ -2764,84 +2764,92 @@ Dashboard Mentions */
/* --------------------------------- /* ---------------------------------
Onboarding checklist */ Onboarding checklist */
.gh-dashboard-onboarding-box { .gh-onboarding-wrapper {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 2fr;
border: 1px solid #ebeef0;
border-radius: 6px;
overflow: hidden;
flex: 1;
}
.gh-dashboard-onboarding-box-message {
display: flex; display: flex;
justify-content: center;
align-items: center;
flex-direction: column; flex-direction: column;
justify-content: space-between; min-height: 100vh;
background-color: rgb(204, 29, 204); position: relative;
padding: 24px;
color: white;
background: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url(img/gradient-bg.png);
} }
.gh-dashboard-onboarding-heading { .gh-onboarding-header {
font-size: 1.8rem; text-align: center;
font-weight: 700; margin-bottom: 40px;
line-height: 1.3;
padding: 0;
color: #fff;
letter-spacing: -.3px;
} }
.gh-dashboard-onboarding-items { .gh-onboarding-header p {
padding: 24px; margin-top: 8px;
margin-bottom: 0;
color: var(--midgrey);
font-size: 1.5rem;
} }
.gh-dashboard-onboarding-item { .gh-onboarding-items {
padding: 12px 0; max-width: 540px;
width: 100%;
border-radius: 6px;
padding: 16px 24px;
/* box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.04); */
border: 1px solid #ebeef0;
/* box-shadow: -7px -6px 42px 8px rgba(75,225,226,.28),7px 6px 42px 8px rgba(202,103,255,.32); */
}
.gh-onboarding-item {
padding: 24px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid #ebeef0; border-bottom: 1px solid #ebeef0;
} }
.gh-dashboard-onboarding-item:first-child { .gh-onboarding-item:first-child {
margin-top: -12px; margin-top: -12px;
} }
.gh-dashboard-onboarding-item:last-child { .gh-onboarding-item:last-child {
border-bottom: 0 none; border-bottom: 0 none;
margin-bottom: -12px; margin-bottom: -12px;
} }
.gh-dashboard-onboarding-item:not(.gh-dashboard-onboarding-item--completed):hover { .gh-onboarding-item--next {
background: linear-gradient(315deg,#fafafb 60%,#fff); margin: 0px -32px 6px;
background: white;
padding: 24px 32px;
box-shadow: 0px 1px 0px rgba(17,17,26,0.05), 0px 0px 8px rgba(17,17,26,0.1);
border-radius: 6px;
border-bottom: none;
} }
.gh-dashboard-onboarding-item--completed .gh-dashboard-onboarding-item-content { .gh-onboarding-item:has(+ .gh-onboarding-item--next) {
opacity: 0.3; border-bottom: none;
} }
.gh-dashboard-onboarding-item-content { .gh-onboarding-item:not(.gh-onboarding-item--next) .gh-onboarding-item-description {
display: none;
}
.gh-onboarding-item--completed .gh-onboarding-item-content {
opacity: 0.2;
}
.gh-onboarding-item-content {
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: flex-start; justify-content: flex-start;
min-width: 0; min-width: 0;
} }
.gh-dashboard-onboarding-item-details { .gh-onboarding-item-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: left; text-align: left;
} }
.gh-dashboard-onboarding-item-title { .gh-onboarding-item-title {
font-weight: 600; font-weight: 700;
font-size: 1.5rem; font-size: 1.6rem;
line-height: 1;
letter-spacing: 0; letter-spacing: 0;
color: #394047; color: #394047;
padding: 0 32px 0 0; padding: 0 32px 0 0;
@ -2852,77 +2860,100 @@ Onboarding checklist */
margin-bottom: 0; margin-bottom: 0;
} }
.gh-dashboard-onboarding-items:hover .gh-dashboard-onboarding-item:hover .gh-dashboard-onboarding-item-description, .gh-onboarding-item-description {
.gh-dashboard-onboarding-items .gh-dashboard-onboarding-item--default .gh-dashboard-onboarding-item-description {
height: 20px;
}
.gh-dashboard-onboarding-item-description, .gh-dashboard-onboarding-items:hover .gh-dashboard-onboarding-item-description {
font-weight: 400; font-weight: 400;
color: #626d79!important; color: var(--middarkgrey);
height: 0; font-size: 1.5rem;
overflow: hidden; line-height: 1.4;
transition: height .15s; margin-top: 4px;
} }
.gh-dashboard-onboarding-item-action { .gh-onboarding-item-action {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
min-width: 0; min-width: 0;
transition: transform .15s;
} }
.gh-dashboard-onboarding-item-content svg { .gh-onboarding-item:hover .gh-onboarding-item-action {
transform: translateX(5px);
}
.gh-onboarding-item-content svg {
width: 20px; width: 20px;
min-width: 20px; min-width: 20px;
height: auto; height: auto;
margin: 2px 16px 0 0; margin: 0 16px 0 0;
color: #ae5aef; color: #ae5aef;
} }
.gh-dashboard-onboarding-item-content svg path { .gh-onboarding-item-content svg path {
stroke: #ae5aef; stroke: #ae5aef;
stroke-width: 1.5 !important; stroke-width: 1.5 !important;
} }
.gh-dashboard-onboarding-item--completed .gh-dashboard-onboarding-item-content svg { .gh-onboarding-item--completed .gh-dashboard-onboarding-item-content svg {
color: var(--middarkgrey); color: var(--middarkgrey);
} }
.gh-dashboard-onboarding-item--completed .gh-dashboard-onboarding-item-content svg path { .gh-onboarding-item--completed .gh-onboarding-item-content svg path {
stroke: var(--middarkgrey); stroke: var(--middarkgrey);
} }
.gh-dashboard-onboarding-item-action { .gh-onboarding-item-action svg {
display: flex;
}
.gh-dashboard-onboarding-item-action svg {
width: 14px; width: 14px;
min-width: 14px; min-width: 14px;
height: 14px; height: 14px;
margin-right: 1rem; margin-right: 1rem;
} }
.gh-dashboard-onboarding-item-action svg path { .gh-onboarding-item-action svg path {
fill: var(--midlightgrey); fill: #ae5aef;
} }
.gh-dashboard-onboarding-item-checkmark { .gh-onboarding-item-checkmark {
display: flex; display: flex;
} }
.gh-dashboard-onboarding-item-checkmark svg { .gh-onboarding-item-checkmark svg {
width: 14px; width: 20px;
height: auto; height: auto;
margin-right: 1rem; margin-right: 1rem;
} }
.gh-dashboard-onboarding-item-checkmark svg path { .gh-onboarding-item-checkmark svg path, .gh-onboarding-item-checkmark svg circle {
stroke: var(--green); stroke: var(--green);
} }
.gh-onboarding-help {
color: var(--midgrey);
margin-top: 40px;
font-size: 1.5rem;
}
.gh-onboarding-help a {
color: var(--midgrey);
text-decoration: underline;
}
.gh-onboarding-skip {
display: flex;
align-items: center;
position: absolute;
bottom: 32px;
padding: 1px 14px;
border: 1px solid #e6e9eb;
color: var(--middarkgrey);
border-radius: 3px;
transition: all .2s ease;
white-space: nowrap;
height: 38px;
overflow: hidden;
transition: all .1s linear;
}
/* --------------------------------- /* ---------------------------------
Share publication modal */ Share publication modal */

2
ghost/admin/app/templates/dashboard.hbs
View file

@ -1,5 +1,6 @@
<section class="gh-canvas" {{scroll-top}}> <section class="gh-canvas" {{scroll-top}}>
<div class="gh-dashboard"> <div class="gh-dashboard">
{{#unless (feature 'onboardingChecklist')}}
<GhCanvasHeader class="gh-canvas-header sticky"> <GhCanvasHeader class="gh-canvas-header sticky">
<h2 class="gh-canvas-title" data-test-screen-title> <h2 class="gh-canvas-title" data-test-screen-title>
Dashboard Dashboard
@ -78,6 +79,7 @@
</div> </div>
{{/unless}} {{/unless}}
</GhCanvasHeader> </GhCanvasHeader>
{{/unless}}
<section class="gh-dashboard-layout"> <section class="gh-dashboard-layout">
{{#if this.isLoading }} {{#if this.isLoading }}
<GhLoadingSpinner /> <GhLoadingSpinner />

9
ghost/admin/public/assets/icons/check-circle-simple.svg Normal file
View file

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px!important;}
</style>
</defs>
<title>check-circle-1</title>
<path class="a" d="M6,13.223,8.45,16.7a1.049,1.049,0,0,0,1.707.051L18,6.828"/>
<circle class="a" cx="12" cy="11.999" r="11.25"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 400 B