mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
refactor: improve break words UI
This commit is contained in:
parent
3c550b832b
commit
9f44e607ad
5 changed files with 11 additions and 8 deletions
|
@ -52,14 +52,14 @@ function getFieldNameIcon(fieldName: string) {
|
|||
</div>
|
||||
<div p4 mt--17 flex flex-col gap-6>
|
||||
<div flex justify-between>
|
||||
<div flex flex-col gap-2>
|
||||
<div flex="~ col gap-2 1" min-w-0>
|
||||
<div>
|
||||
<NuxtLink :to="getAccountPath(account)">
|
||||
<AccountAvatar :account="account" w-30 h-30 />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div flex flex-col>
|
||||
<ContentRichSetup font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
|
||||
<ContentRichSetup font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" />
|
||||
<p op50>
|
||||
{{ getAccountHandle(account) }}
|
||||
</p>
|
||||
|
|
|
@ -8,7 +8,7 @@ const { link = true } = defineProps<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-1 items-center>
|
||||
<NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
|
||||
<AccountAvatar :account="account" w-5 h-5 />
|
||||
<ContentRichSetup :content="getDisplayName(account)" :emojis="account.emojis" />
|
||||
</NuxtLink>
|
||||
|
|
|
@ -10,8 +10,11 @@ const accountHandle = $(useAccountHandle(account))
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="link ? getAccountPath(account) : undefined" flex flex-col md:flex-row md:gap-2 md:items-center>
|
||||
<ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
|
||||
<NuxtLink
|
||||
:to="link ? getAccountPath(account) : undefined"
|
||||
flex="col 1" min-w-0 md:flex="~ gap-2" md:items-center
|
||||
>
|
||||
<ContentRichSetup font-bold break-words :content="getDisplayName(account)" :emojis="account.emojis" />
|
||||
<p op35 text-sm>
|
||||
{{ accountHandle }}
|
||||
</p>
|
||||
|
|
|
@ -73,7 +73,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
|
|||
<template>
|
||||
<div ref="el" flex flex-col gap-2 px-4 transition-100 cursor-pointer :class="{ 'hover:bg-active': hover }" @click="onclick">
|
||||
<div v-if="rebloggedBy" pl8>
|
||||
<div flex gap-1 items-center text-gray:75 text-sm>
|
||||
<div flex="~ wrap" gap-1 items-center text-gray:75 text-sm>
|
||||
<div i-ri:repeat-fill mr-1 />
|
||||
<AccountInlineInfo font-bold :account="rebloggedBy" />
|
||||
reblogged
|
||||
|
@ -86,7 +86,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
|
|||
<AccountAvatar mt1 w-12 h-12 :account="status.account" />
|
||||
</div>
|
||||
</div>
|
||||
<div flex="~ col 1" w-0>
|
||||
<div flex="~ col 1" min-w-0>
|
||||
<div flex>
|
||||
<StatusAccountDetails :account="status.account" />
|
||||
<div flex-auto />
|
||||
|
|
|
@ -11,7 +11,7 @@ const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
|
|||
<template>
|
||||
<NuxtLink
|
||||
v-if="status.inReplyToId"
|
||||
flex="~" items-center text-sm text-gray:85
|
||||
flex="~ wrap" items-center text-sm text-gray:85
|
||||
:to="getStatusPath({ id: status.inReplyToId } as any)"
|
||||
:title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
|
||||
>
|
||||
|
|
Loading…
Reference in a new issue