- {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}}
- {{#if imageUrl}}
-
+
+ {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}}
+ {{#if imageUrl}}
+
- {{/if}}
-
-
- You can set your publication icon, cover image and description in Settings
-
-
- {{/let}}
+ {{else}}
+
- {{get-setting "title"}}
-
-
-
- {{ get-setting "description"}}
-
-
-
- {{#if (get-setting "icon")}}
- 
- {{/if}}
-
-
-
- {{get-setting "title"}}
-
-
+ {{svg-jar "picture"}}
+ {{/if}}
+
+
+
+ {{/let}}
+ {{get-setting "title"}}
+
+
+ {{ get-setting "description"}}
+
+ -
+ Set your publication’s cover image and description in Settings
+
+
-
- {{!--
--}} - - - - {{svg-jar "link" }} - - Copy a link to your publication --- {{svg-jar "arrow-right-tail"}} -+ + + {{svg-jar "social-x"}} + -
-
- - - {{svg-jar "social-x"}} - - Share on X --- {{svg-jar "arrow-right-tail"}} -- -
-
-
-
- + +{{svg-jar "social-facebook"}} - Share on Facebook --- {{svg-jar "arrow-right-tail"}}+
- - -
+ +{{svg-jar "social-linkedin"}} - Share on LinkedIn --- {{svg-jar "arrow-right-tail"}}diff --git a/ghost/admin/app/components/modal-share.js b/ghost/admin/app/components/modal-share.js index 60a1bdce3e..2975f5037c 100644 --- a/ghost/admin/app/components/modal-share.js +++ b/ghost/admin/app/components/modal-share.js @@ -10,6 +10,22 @@ export default ModalComponent.extend({ copyTextToClipboard(this.config.blogUrl); yield timeout(1000); return true; - }) + }), + + get encodedUrl() { + return encodeURIComponent(this.config.blogUrl); + }, + + get facebookShareUrl() { + return `https://www.facebook.com/sharer/sharer.php?u=${this.encodedUrl}`; + }, + + get linkedInShareUrl() { + return `https://www.linkedin.com/sharing/share-offsite/?url=${this.encodedUrl}`; + }, + + get xShareUrl() { + return `https://twitter.com/intent/tweet?url=${this.encodedUrl}`; + } }); \ No newline at end of file diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css index c6d7051801..8eb6bee6aa 100644 --- a/ghost/admin/app/styles/layouts/dashboard.css +++ b/ghost/admin/app/styles/layouts/dashboard.css @@ -2960,93 +2960,153 @@ Onboarding checklist */ /* --------------------------------- Share publication modal */ -.gh-site-preview-container { - padding: 24px; +.share-card-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; border-radius: 6px; border: 1px solid var(--whitegrey); background: var(--white); transition: all .3s ease-in-out; } -.gh-post-bookmark { - box-shadow: none; - border: 1px solid var(--whitegrey); +.share-card-image { + max-height: 196px; } -.gh-post-bookmark:hover { - box-shadow: none; - transform: none; +.share-card-image img { + border-radius: 6px 6px 0 0; + object-fit: cover; + width: 484px; + height: 196px; } -.gh-site-icon { - width: 16px; - height: 16px; - margin-right: 8px; -} - -.gh-site-icon img { - border-radius: 2px; -} - -.gh-site-image { +.placeholder { width: 100%; - height: auto; - border-radius: 6px; - margin-bottom: 24px; + height: 196px; + border-radius: 6px 6px 0 0; + display: flex; + justify-content: center; + align-items: center; + background: var(--whitegrey); } -.gh-share-links { +.placeholder svg { + width: 40px; + height: 40px; + stroke: var(--lightgrey); +} + +.share-card-content { + padding: 24px; + width: 100%; +} + +.share-card-title { + font-size: 1.7rem; + font-weight: 600; +} + +.copy-publication-link { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 40px; + background: #fafafb; + border: 1px solid var(--whitegrey); + border-radius: 4px; + padding: 8px 16px; + min-height: 48px; + font-weight: 400; + color: var(--darkgrey); + transition: all .3s ease-in-out; +} + +.copy-publication-link:hover { + border: 1px solid var(--lightgrey); +} + +.copy-publication-link .gh-share-link { + font-weight: 600; +} + +.copy-publication-link .gh-share-link-success { + color: var(--green); + font-size: 1.5rem; + font-weight: 600; +} + +.share-links { list-style: none; padding: 0; - margin: 32px 0 0 0; + margin: 16px 0 0 0; + display: flex; + flex-direction: row; } -.gh-share-links li { +.share-links li { font-size: 1.5rem; font-weight: 600; color: var(--darkgrey); line-height: 1.5; width: 100%; + margin: 0 8px 0 0; + vertical-align: middle; +} + +.share-links li:last-child { margin: 0; } -.gh-share-links li:last-child a { - border-bottom: 0 none; +.share-links li a { + display: block; + padding: 20px 0; + text-align: center; + border: 1px solid var(--whitegrey); + border-radius: 4px; + transition: all .3s ease-in-out; } -.gh-share-link { - color: var(--darkgrey); - padding: 16px 0; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid #ebeef0; +.share-links li a:hover { + box-shadow: 0 2px 4px rgb(0 0 0 / 7%); } -a.gh-share-link:hover .gh-onboarding-item-action { - transform: translateX(5px); +.share-links li span { + vertical-align: middle; + height: 20px; + display: block; } -.gh-share-link-content { - display: flex; - align-items: center; - justify-content: flex-start; -} - -.gh-share-links li span { - display: flex; -} - -.gh-share-links li span svg { - width: 16px; - height: 16px; +.share-links li a span svg { + width: 20px; + height: 20px; fill: var(--midgrey); - margin: 0 16px 0 0; - stroke-width: 1.5; +} + +.share-links svg path.social-facebook_svg__fb { + fill: var(--midgrey); +} + +.share-links svg path.social-linkedin_svg__linkedin { + fill: var(--midgrey); +} + +.share-links a:hover svg path.social-facebook_svg__fb { + fill: #1977f3; +} + + +.share-links a:hover svg path.social-linkedin_svg__linkedin { + fill: #007ebb; +} + +.share-links a:hover svg path.social-x_svg__x { + fill: var(--black); } span.tip { - font-size: 1.2rem; + font-size: 1.4rem; font-weight: 400; line-height: 1.5; padding: 0; @@ -3056,7 +3116,7 @@ span.tip { display: block; } -span.tip a { +span.tip a { text-decoration: underline; color: var(--midgrey); } diff --git a/ghost/admin/public/assets/icons/picture.svg b/ghost/admin/public/assets/icons/picture.svg new file mode 100644 index 0000000000..be5edb3e93 --- /dev/null +++ b/ghost/admin/public/assets/icons/picture.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/social-facebook.svg b/ghost/admin/public/assets/icons/social-facebook.svg index ceebd7e782..20a4f91b47 100644 --- a/ghost/admin/public/assets/icons/social-facebook.svg +++ b/ghost/admin/public/assets/icons/social-facebook.svg @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/social-linkedin.svg b/ghost/admin/public/assets/icons/social-linkedin.svg index 11f4ccb581..286454af0b 100644 --- a/ghost/admin/public/assets/icons/social-linkedin.svg +++ b/ghost/admin/public/assets/icons/social-linkedin.svg @@ -1,6 +1,6 @@ - - -
+
+ {{ this.config.blogUrl }}
+
+
+
+