CloudToys/elk
1
0
Fork 0
Code

refactor: improve break words UI

Browse Source
This commit is contained in:
三咲智子 2022-11-25 18:20:01 +08:00
parent 3c550b832b
commit 9f44e607ad
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
5 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/account/AccountHeader.vue
View File

@ -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>

2
components/account/AccountInlineInfo.vue
View File

@ -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>

7
components/status/StatusAccountDetails.vue
View File

@ -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>

4
components/status/StatusCard.vue
View File

@ -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 />

2
components/status/StatusReplyingTo.vue
View File

@ -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'"
>