Prevent badges from becoming typographical widows (#5772)

https://meta.discourse.org/t/unread-indicator-counter-on-a-new-line/85719
This commit is contained in:
Michael Howell
2018-04-19 19:23:00 -07:00
committed by Kris
parent 26ce930ac6
commit fe3142e22d
2 changed files with 30 additions and 10 deletions

View File

@ -4,18 +4,25 @@
</td> </td>
{{/if}} {{/if}}
{{!--
The `~` syntax strip spaces between the elements, making it produce
`<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,
with no space between them.
This causes the topic-post-badge to be considered the same word as "text"
at the end of the link, preventing it from line wrapping onto its own line.
--}}
<td class='main-link clearfix' colspan="{{titleColSpan}}"> <td class='main-link clearfix' colspan="{{titleColSpan}}">
<span class='link-top-line'> <span class='link-top-line'>
{{raw-plugin-outlet name="topic-list-before-status"}} {{~raw-plugin-outlet name="topic-list-before-status"}}
{{raw "topic-status" topic=topic}} {{~raw "topic-status" topic=topic}}
{{topic-link topic class="raw-link raw-topic-link"}} {{~topic-link topic class="raw-link raw-topic-link"}}
{{#if topic.featured_link}} {{~#if topic.featured_link}}
{{topic-featured-link topic}} {{~topic-featured-link topic}}
{{/if}} {{~/if}}
{{raw-plugin-outlet name="topic-list-after-title"}} {{~raw-plugin-outlet name="topic-list-after-title"}}
{{#if showTopicPostBadges}} {{~#if showTopicPostBadges}}
{{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}} {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
{{/if}} {{~/if}}
</span> </span>
{{discourse-tags topic mode="list" tagsForUser=tagsForUser}} {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}

View File

@ -297,3 +297,16 @@ div.education {
@extend .list-cell; @extend .list-cell;
border-bottom: 2px solid $primary-low; border-bottom: 2px solid $primary-low;
} }
// This is not what we want:
//
// This is an overly-long topic title that would break just right
// *
//
// Instead, we want the line to break like this:
//
// This is an overly-long topic title that would break just
// right *
.topic-post-badges {
white-space: nowrap;
}