FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Truncate long names in post header

Browse source
This commit is contained in:
silverpill 2021-11-30 19:58:22 +00:00
parent 48a3de16c6
commit f4489b368f
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/Post.vue
View file

@ -4,10 +4,16 @@
<router-link class="floating-avatar" :to="{ name: 'profile', params: { profileId: post.account.id }}"> <router-link class="floating-avatar" :to="{ name: 'profile', params: { profileId: post.account.id }}">
<avatar :profile="post.account"></avatar> <avatar :profile="post.account"></avatar>
</router-link> </router-link>
<router-link class="display-name" :to="{ name: 'profile', params: { profileId: post.account.id }}"> <router-link
{{ post.account.display_name || post.account.username }} class="display-name"
:to="{ name: 'profile', params: { profileId: post.account.id }}"
:title="authorName"
>
{{ authorName }}
</router-link> </router-link>
<div class="username">@{{ post.account.acct }}</div> <div class="username" :title="'@' + post.account.acct">
@{{ post.account.acct }}
</div>
<a <a
class="icon icon-small" class="icon icon-small"
:href="post.uri" :href="post.uri"
@ -164,6 +170,10 @@ export default class PostComponent extends Vue {
return { currentUser, ensureAuthToken, instance } return { currentUser, ensureAuthToken, instance }
}) })
get authorName(): string {
return this.post.account.display_name || this.post.account.username
}
highlight(postId: string | null) { highlight(postId: string | null) {
this.$emit("highlight", postId) this.$emit("highlight", postId)
} }
@ -352,20 +362,22 @@ export default class PostComponent extends Vue {
.display-name { .display-name {
color: $text-color; color: $text-color;
font-weight: bold; font-weight: bold;
overflow-x: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
.username { .username {
flex-grow: 1; flex-grow: 1;
min-width: 15%; min-width: 15%;
overflow-x: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.timestamp { .timestamp {
color: $secondary-text-color; color: $secondary-text-color;
text-align: right; text-align: right;
white-space: nowrap;
&:hover { &:hover {
color: $secondary-text-hover-color; color: $secondary-text-hover-color;