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>
|
||||||
<div p4 mt--17 flex flex-col gap-6>
|
<div p4 mt--17 flex flex-col gap-6>
|
||||||
<div flex justify-between>
|
<div flex justify-between>
|
||||||
<div flex flex-col gap-2>
|
<div flex="~ col gap-2 1" min-w-0>
|
||||||
<div>
|
<div>
|
||||||
<NuxtLink :to="getAccountPath(account)">
|
<NuxtLink :to="getAccountPath(account)">
|
||||||
<AccountAvatar :account="account" w-30 h-30 />
|
<AccountAvatar :account="account" w-30 h-30 />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
<div flex flex-col>
|
<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>
|
<p op50>
|
||||||
{{ getAccountHandle(account) }}
|
{{ getAccountHandle(account) }}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -8,7 +8,7 @@ const { link = true } = defineProps<{
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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 />
|
<AccountAvatar :account="account" w-5 h-5 />
|
||||||
<ContentRichSetup :content="getDisplayName(account)" :emojis="account.emojis" />
|
<ContentRichSetup :content="getDisplayName(account)" :emojis="account.emojis" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -10,8 +10,11 @@ const accountHandle = $(useAccountHandle(account))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<NuxtLink :to="link ? getAccountPath(account) : undefined" flex flex-col md:flex-row md:gap-2 md:items-center>
|
<NuxtLink
|
||||||
<ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
|
: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>
|
<p op35 text-sm>
|
||||||
{{ accountHandle }}
|
{{ accountHandle }}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -73,7 +73,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
|
||||||
<template>
|
<template>
|
||||||
<div ref="el" flex flex-col gap-2 px-4 transition-100 cursor-pointer :class="{ 'hover:bg-active': hover }" @click="onclick">
|
<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 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 />
|
<div i-ri:repeat-fill mr-1 />
|
||||||
<AccountInlineInfo font-bold :account="rebloggedBy" />
|
<AccountInlineInfo font-bold :account="rebloggedBy" />
|
||||||
reblogged
|
reblogged
|
||||||
|
@ -86,7 +86,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
|
||||||
<AccountAvatar mt1 w-12 h-12 :account="status.account" />
|
<AccountAvatar mt1 w-12 h-12 :account="status.account" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div flex="~ col 1" w-0>
|
<div flex="~ col 1" min-w-0>
|
||||||
<div flex>
|
<div flex>
|
||||||
<StatusAccountDetails :account="status.account" />
|
<StatusAccountDetails :account="status.account" />
|
||||||
<div flex-auto />
|
<div flex-auto />
|
||||||
|
|
|
@ -11,7 +11,7 @@ const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
|
||||||
<template>
|
<template>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
v-if="status.inReplyToId"
|
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)"
|
:to="getStatusPath({ id: status.inReplyToId } as any)"
|
||||||
:title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
|
:title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue