feat: rework vertical spacing (#533)

This commit is contained in:
patak 2022-12-23 22:53:21 +01:00 committed by GitHub
parent 823820e7c7
commit 99abb78ef1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 21 deletions

View file

@ -16,7 +16,7 @@ const { translation } = useTranslation(status)
:emojis="status.emojis" :emojis="status.emojis"
:lang="status.language" :lang="status.language"
/> />
<div v-else h-3 /> <div v-else />
<template v-if="translation.visible"> <template v-if="translation.visible">
<div my2 h-px border="b base" bg-base /> <div my2 h-px border="b base" bg-base />
<ContentRich :content="translation.text" :emojis="status.emojis" /> <ContentRich :content="translation.text" :emojis="status.emojis" />

View file

@ -58,19 +58,21 @@ const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.cont
const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvatarOnAvatar)) const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvatarOnAvatar))
const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id) const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)
const isDM = $computed(() => status.visibility === 'direct')
</script> </script>
<template> <template>
<div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" relative flex flex-col gap-2 px-4 pt-3 pb-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick"> <div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" relative flex flex-col gap-1 px-4 pt-1 class="pb-1.5" transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
<div flex justify-between pb1> <div flex justify-between>
<slot name="meta"> <slot name="meta">
<div v-if="rebloggedBy" text-secondary text-sm ws-nowrap flex="~" gap-1 items-center> <div v-if="rebloggedBy" text-secondary text-sm ws-nowrap flex="~" gap-1 items-center py1>
<div i-ri:repeat-fill mr-1 text-primary /> <div i-ri:repeat-fill mr-1 text-primary />
<AccountInlineInfo font-bold :account="rebloggedBy" :avatar="!avatarOnAvatar" /> <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="!avatarOnAvatar" />
</div> </div>
<div v-else /> <div v-else />
</slot> </slot>
<StatusReplyingTo v-if="showReplyTo" :status="status" :class="faded ? 'text-secondary-light' : ''" /> <StatusReplyingTo v-if="showReplyTo" :status="status" :class="faded ? 'text-secondary-light' : ''" py1 />
</div> </div>
<div flex gap-4 :class="faded ? 'text-secondary' : ''"> <div flex gap-4 :class="faded ? 'text-secondary' : ''">
<div relative> <div relative>
@ -103,9 +105,9 @@ const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAva
<StatusActionsMore :status="status" mr--2 /> <StatusActionsMore :status="status" mr--2 />
</div> </div>
<div <div
space-y-2 space-y-3
:class="{ :class="{
'my3 p1 px4 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none': status.visibility === 'direct', 'mt2 pt1 pb0.5 px3.5 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none': isDM,
}" }"
> >
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered"> <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
@ -120,22 +122,21 @@ const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAva
<StatusMedia <StatusMedia
v-if="status.mediaAttachments?.length" v-if="status.mediaAttachments?.length"
:status="status" :status="status"
:class="status.visibility === 'direct' ? 'pb4' : ''"
/> />
<StatusPreviewCard <StatusPreviewCard
v-if="status.card" v-if="status.card"
:card="status.card" :card="status.card"
:class="status.visibility === 'direct' ? 'pb4' : ''"
:small-picture-only="status.mediaAttachments?.length > 0" :small-picture-only="status.mediaAttachments?.length > 0"
/> />
</StatusSpoiler>
<StatusCard <StatusCard
v-if="status.reblog" v-if="status.reblog"
:status="status.reblog" border="~ rounded" :status="status.reblog" border="~ rounded"
:actions="false" :actions="false"
/> />
<div v-if="isDM" />
</StatusSpoiler>
</div> </div>
<StatusActions v-if="(actions !== false && !isZenMode)" pt2 :status="status" /> <StatusActions v-if="(actions !== false && !isZenMode)" :status="status" :class="isDM ? 'mt1' : 'mt2'" />
</div> </div>
</div> </div>
</div> </div>

View file

@ -21,10 +21,12 @@ const { t } = useI18n()
useHeadFixed({ useHeadFixed({
title: () => `${status.account.displayName || status.account.acct} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`, title: () => `${status.account.displayName || status.account.acct} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`,
}) })
const isDM = $computed(() => status.visibility === 'direct')
</script> </script>
<template> <template>
<div :id="`status-${status.id}`" flex flex-col gap-2 py3 px-4 relative> <div :id="`status-${status.id}`" flex flex-col gap-2 pt2 pb1 px-4 relative>
<StatusActionsMore :status="status" absolute right-2 top-2 /> <StatusActionsMore :status="status" absolute right-2 top-2 />
<NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a> <NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountHoverWrapper :account="status.account"> <AccountHoverWrapper :account="status.account">
@ -32,7 +34,10 @@ useHeadFixed({
</AccountHoverWrapper> </AccountHoverWrapper>
</NuxtLink> </NuxtLink>
<div <div
:class="status.visibility === 'direct' ? 'my2 p1 px4 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none' : ''" space-y-3
:class="{
'pt2 pb0.5 px3.5 br2 bg-fade border-primary-light border-1 rounded-3': isDM,
}"
> >
<StatusSpoiler :enabled="status.sensitive"> <StatusSpoiler :enabled="status.sensitive">
<template #spoiler> <template #spoiler>
@ -40,7 +45,7 @@ useHeadFixed({
{{ status.spoilerText }} {{ status.spoilerText }}
</p> </p>
</template> </template>
<StatusBody :status="status" :with-action="false" text-2xl /> <StatusBody :status="status" :with-action="false" text-xl />
<StatusPoll <StatusPoll
v-if="status.poll" v-if="status.poll"
:poll="status.poll" :poll="status.poll"
@ -48,16 +53,15 @@ useHeadFixed({
<StatusMedia <StatusMedia
v-if="status.mediaAttachments?.length" v-if="status.mediaAttachments?.length"
:status="status" :status="status"
:class="status.visibility === 'direct' ? 'pb4' : ''"
full-size full-size
/> />
<StatusPreviewCard <StatusPreviewCard
v-if="status.card" v-if="status.card"
:card="status.card" :card="status.card"
:class="status.visibility === 'direct' ? 'pb4' : ''"
:small-picture-only="status.mediaAttachments?.length > 0" :small-picture-only="status.mediaAttachments?.length > 0"
mt-2 mt-2
/> />
<div v-if="isDM" />
</StatusSpoiler> </StatusSpoiler>
</div> </div>
<div flex="~ gap-1" items-center text-secondary text-sm> <div flex="~ gap-1" items-center text-secondary text-sm>

View file

@ -98,7 +98,7 @@ body {
--at-apply: font-bold; --at-apply: font-bold;
} }
p { p {
--at-apply: my-2; --at-apply: my-1;
} }
code { code {
--at-apply: bg-code text-code px1 py0.5 rounded text-0.9em leading-0.8em; --at-apply: bg-code text-code px1 py0.5 rounded text-0.9em leading-0.8em;