zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

refactor: improve break words UI

zio/stable
三咲智子 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>
<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>

2
components/account/AccountInlineInfo.vue
View File

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

7
components/status/StatusAccountDetails.vue
View File

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

4
components/status/StatusCard.vue
View File

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

2
components/status/StatusReplyingTo.vue
View File

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