mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-26 04:13:30 +03:00
Added social share modal to onboarding checklist (#19891)
Updated the share modal design and functionality ref IPC-90 • Rebuilt the bookmark card to match other components • Added linking to the different social networks • Added a close button that closes the modal • Removed repetitive subtitle
This commit is contained in:
Daniël van der Winden
GitHub
parent
e7e2e47b3c
commit
4c598a1e6d
@ -31,4 +31,9 @@ export default class OnboardingChecklist extends Component {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
closeModal() {
|
||||
this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,116 +1,97 @@
|
||||
|
||||
<header class="modal-header">
|
||||
<h1>Share your publication</h1>
|
||||
<p>Let the world discover your publication. Share it with your network and start building a community of readers.</p>
|
||||
</header>
|
||||
<button type="button" class="close" title="Close">{{svg-jar "close"}}<span class="hidden">Close</span></button>
|
||||
<a class="close" href="" role="button" title="Close">
|
||||
{{svg-jar "close"}}
|
||||
<span class="hidden">Close</span>
|
||||
</a>
|
||||
|
||||
<div class="gh-post-bookmark-container">
|
||||
<div class="gh-post-bookmark">
|
||||
{{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}}
|
||||
{{#if imageUrl}}
|
||||
<div class="gh-post-bookmark-image">
|
||||
<img src={{imageUrl}} alt="" role="presentation" />
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-post-bookmark-content">
|
||||
<div class="gh-post-bookmark-title">
|
||||
{{get-setting "title"}}
|
||||
</div>
|
||||
|
||||
<div class="gh-post-bookmark-text truncate">
|
||||
{{ get-setting "description"}}
|
||||
</div>
|
||||
|
||||
{{!-- <div class="modal-body">
|
||||
<div class="gh-post-bookmark-container">
|
||||
<div class="gh-post-bookmark">
|
||||
{{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}}
|
||||
<div class="gh-post-bookmark-title">{{get-setting "title"}}</div>
|
||||
<div class="gh-post-bookmark-description truncate">{{ get-setting "description"}}</div>
|
||||
<div class="gh-post-bookmark-details">
|
||||
{{#if (get-setting "icon")}}
|
||||
<div class="gh-post-bookmark-site-icon"><img src={{get-setting "icon"}} alt="" role="presentation" /></div>
|
||||
<div class="gh-site-icon"><img src={{get-setting "icon"}} alt="" role="presentation" /></div>
|
||||
{{/if}}
|
||||
<div class="gh-post-bookmark-site-title">{{get-setting "title"}}</div>
|
||||
<div class="gh-post-bookmark-authors">Daniël van der Winden</div>
|
||||
</div>
|
||||
|
||||
{{#if imageUrl}}
|
||||
<div class="gh-post-bookmark-image">
|
||||
<img src={{imageUrl}} alt="" role="presentation" />
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
</div>
|
||||
<span>You can set your publication icon, cover image and description in Settings</span>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<span>Icon</span>
|
||||
<p>Copy a link to your publication</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>Icon</span>
|
||||
<p>Share on X</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>Icon</span>
|
||||
<p>Share on Facebook</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>Icon</span>
|
||||
<p>Share on LinkedIn</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div> --}}
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="gh-site-preview-container">
|
||||
<div class="gh-site-preview">
|
||||
{{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}}
|
||||
<div class="gh-site-preview-title">{{get-setting "title"}}</div>
|
||||
<div class="gh-site-preview-description truncate">{{ get-setting "description"}}</div>
|
||||
<div class="gh-site-preview-details">
|
||||
{{#if (get-setting "icon")}}
|
||||
<div class="gh-site-icon"><img src={{get-setting "icon"}} alt="" role="presentation" /></div>
|
||||
{{/if}}
|
||||
<div class="gh-site-title">{{get-setting "title"}}
|
||||
<span>•</span>
|
||||
</div>
|
||||
<div class="gh-authors">Daniël van der Winden</div>
|
||||
<div class="gh-post-bookmark-site-title">
|
||||
{{get-setting "title"}}
|
||||
</div>
|
||||
|
||||
{{#if imageUrl}}
|
||||
<div class="gh-site-image">
|
||||
<img src={{imageUrl}} alt="" role="presentation" />
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
</div>
|
||||
<span class="tip">You can set your publication icon, cover image and description in Settings</span>
|
||||
{{/let}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="gh-share-links">
|
||||
<li>
|
||||
<span class="tip">You can set your publication icon, cover image and description in <a href="settings/design/edit/?ref=share-modal" title="Adjust settings">Settings</a></span>
|
||||
|
||||
<ul class="gh-share-links">
|
||||
<li>
|
||||
<a href="http://google.com" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Copy link">
|
||||
<div class="gh-share-link-content">
|
||||
<span>
|
||||
{{svg-jar "link"}}
|
||||
{{svg-jar "copy" }}
|
||||
</span>
|
||||
Copy a link to your publication
|
||||
<div class="gh-dashboard-onboarding-item-action">
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
</div>
|
||||
<div class="gh-onboarding-item-action">
|
||||
{{svg-jar "arrow-right-tail"}}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/intent/tweet?text=This%20is%20an%20example%20of%20a%20pre-written%20tweet" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on X">
|
||||
<div class="gh-share-link-content">
|
||||
<span>
|
||||
{{svg-jar "social-x"}}
|
||||
</span>
|
||||
Share on X
|
||||
<div class="gh-dashboard-onboarding-item-action">
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
</div>
|
||||
<div class="gh-onboarding-item-action">
|
||||
{{svg-jar "arrow-right-tail"}}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://facebook.com" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on Facebook">
|
||||
<div class="gh-share-link-content">
|
||||
<span>
|
||||
{{svg-jar "social-facebook"}}
|
||||
</span>
|
||||
Share on Facebook
|
||||
<div class="gh-dashboard-onboarding-item-action">
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
</div>
|
||||
<div class="gh-onboarding-item-action">
|
||||
{{svg-jar "arrow-right-tail"}}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://linkedin.com" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on LinkedIn">
|
||||
<div class="gh-share-link-content">
|
||||
<span>
|
||||
{{svg-jar "social-linkedin"}}
|
||||
</span>
|
||||
Share on LinkedIn
|
||||
<div class="gh-dashboard-onboarding-item-action">
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-onboarding-item-action">
|
||||
{{svg-jar "arrow-right-tail"}}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
@ -2812,6 +2812,10 @@ Onboarding checklist */
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
|
||||
.gh-onboarding-item:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-onboarding-item--next {
|
||||
margin: 0px -32px 6px;
|
||||
background: white;
|
||||
@ -2906,7 +2910,6 @@ Onboarding checklist */
|
||||
width: 14px;
|
||||
min-width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.gh-onboarding-item-action svg path {
|
||||
@ -2929,7 +2932,7 @@ Onboarding checklist */
|
||||
|
||||
.gh-onboarding-help {
|
||||
color: var(--midgrey);
|
||||
margin-top: 40px;
|
||||
margin-top: 24px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@ -2965,43 +2968,24 @@ Share publication modal */
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.gh-site-preview {
|
||||
|
||||
.gh-post-bookmark {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-site-preview-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
padding: 0;
|
||||
color: var(--black);
|
||||
letter-spacing: -.3px;
|
||||
margin-bottom: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-site-preview-description {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
padding: 0;
|
||||
color: var(--midgrey);
|
||||
margin-bottom: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-site-preview-details {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.gh-post-bookmark:hover {
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.gh-site-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.gh-site-icon img {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.gh-site-image {
|
||||
@ -3014,29 +2998,50 @@ Share publication modal */
|
||||
.gh-share-links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 40px 0 0;
|
||||
margin: 32px 0 0 0;
|
||||
}
|
||||
|
||||
.gh-share-links li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--darkgrey);
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-share-links li:last-child a {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
|
||||
a.gh-share-link {
|
||||
color: var(--darkgrey);
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ebeef0;
|
||||
}
|
||||
|
||||
a.gh-share-link:hover .gh-onboarding-item-action {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.gh-share-link-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.gh-share-links li span {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gh-share-links li span svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: var(--midgrey);
|
||||
margin: 0 16px 0 0;
|
||||
}
|
||||
|
||||
span.tip {
|
||||
@ -3048,4 +3053,13 @@ span.tip {
|
||||
color: var(--midgrey);
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
span.tip a {
|
||||
text-decoration: underline;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
span.tip a:hover {
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>copy</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.333 1.75A1.586 1.586 0 0 0 1.75 3.334v5.833a1.586 1.586 0 0 0 1.584 1.583h3.5a.75.75 0 0 1 0 1.5h-3.5A3.081 3.081 0 0 1 .25 9.167V3.333A3.085 3.085 0 0 1 3.333.25h3.5a3.083 3.083 0 0 1 3.084 3.083V4.5a.75.75 0 0 1-1.5 0V3.333A1.586 1.586 0 0 0 6.833 1.75h-3.5z" fill="#000"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.389 5.25a.806.806 0 0 0-.806.806v7.388c0 .445.361.806.806.806h5.055c.445 0 .806-.36.806-.806V6.056a.806.806 0 0 0-.806-.806H8.39zm-2.306.806A2.306 2.306 0 0 1 8.389 3.75h5.055a2.305 2.305 0 0 1 2.306 2.306v7.388a2.305 2.305 0 0 1-2.306 2.306H8.39a2.306 2.306 0 0 1-2.306-2.306V6.056z" fill="#000"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.333 1.75A1.586 1.586 0 0 0 1.75 3.334v5.833a1.586 1.586 0 0 0 1.584 1.583h3.5a.75.75 0 0 1 0 1.5h-3.5A3.081 3.081 0 0 1 .25 9.167V3.333A3.085 3.085 0 0 1 3.333.25h3.5a3.083 3.083 0 0 1 3.084 3.083V4.5a.75.75 0 0 1-1.5 0V3.333A1.586 1.586 0 0 0 6.833 1.75h-3.5z" fill="none"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.389 5.25a.806.806 0 0 0-.806.806v7.388c0 .445.361.806.806.806h5.055c.445 0 .806-.36.806-.806V6.056a.806.806 0 0 0-.806-.806H8.39zm-2.306.806A2.306 2.306 0 0 1 8.389 3.75h5.055a2.305 2.305 0 0 1 2.306 2.306v7.388a2.305 2.305 0 0 1-2.306 2.306H8.39a2.306 2.306 0 0 1-2.306-2.306V6.056z" fill="none"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 807 B After Width: | Height: | Size: 807 B |
Loading…
Reference in New Issue
Block a user