teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix(ui): truncate account info (#261)

Browse source
This commit is contained in:
Daniel Roe 2022-11-30 21:38:18 +00:00 committed by GitHub
parent 81c5a1c4f0
commit 93d78d9c8b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/account/AccountCard.vue
View file

@ -14,9 +14,11 @@ cacheAccount(account)
<AccountInfo
:account="account" hover p1 as="router-link"
:hover-card="hoverCard"
shrink
overflow-hidden
:to="getAccountRoute(account)"
/>
<div h-full p1>
<div h-full p1 shrink-0>
<AccountFollowButton :account="account" />
</div>
</div>

8
components/account/AccountInfo.vue
View file

@ -16,12 +16,12 @@ defineOptions({
<!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
<template>
<component :is="as" flex gap-3 v-bind="$attrs">
<AccountHoverWrapper :disabled="!hoverCard" :account="account">
<AccountHoverWrapper :disabled="!hoverCard" :account="account" shrink-0>
<AccountAvatar :account="account" w-12 h-12 />
</AccountHoverWrapper>
<div flex="~ col">
<ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" text-sm />
<div flex="~ col" shrink overflow-hidden>
<ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" overflow-hidden truncate text-ellipsis />
<AccountHandle :account="account" text-sm overflow-hidden truncate text-ellipsis />
</div>
</component>
</template>