mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
FIX: don't nest all user info in one link (#23783)
This commit is contained in:
parent
8c0a25de00
commit
3ee8678cf1
@ -1,20 +1,26 @@
|
|||||||
{{#each this.usersTemplates as |userTemplate|}}
|
{{#each this.usersTemplates as |userTemplate|}}
|
||||||
<div data-username={{userTemplate.username}} class="user-info small">
|
<div data-username={{userTemplate.username}} class="user-info small">
|
||||||
<a
|
<div class="user-image">
|
||||||
href={{userTemplate.userPath}}
|
<div class="user-image-inner">
|
||||||
data-user-card={{userTemplate.username}}
|
<a
|
||||||
aria-label={{i18n
|
href={{userTemplate.userPath}}
|
||||||
"user.profile_possessive"
|
data-user-card={{userTemplate.username}}
|
||||||
username=userTemplate.username
|
aria-hidden="true"
|
||||||
}}
|
>
|
||||||
>
|
|
||||||
<div class="user-image">
|
|
||||||
<div class="user-image-inner">
|
|
||||||
{{html-safe userTemplate.avatar}}
|
{{html-safe userTemplate.avatar}}
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-detail">
|
</div>
|
||||||
<div class="name-line">
|
<div class="user-detail">
|
||||||
|
<div class="name-line">
|
||||||
|
<a
|
||||||
|
href={{userTemplate.userPath}}
|
||||||
|
data-user-card={{userTemplate.username}}
|
||||||
|
aria-label={{i18n
|
||||||
|
"user.profile_possessive"
|
||||||
|
username=userTemplate.username
|
||||||
|
}}
|
||||||
|
>
|
||||||
<span class="username">
|
<span class="username">
|
||||||
{{#if
|
{{#if
|
||||||
userTemplate.prioritizeName
|
userTemplate.prioritizeName
|
||||||
@ -25,9 +31,9 @@
|
|||||||
userTemplate.prioritizeName
|
userTemplate.prioritizeName
|
||||||
}}{{userTemplate.username}}{{else}}{{userTemplate.name}}{{/if}}
|
}}{{userTemplate.username}}{{else}}{{userTemplate.name}}{{/if}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
<div class="title">{{userTemplate.title}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
<div class="title">{{userTemplate.title}}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
@ -1,55 +1,56 @@
|
|||||||
<a
|
{{#if this.includeAvatar}}
|
||||||
href={{if this.includeLink this.userPath}}
|
<div class="user-image">
|
||||||
data-user-card={{if this.includeLink @user.username}}
|
<div class="user-image-inner">
|
||||||
aria-label={{if
|
<a
|
||||||
(and this.includeLink @user.username)
|
href={{this.userPath}}
|
||||||
(i18n "user.profile_possessive" username=@user.username)
|
data-user-card={{@user.username}}
|
||||||
}}
|
aria-hidden="true"
|
||||||
>
|
>{{avatar @user imageSize="large"}}</a>
|
||||||
{{#if this.includeAvatar}}
|
<UserAvatarFlair @user={{@user}} />
|
||||||
<div class="user-image">
|
|
||||||
<div class="user-image-inner">
|
|
||||||
{{avatar @user imageSize="large"}}
|
|
||||||
<UserAvatarFlair @user={{@user}} />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
</div>
|
||||||
<div class="user-detail">
|
{{/if}}
|
||||||
<div class="name-line">
|
<div class="user-detail">
|
||||||
|
<div class="name-line">
|
||||||
|
{{#if this.includeLink}}
|
||||||
|
<a href={{this.userPath}} data-user-card={{@user.username}}>
|
||||||
|
<span class={{if this.nameFirst "name" "username"}}>
|
||||||
|
{{if this.nameFirst @user.name (format-username @user.username)}}
|
||||||
|
</span>
|
||||||
|
<span class={{if this.nameFirst "username" "name"}}>
|
||||||
|
{{if this.nameFirst (format-username @user.username) @user.name}}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
{{else}}
|
||||||
<span class={{if this.nameFirst "name" "username"}}>
|
<span class={{if this.nameFirst "name" "username"}}>
|
||||||
{{if this.nameFirst @user.name (format-username @user.username)}}
|
{{if this.nameFirst @user.name (format-username @user.username)}}
|
||||||
</span>
|
</span>
|
||||||
<span class={{if this.nameFirst "username" "name"}}>
|
<span class={{if this.nameFirst "username" "name"}}>
|
||||||
{{if this.nameFirst (format-username @user.username) @user.name}}
|
{{if this.nameFirst (format-username @user.username) @user.name}}
|
||||||
</span>
|
</span>
|
||||||
{{#if (and @showStatus @user.status)}}
|
|
||||||
<UserStatusMessage
|
|
||||||
@status={{@user.status}}
|
|
||||||
@showDescription={{@showStatusDescription}}
|
|
||||||
/>
|
|
||||||
{{/if}}
|
|
||||||
<span>
|
|
||||||
<PluginOutlet
|
|
||||||
@name="after-user-name"
|
|
||||||
@connectorTagName="span"
|
|
||||||
@outletArgs={{hash user=this.user}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="title">{{@user.title}}</div>
|
|
||||||
{{#if (has-block)}}
|
|
||||||
<div class="details">
|
|
||||||
{{yield}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
{{#if (and @showStatus @user.status)}}
|
||||||
|
<UserStatusMessage
|
||||||
<span>
|
@status={{@user.status}}
|
||||||
|
@showDescription={{@showStatusDescription}}
|
||||||
|
/>
|
||||||
|
{{/if}}
|
||||||
<PluginOutlet
|
<PluginOutlet
|
||||||
@name="after-user-info"
|
@name="after-user-name"
|
||||||
@connectorTagName="div"
|
@connectorTagName="span"
|
||||||
@outletArgs={{hash user=this.user}}
|
@outletArgs={{hash user=this.user}}
|
||||||
/>
|
/>
|
||||||
</span>
|
</div>
|
||||||
|
<div class="title">{{@user.title}}</div>
|
||||||
|
{{#if (has-block)}}
|
||||||
|
<div class="details">
|
||||||
|
{{yield}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
</a>
|
<PluginOutlet
|
||||||
|
@name="after-user-info"
|
||||||
|
@connectorTagName="div"
|
||||||
|
@outletArgs={{hash user=this.user}}
|
||||||
|
/>
|
@ -33,10 +33,12 @@ module("Integration | Component | user-info", function (hooks) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.set("includeLink", true);
|
this.set("includeLink", true);
|
||||||
assert.ok(exists(`a[href="/u/${this.currentUser.username}"]`));
|
assert.ok(exists(`.name-line a[href="/u/${this.currentUser.username}"]`));
|
||||||
|
|
||||||
this.set("includeLink", false);
|
this.set("includeLink", false);
|
||||||
assert.notOk(exists(`a[href="/u/${this.currentUser.username}"]`));
|
assert.notOk(
|
||||||
|
exists(`.name-line a[href="/u/${this.currentUser.username}"]`)
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("includeAvatar", async function (assert) {
|
test("includeAvatar", async function (assert) {
|
||||||
|
@ -1,10 +1,7 @@
|
|||||||
// Common styles for "user-info" component
|
// Common styles for "user-info" component
|
||||||
.user-info {
|
.user-info {
|
||||||
> a {
|
display: flex;
|
||||||
display: flex;
|
gap: 1em;
|
||||||
gap: 1em;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-image-inner {
|
.user-image-inner {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -13,21 +10,22 @@
|
|||||||
|
|
||||||
.user-detail {
|
.user-detail {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@include breakpoint(tablet) {
|
@include breakpoint(mobile-medium) {
|
||||||
font-size: var(--font-down-1);
|
font-size: var(--font-down-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.name-line {
|
.name-line {
|
||||||
display: flex;
|
> a {
|
||||||
gap: 0.5em;
|
display: flex;
|
||||||
color: var(--primary-high);
|
gap: 0.5em;
|
||||||
|
color: var(--primary-high);
|
||||||
|
}
|
||||||
.name,
|
.name,
|
||||||
.username {
|
.username {
|
||||||
@include ellipsis;
|
@include ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:first-child {
|
span:first-child {
|
||||||
flex: 0 0 auto;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -40,7 +38,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-top: 0.25em;
|
|
||||||
color: var(--primary-medium);
|
color: var(--primary-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user