mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 07:09:48 +03:00
d4f131ee26
Refs https://github.com/TryGhost/Team/issues/459 - Updated styles for Facebook, Twitter and Google - Added mockup for tweets, posts, and Google search results - Got rid of browser mockup on desktop preview - Changed button-group active style from blue to black
84 lines
4.6 KiB
Handlebars
84 lines
4.6 KiB
Handlebars
|
|
<div class="gh-post-preview-social-container">
|
|
<div class="flex flex-column">
|
|
<div class="flex mb6">
|
|
<div class="gh-social-og-container">
|
|
<div class="flex ma3 mb2">
|
|
<span>{{svg-jar "social-facebook" class="social-icon"}}</span>
|
|
<div>
|
|
<div class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</div>
|
|
<div class="gh-social-og-time">12 hrs</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-column ma3 mt2">
|
|
<span class="gh-social-og-desc w-100 mb2" />
|
|
<span class="gh-social-og-desc w-100 mb2" />
|
|
<span class="gh-social-og-desc w-60" />
|
|
</div>
|
|
<div class="gh-social-og-preview">
|
|
{{#if this.facebookImage}}
|
|
<div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div>
|
|
{{/if}}
|
|
<div class="gh-social-og-preview-content">
|
|
<div class="gh-social-og-preview-meta">
|
|
{{this.config.blogDomain}}
|
|
</div>
|
|
<div class="gh-social-og-preview-title">{{truncate this.facebookTitle 88}}</div>
|
|
<div class="gh-social-og-preview-desc">{{truncate this.facebookDescription}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-social-og-reactions">
|
|
<span class="gh-social-og-likes">{{svg-jar "facebook-like" class="z-999"}}{{svg-jar "facebook-heart" class="nl1"}}182</span>
|
|
<span class="gh-social-og-comments">7 comments</span>
|
|
<span class="gh-social-og-comments ml2">2 shares</span>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gh-social-twitter-container">
|
|
<div class="flex ma3 mb2 mr4">
|
|
<span>{{svg-jar "social-twitter" class="social-icon"}}</span>
|
|
<div>
|
|
<span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
|
|
<span class="gh-social-og-time">12 hrs</span>
|
|
<div class="flex flex-column mt2 mb3">
|
|
<span class="gh-social-og-desc w-100 mb2" />
|
|
<span class="gh-social-og-desc w-60" />
|
|
</div>
|
|
<div class="gh-social-twitter-post-preview">
|
|
{{#if this.twitterImage}}
|
|
<div class="gh-social-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
|
|
{{/if}}
|
|
<div class="gh-twitter-preview-content">
|
|
<div class="gh-social-twitter-preview-title">{{this.twitterTitle}}</div>
|
|
<div class="gh-social-twitter-preview-desc">{{truncate this.twitterDescription}}</div>
|
|
<div class="gh-social-twitter-preview-meta">
|
|
{{svg-jar "twitter-link"}}
|
|
{{this.config.blogDomain}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-social-twitter-reactions">
|
|
<div class="flex items-center">{{svg-jar "twitter-comment"}}2</div>
|
|
<div class="flex items-center">{{svg-jar "twitter-retweet"}}11</div>
|
|
<div class="flex items-center">{{svg-jar "twitter-like"}}32</div>
|
|
<div class="flex items-center">{{svg-jar "twitter-share"}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gh-seo-preview-container">
|
|
{{svg-jar "google"}}
|
|
<div class="gh-seo-preview">
|
|
<div class="gh-seo-search-bar">{{svg-jar "google-search"}}</div>
|
|
<div class="gh-seo-preview-link">{{this.config.blogDomain}} > {{#if this.ghostPaths.subdir}}{{this.ghostPaths.subdir}} > {{/if}}{{@post.slug}}</div>
|
|
<div class="gh-seo-preview-title">{{this.serpTitle}}</div>
|
|
<div class="gh-seo-preview-desc">
|
|
{{moment-format (now) "DD MMM YYYY"}} — {{truncate this.serpDescription 170}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |