mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 03:44:29 +03:00
Added in a more styled Get Started modal for fresh start
refs: https://github.com/TryGhost/Team/issues/1303 - implemented a new design for the modal - added in a start up animation inline with rest of onboarding
This commit is contained in:
James Morris
parent
6f1d5c7e30
commit
c88770a110
@ -1,25 +1,23 @@
|
||||
<div class="modal-content gh-get-started" data-test-modal="get-started">
|
||||
<button type="button" class="close" role="button" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
|
||||
|
||||
<div class="tc f4 gh-get-started-welcome">
|
||||
{{svg-jar "get-started"}}
|
||||
<h1>Great work!</h1>
|
||||
<p>Your site is ready to start publishing content.</p>
|
||||
<p><LinkTo @route="dashboard" class="gh-btn gh-btn-large gh-btn-green" {{on "click" @close}}><span>Start writing</span></LinkTo></p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row f8 gh-get-started-extras">
|
||||
<div class="pa4 w-50 tc br">
|
||||
{{svg-jar "get-started-members"}}
|
||||
<h4>Paid memberships</h4>
|
||||
<p>Build sustainable recurring revenue using Stripe.</p>
|
||||
<p><LinkTo @route="settings.membership" class="gh-btn" {{on "click" @close}}><span>Connect Stripe</span></LinkTo></p>
|
||||
</div>
|
||||
<div class="pa4 w-50 tc">
|
||||
{{svg-jar "get-started-migrations"}}
|
||||
<h4>Migrating data</h4>
|
||||
<p>Import content from other tools into Ghost with ease.</p>
|
||||
<p><a href=" https://ghost.org/docs/migration/" class="gh-btn" target="_blank" rel="noopener noreferrer" {{on "click" @close}}><span>Learn more</span></a></p>
|
||||
</div>
|
||||
</div>
|
||||
<section class="gh-get-started-welcome">
|
||||
<header>
|
||||
<h1>All set up!</h1>
|
||||
<p>Your site is now ready to start publishing content.</p>
|
||||
<p><LinkTo @route="dashboard" class="gh-btn gh-btn-green" {{on "click" @close}}><span>Start writing</span></LinkTo></p>
|
||||
</header>
|
||||
<footer>
|
||||
<ul>
|
||||
<li>
|
||||
<LinkTo @route="settings.membership" {{on "click" @close}}>Connect Stripe →</LinkTo>
|
||||
<p>Build a sustainable business.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://ghost.org/docs/migration/" target="_blank" rel="noopener noreferrer" {{on "click" @close}}>Import members →</a>
|
||||
<p>Migrate your people to us.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
@ -1834,7 +1834,7 @@ section.gh-ds h2 {
|
||||
|
||||
.gh-finishing-touches main {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.075);
|
||||
box-shadow: 0 0 30px rgb(0 0 0 / 4%);
|
||||
width: calc(100% - 32px);
|
||||
border-radius: 8px;
|
||||
margin: 0 16px 16px;
|
||||
@ -1854,7 +1854,7 @@ section.gh-ds h2 {
|
||||
}
|
||||
|
||||
.gh-finishing-touches .gh-browserpreview-previewcontainer {
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 8px 30px rgb(0 0 0 / 8%);
|
||||
border-radius: 5px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1871,36 +1871,84 @@ section.gh-ds h2 {
|
||||
/* Get started modal */
|
||||
/* ---------------------------------------------------- */
|
||||
|
||||
@keyframes reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(32px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.epm-modal .modal-content.gh-get-started {
|
||||
padding: 0;
|
||||
background-image: url(img/get-started.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
background-size: cover;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
animation: reveal 275ms normal 800ms forwards ease-out;
|
||||
opacity: 0;
|
||||
transform: translateY(32px);
|
||||
}
|
||||
|
||||
.modal-content.gh-get-started .close svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.gh-get-started-welcome {
|
||||
padding-top: 1rem;
|
||||
padding: 4rem 6rem 2rem 4rem;
|
||||
width: 66%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.gh-get-started-welcome svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
.gh-get-started-welcome header p:first-of-type {
|
||||
margin-bottom: 1.75rem;
|
||||
font-size: 1.5rem;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-get-started-extras svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
.gh-get-started-welcome footer {
|
||||
margin: 10rem 0 0;
|
||||
}
|
||||
|
||||
.gh-get-started-extras p:last-of-type {
|
||||
margin-bottom: 0.75rem;
|
||||
.gh-get-started-welcome footer ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-get-started-extras .br {
|
||||
border-color: var(--whitegrey);
|
||||
.gh-get-started-welcome footer li {
|
||||
margin: 0 0 0.5rem;
|
||||
padding: 0 0 0 40px;
|
||||
background: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
background-size: 20px;
|
||||
}
|
||||
|
||||
.gh-get-started-extras .pa4:first-child {
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
padding-right: 3rem;
|
||||
.gh-get-started-welcome footer li:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-get-started-extras .pa4:last-child {
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 3rem;
|
||||
.gh-get-started-welcome footer li:first-of-type {
|
||||
background-image: url(icons/get-started-members.svg);
|
||||
}
|
||||
|
||||
.gh-get-started-welcome footer li:last-of-type {
|
||||
background-image: url(icons/get-started-import.svg);
|
||||
}
|
||||
|
||||
.gh-get-started-welcome footer a {
|
||||
display: inline-block;
|
||||
margin: 0 0 0.25rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-get-started-welcome footer p {
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
13
ghost/admin/public/assets/icons/get-started-import.svg
Normal file
13
ghost/admin/public/assets/icons/get-started-import.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_147_6741)">
|
||||
<path d="M2 12.1365L13.6365 0.5" stroke="#7C8B9A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.6361 5.59097V0.5H8.54517" stroke="#7C8B9A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 7.77271L6.36353 19.4092" stroke="#7C8B9A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.36353 14.3184V19.4093H11.4545" stroke="#7C8B9A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_147_6741">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 744 B |
@ -1,6 +1,6 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.4943 20.6922C22.1161 20.6922 24.2415 18.5226 24.2415 15.8461C24.2415 13.1697 22.1161 11 19.4943 11C16.8725 11 14.7471 13.1697 14.7471 15.8461C14.7471 18.5226 16.8725 20.6922 19.4943 20.6922Z" stroke="#707B8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M28.9889 36.8458H10V34.692C10 32.1215 11.0003 29.6562 12.7809 27.8385C14.5614 26.0209 16.9764 24.9998 19.4944 24.9998C22.0125 24.9998 24.4275 26.0209 26.208 27.8385C27.9886 29.6562 28.9889 32.1215 28.9889 34.692V36.8458Z" stroke="#707B8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M27.9336 11C29.1926 11 30.4001 11.5106 31.2904 12.4194C32.1807 13.3282 32.6808 14.5608 32.6808 15.8461C32.6808 17.1314 32.1807 18.364 31.2904 19.2728C30.4001 20.1817 29.1926 20.6922 27.9336 20.6922" stroke="#707B8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M31.3096 25.4092C33.1068 26.1071 34.6541 27.3457 35.7467 28.961C36.8393 30.5764 37.4257 32.4923 37.4282 34.4553V36.846H34.2634" stroke="#707B8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.23086 8.23076C8.95143 8.23076 10.3462 6.83595 10.3462 5.11538C10.3462 3.3948 8.95143 2 7.23086 2C5.51028 2 4.11548 3.3948 4.11548 5.11538C4.11548 6.83595 5.51028 8.23076 7.23086 8.23076Z" stroke="#7C8B9A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.4615 18.6154H1V17.2308C1 15.5783 1.65645 13.9934 2.82495 12.8249C3.99344 11.6565 5.57826 11 7.23076 11C8.88326 11 10.4681 11.6565 11.6366 12.8249C12.8051 13.9934 13.4615 15.5783 13.4615 17.2308V18.6154Z" stroke="#7C8B9A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.769 2C13.5953 2 14.3877 2.32823 14.9719 2.91247C15.5562 3.49672 15.8844 4.28913 15.8844 5.11538C15.8844 5.94163 15.5562 6.73404 14.9719 7.31828C14.3877 7.90253 13.5953 8.23076 12.769 8.23076" stroke="#7C8B9A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.9846 11.2632C16.1641 11.7119 17.1795 12.5081 17.8965 13.5465C18.6135 14.585 18.9983 15.8166 19 17.0786V18.6155H16.9231" stroke="#7C8B9A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
BIN
ghost/admin/public/assets/img/get-started.jpg
Normal file
BIN
ghost/admin/public/assets/img/get-started.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 826 KiB |
Loading…
Reference in New Issue
Block a user