mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 19:33:02 +03:00
Updated mentions feed design
refs https://github.com/TryGhost/Team/issues/2583
This commit is contained in:
Djordje Vlaisavljevic
parent
eea7c9c6f8
commit
066db4c46f
@ -1492,3 +1492,15 @@ kbd {
|
||||
.gh-mention-your-post-link {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.gh-mention-card {
|
||||
border-color: var(--hairline-color-1);
|
||||
}
|
||||
|
||||
.gh-mention-publisher {
|
||||
color: var(--middarkgrey);
|
||||
}
|
||||
|
||||
.gh-mentions-explainer {
|
||||
background: var(--whitegrey);
|
||||
}
|
||||
@ -1,61 +1,102 @@
|
||||
/* Mentions list
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-mention-your-post {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 8px;
|
||||
color: var(--midgrey);
|
||||
.gh-mentions-main-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 32px;
|
||||
}
|
||||
|
||||
.gh-mention-your-post-link {
|
||||
color: var(--black);
|
||||
font-weight: 500;
|
||||
.gh-mentions-list {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.gh-mention-card {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 24px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e6e9eb;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-mention-container {
|
||||
.gh-mention-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
border-radius: 3px;
|
||||
background-color: var(--whitegrey-l1);
|
||||
border: 1px solid var(--whitegrey-l1);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 1.35rem;
|
||||
margin-bottom: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-mention-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gh-mention-publisher {
|
||||
color: var(--middarkgrey);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-mention-link-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gh-mention-link-icon svg path {
|
||||
fill: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-mention-your-link {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.gh-mention-timestamp {
|
||||
margin-left: auto;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.gh-mention-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gh-mention-source {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-basis: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gh-mention-title {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.4em;
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.gh-mention-description {
|
||||
display: -webkit-box;
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.35rem;
|
||||
line-height: 1.5em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
max-height: 44px;
|
||||
overflow-y: hidden;
|
||||
opacity: .7;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
@ -63,25 +104,13 @@
|
||||
.gh-mention-metadata {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 22px;
|
||||
margin-top: auto;
|
||||
padding-top: 22px;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.35rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-mention-metadata>span:nth-of-type(2):before, .gh-mention-metadata>span:nth-of-type(3):before {
|
||||
content: "•";
|
||||
margin: 0 6px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.gh-mention-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.gh-mention-publisher {
|
||||
display: inline;
|
||||
}
|
||||
@ -94,18 +123,14 @@
|
||||
display: block;
|
||||
line-height: 1.65em;
|
||||
font-weight: 400;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.gh-mention-timestamp {
|
||||
font-weight: 400;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.gh-mention-thumbnail {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
min-width: 28%;
|
||||
min-height: 120px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.gh-mention-thumbnail img {
|
||||
@ -115,7 +140,8 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 0 2px 2px 0;
|
||||
border-radius: 3px;
|
||||
text-indent: -999999px;
|
||||
}
|
||||
|
||||
.gh-mentions-list-cta {
|
||||
@ -146,4 +172,29 @@
|
||||
line-height: 1.45em;
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-mentions-explainer {
|
||||
background-color: var(--whitegrey);
|
||||
border-radius: 5px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.gh-mentions-explainer h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.gh-mentions-explainer p {
|
||||
color: var(--middarkgrey);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.gh-mentions-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-mentions-list {
|
||||
grid-column: span 3;
|
||||
}
|
||||
}
|
||||
@ -4,51 +4,63 @@
|
||||
Mentions
|
||||
</h2>
|
||||
</GhCanvasHeader>
|
||||
<section>
|
||||
{{!-- TODO: Invert logic --}}
|
||||
{{#if this.mentionsInfinityModel}}
|
||||
{{#each this.mentionsInfinityModel as |mention|}}
|
||||
<div class="gh-mention-card">
|
||||
{{!-- TODO: link to the post analytics page of your post --}}
|
||||
<p class="gh-mention-your-post">Your {{if (eq mention.resource.type "post") "post" "page"}} <a href={{mention.target}} class="gh-mention-your-post-link">{{if mention.resource mention.resource.name mention.target}}</a> was mentioned in:</p>
|
||||
<a href="{{mention.source}}" class="gh-mention-container" rel="noreferrer noopener" target="_blank">
|
||||
<div class="gh-mention-content">
|
||||
<h3 class="gh-mention-title">{{if mention.sourceTitle mention.sourceTitle mention.target}}</h3>
|
||||
{{#if mention.sourceExcerpt}}
|
||||
<p class="gh-mention-description">{{mention.sourceExcerpt}}</p>
|
||||
{{/if}}
|
||||
<div class="gh-mention-metadata">
|
||||
<section class="gh-mentions-main-section">
|
||||
<div class="gh-mentions-list">
|
||||
{{#if this.mentionsInfinityModel}}
|
||||
<div>
|
||||
{{#each this.mentionsInfinityModel as |mention|}}
|
||||
<a href="{{mention.source}}" class="gh-mention-card" rel="noreferrer noopener" target="_blank">
|
||||
{{!-- TODO: link to the post analytics page of your post --}}
|
||||
<div class="gh-mention-header">
|
||||
{{#if mention.sourceFavicon}}
|
||||
<img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="gh-mention-icon">
|
||||
{{/if}}
|
||||
{{#if mention.sourceSiteTitle}}
|
||||
<span class="gh-mention-publisher">{{mention.sourceSiteTitle}}</span>
|
||||
{{/if}}
|
||||
{{#if mention.sourceAuthor}}
|
||||
<span class="gh-mention-author">{{mention.sourceAuthor}}</span>
|
||||
{{/if}}
|
||||
<div class="gh-mention-publisher">{{mention.sourceSiteTitle}}</div>
|
||||
<div class="gh-mention-link-icon">
|
||||
{{svg-jar "twitter-link"}}
|
||||
</div>
|
||||
<span class="gh-mention-your-link">{{if mention.resource mention.resource.name mention.target}}</span>
|
||||
<span class="gh-mention-timestamp" title={{gh-format-post-time mention.timestamp}}>{{moment-from-now mention.timestamp}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{#if mention.sourceFeaturedImage}}
|
||||
<div class="gh-mention-thumbnail">
|
||||
<img src="{{mention.sourceFeaturedImage}}" alt="{{mention.sourceTitle}}">
|
||||
<div class="gh-mention-content">
|
||||
<div class="gh-mention-source">
|
||||
<h3 class="gh-mention-title">{{if mention.sourceTitle mention.sourceTitle mention.target}}</h3>
|
||||
{{#if mention.sourceExcerpt}}
|
||||
<p class="gh-mention-description">{{mention.sourceExcerpt}}</p>
|
||||
{{/if}}
|
||||
<div class="gh-mention-metadata">
|
||||
{{#if mention.sourceAuthor}}
|
||||
<span class="gh-mention-author">{{mention.sourceAuthor}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{#if mention.sourceFeaturedImage}}
|
||||
<div class="gh-mention-thumbnail">
|
||||
<img src="{{mention.sourceFeaturedImage}}" alt="" role="presentation">
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div class="gh-mentions-list-cta">
|
||||
{{svg-jar "email-love-letter" class="love-letter"}}
|
||||
<h4>No mentions yet</h4>
|
||||
<p>When other sites mention your posts, they'll appear here.</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<GhInfinityLoader
|
||||
{{else}}
|
||||
<div class="gh-mentions-list-cta">
|
||||
{{svg-jar "email-love-letter" class="love-letter"}}
|
||||
<h4>No mentions yet</h4>
|
||||
<p>When other sites mention your posts, they'll appear here.</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
<GhInfinityLoader
|
||||
@infinityModel={{this.mentionsInfinityModel}}
|
||||
@scrollable=".gh-main"
|
||||
@triggerOffset={{1000}} />
|
||||
</div>
|
||||
<div class="gh-mentions-sidebar">
|
||||
<div class="gh-mentions-explainer">
|
||||
<img src="assets/img/mentions-background.png" alt="" role="presentation"/>
|
||||
<h2>Introducing Mentions</h2>
|
||||
<p>Whenever another person or site links to you, you’ll receive a notification in your dashboard to show you who’s talking about your content — and, when you link to someone else’s work, they’ll be notified, too.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
BIN
ghost/admin/public/assets/img/mentions-background.png
Normal file
BIN
ghost/admin/public/assets/img/mentions-background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Loading…
Reference in New Issue
Block a user