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

UX: fix wrapping of topic map links with counter (#31184)

Browse Source 
Due to a change with how the link counter renders (as a pseudo element)
the grid layout in the topic map link modal regressed slightly with long
links


before: 

![image](https://github.com/user-attachments/assets/f7ea022c-62f9-44da-a575-4e7f46d31985)


after:
<img
src="https://github.com/user-attachments/assets/1c955593-beae-4795-9d90-9a50fd7646dd"
width="500">
This commit is contained in:
Kris
2025-02-05 08:28:22 -05:00
committed by GitHub
parent 5b5899b543
commit 0da3349513
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/topic-map/topic-map-link.gjs
View File

@ -31,11 +31,13 @@ export default class TopicMapLink extends Component {
data-clicks={{@clickCount}} data-clicks={{@clickCount}}
aria-label={{i18n "topic_map.clicks" count=@clickCount}} aria-label={{i18n "topic_map.clicks" count=@clickCount}}
> >
<span class="content">
{{#if @title}} {{#if @title}}
{{replaceEmoji this.truncatedContent}} {{replaceEmoji this.truncatedContent}}
{{else}} {{else}}
{{this.truncatedContent}} {{this.truncatedContent}}
{{/if}} {{/if}}
</span>
</a> </a>
{{#if (and @title @rootDomain)}} {{#if (and @title @rootDomain)}}
<span class="domain"> <span class="domain">

9
app/assets/stylesheets/common/components/topic-map.scss
View File

@ -380,7 +380,7 @@ body:not(.archetype-private_message) {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: grid-template-areas:
"counter link" "counter link"
". domain"; "counter domain";
padding: 0.75em 1rem; padding: 0.75em 1rem;
gap: 0.25em; gap: 0.25em;
@ -396,11 +396,18 @@ body:not(.archetype-private_message) {
} }
.topic-link { .topic-link {
display: contents;
.content {
grid-area: link; grid-area: link;
} }
}
.topic-link[data-clicks]::before { .topic-link[data-clicks]::before {
@include click-counter-badge; @include click-counter-badge;
grid-area: counter;
align-self: start;
margin-top: 0.35em;
} }
.topic-link[data-clicks]::after { .topic-link[data-clicks]::after {