mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
🐛 Fixed post list not displaying correctly with long titles (#21892)
Previously, if you had posts with very long titles, the layout of the post list would break, causing the analytics button and the metrics to shift from row to row. These changes address that, and make the list render cohesively regardless of the length of a post's title, across resolutions. fixes https://linear.app/ghost/issue/DES-610/post-list-breaks-with-really-long-titles
This commit is contained in:
Daniël van der Winden
GitHub
parent
b6f94c5fdb
commit
59b6e92497
2 changed files with 81 additions and 47 deletions
|
|
@ -145,42 +145,10 @@
|
|||
</LinkTo>
|
||||
{{/if}}
|
||||
|
||||
{{!-- Opened / Signups column --}}
|
||||
{{#if (and @post.showEmailOpenAnalytics @post.showEmailClickAnalytics) }}
|
||||
<LinkTo @route="members" @query={{hash filterParam=(concat "opened_emails.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
|
||||
<span class="gh-content-email-stats-value">
|
||||
{{#if this.isHovered}}
|
||||
{{format-number @post.email.openedCount}}
|
||||
{{else}}
|
||||
{{@post.email.openRate}}<sup>%</sup>
|
||||
{{/if}}
|
||||
</span>
|
||||
<span class="gh-content-email-stats">
|
||||
opened
|
||||
</span>
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
<LinkTo @route={{this.editorRoute}} @models={{array this.post.displayName this.post.id}} class="permalink gh-list-data">
|
||||
{{!-- Empty on purpose --}}
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
|
||||
{{!-- Clicked / Conversions column --}}
|
||||
{{#if @post.showEmailClickAnalytics }}
|
||||
<LinkTo @route="members" @query={{hash filterParam=(concat "clicked_links.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
|
||||
<span class="gh-content-email-stats-value">
|
||||
{{#if this.isHovered}}
|
||||
{{format-number @post.count.clicks}}
|
||||
{{else}}
|
||||
{{@post.clickRate}}<sup>%</sup>
|
||||
{{/if}}
|
||||
</span>
|
||||
<span class="gh-content-email-stats">
|
||||
clicked
|
||||
</span>
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
{{#if @post.showEmailOpenAnalytics }}
|
||||
{{!-- Metrics columns wrapper --}}
|
||||
<div class="gh-post-list-metrics-container">
|
||||
{{!-- Opened / Signups column --}}
|
||||
{{#if (and @post.showEmailOpenAnalytics @post.showEmailClickAnalytics) }}
|
||||
<LinkTo @route="members" @query={{hash filterParam=(concat "opened_emails.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
|
||||
<span class="gh-content-email-stats-value">
|
||||
{{#if this.isHovered}}
|
||||
|
|
@ -198,7 +166,42 @@
|
|||
{{!-- Empty on purpose --}}
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{!-- Clicked / Conversions column --}}
|
||||
{{#if @post.showEmailClickAnalytics }}
|
||||
<LinkTo @route="members" @query={{hash filterParam=(concat "clicked_links.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
|
||||
<span class="gh-content-email-stats-value">
|
||||
{{#if this.isHovered}}
|
||||
{{format-number @post.count.clicks}}
|
||||
{{else}}
|
||||
{{@post.clickRate}}<sup>%</sup>
|
||||
{{/if}}
|
||||
</span>
|
||||
<span class="gh-content-email-stats">
|
||||
clicked
|
||||
</span>
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
{{#if @post.showEmailOpenAnalytics }}
|
||||
<LinkTo @route="members" @query={{hash filterParam=(concat "opened_emails.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
|
||||
<span class="gh-content-email-stats-value">
|
||||
{{#if this.isHovered}}
|
||||
{{format-number @post.email.openedCount}}
|
||||
{{else}}
|
||||
{{@post.email.openRate}}<sup>%</sup>
|
||||
{{/if}}
|
||||
</span>
|
||||
<span class="gh-content-email-stats">
|
||||
opened
|
||||
</span>
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
<LinkTo @route={{this.editorRoute}} @models={{array this.post.displayName this.post.id}} class="permalink gh-list-data">
|
||||
{{!-- Empty on purpose --}}
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{!-- Button column --}}
|
||||
{{#if @post.hasAnalyticsPage }}
|
||||
|
|
|
|||
|
|
@ -236,7 +236,9 @@
|
|||
/* END Temporary styles to move post list to use flex instead of tables */
|
||||
|
||||
.gh-posts-list-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gh-posts-list-item a:hover {
|
||||
|
|
@ -281,7 +283,10 @@
|
|||
}
|
||||
|
||||
.gh-post-list-title {
|
||||
padding-left: 10px;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gh-post-list-title .gh-lexical-indicator {
|
||||
|
|
@ -339,6 +344,8 @@
|
|||
margin: 0 0 2px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gh-content-entry-title a {
|
||||
|
|
@ -654,6 +661,18 @@
|
|||
.gh-contentfilter-menu:last-of-type {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.gh-post-list-title {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.gh-post-list-metrics-container a {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
|
|
@ -753,11 +772,7 @@
|
|||
display: block;
|
||||
padding: 6px 0 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: initial;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
|
|
@ -1451,10 +1466,6 @@
|
|||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.gh-post-list-metrics {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.gh-content-email-stats,
|
||||
.gh-post-list-cta {
|
||||
margin: 0 0 3px;
|
||||
|
|
@ -2127,3 +2138,23 @@ span.dropdown .gh-post-list-cta > span {
|
|||
.gh-post-analytics-mentions .gh-dashboard-list-footer a {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.gh-post-list-button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.gh-post-list-metrics-container {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.gh-post-list-metrics {
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
|
||||
.gh-post-list-button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue