github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-14 09:33:04 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Fix search topic titles wrapping (#13315)

Browse Source 
A followup to e3b0abc and a replacement PR for #13298.
Fixes long topic titles wrapping to a separate line in the dropdown search results.

Also replaces divs that were incorrectly nested inside spans.
This commit is contained in:
Jarek Radosz 2021-06-07 21:26:22 +02:00 committed by GitHub
parent f90c4bd6a1
commit 1cd189aabf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/app/widgets/search-menu-results.js
View File

@ -161,9 +161,7 @@ createSearchResult({
this.siteSettings.use_pg_headlines_for_excerpt && this.siteSettings.use_pg_headlines_for_excerpt &&
result.topic_title_headline result.topic_title_headline
? new RawHtml({ ? new RawHtml({
html: `<span>${emojiUnescape( html: emojiUnescape(result.topic_title_headline),
result.topic_title_headline
)}</span>`,
}) })
: new Highlighted(topic.fancyTitle, term) : new Highlighted(topic.fancyTitle, term)
), ),
@ -182,8 +180,8 @@ createSearchResult({
} }
const link = h("span.topic", [ const link = h("span.topic", [
h("div.first-line", firstLine), h("span.first-line", firstLine),
h("div.second-line", secondLine), h("span.second-line", secondLine),
]); ]);
return postResult.call(this, result, link, term); return postResult.call(this, result, link, term);

2
app/assets/javascripts/discourse/app/widgets/topic-status.js
View File

@ -6,7 +6,7 @@ import { h } from "virtual-dom";
import { iconNode } from "discourse-common/lib/icon-library"; import { iconNode } from "discourse-common/lib/icon-library";
export default createWidget("topic-status", { export default createWidget("topic-status", {
tagName: "div.topic-statuses", tagName: "span.topic-statuses",
html(attrs) { html(attrs) {
const topic = attrs.topic; const topic = attrs.topic;

9
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -71,6 +71,11 @@
} }
.search-result-topic { .search-result-topic {
.first-line {
display: block;
line-height: $line-height-medium;
}
.second-line { .second-line {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -273,14 +278,12 @@
} }
.topic { .topic {
display: inline-block; display: block;
} }
.topic-title { .topic-title {
display: inline-block;
color: var(--tertiary); color: var(--tertiary);
overflow-wrap: anywhere; overflow-wrap: anywhere;
line-height: $line-height-medium;
@supports not (overflow-wrap: anywhere) { @supports not (overflow-wrap: anywhere) {
word-break: break-word; word-break: break-word;
} }