teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: rework vertical spacing (#533)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/status/StatusBody.vue
View file

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

29
components/status/StatusCard.vue
View file

@ -58,19 +58,21 @@ const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.cont
const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvatarOnAvatar))
const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)
const isDM = $computed(() => status.visibility === 'direct')
</script>
<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 flex justify-between pb1>
<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>
<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 />
<AccountInlineInfo font-bold :account="rebloggedBy" :avatar="!avatarOnAvatar" />
</div>
<div v-else />
</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 flex gap-4 :class="faded ? 'text-secondary' : ''">
<div relative>
@ -103,9 +105,9 @@ const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAva
<StatusActionsMore :status="status" mr--2 />
</div>
<div
space-y-2
space-y-3
: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">
@ -120,22 +122,21 @@ const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAva
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
:class="status.visibility === 'direct' ? 'pb4' : ''"
/>
<StatusPreviewCard
v-if="status.card"
:card="status.card"
:class="status.visibility === 'direct' ? 'pb4' : ''"
:small-picture-only="status.mediaAttachments?.length > 0"
/>
<StatusCard
v-if="status.reblog"
:status="status.reblog" border="~ rounded"
:actions="false"
/>
<div v-if="isDM" />
</StatusSpoiler>
<StatusCard
v-if="status.reblog"
:status="status.reblog" border="~ rounded"
:actions="false"
/>
</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>

14
components/status/StatusDetails.vue
View file

@ -21,10 +21,12 @@ const { t } = useI18n()
useHeadFixed({
title: () => `${status.account.displayName || status.account.acct} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`,
})
const isDM = $computed(() => status.visibility === 'direct')
</script>
<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 />
<NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountHoverWrapper :account="status.account">
@ -32,7 +34,10 @@ useHeadFixed({
</AccountHoverWrapper>
</NuxtLink>
<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">
<template #spoiler>
@ -40,7 +45,7 @@ useHeadFixed({
{{ status.spoilerText }}
</p>
</template>
<StatusBody :status="status" :with-action="false" text-2xl />
<StatusBody :status="status" :with-action="false" text-xl />
<StatusPoll
v-if="status.poll"
:poll="status.poll"
@ -48,16 +53,15 @@ useHeadFixed({
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
:class="status.visibility === 'direct' ? 'pb4' : ''"
full-size
/>
<StatusPreviewCard
v-if="status.card"
:card="status.card"
:class="status.visibility === 'direct' ? 'pb4' : ''"
:small-picture-only="status.mediaAttachments?.length > 0"
mt-2
/>
<div v-if="isDM" />
</StatusSpoiler>
</div>
<div flex="~ gap-1" items-center text-secondary text-sm>

2
styles/global.css
View file

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