ui: adjust spacing

This commit is contained in:
Anthony Fu 2022-11-23 15:46:34 +08:00
parent ed5b8091d3
commit 47914d59b6
7 changed files with 16 additions and 14 deletions

View file

@ -16,12 +16,12 @@ const createdAt = $computed(() => {
<div border="b base">
<img h-50 w-full object-cover :src="account.header">
</div>
<div p3 style="margin-top:-3.5rem;" flex flex-col gap-6>
<div p4 mt--17 flex flex-col gap-6>
<div flex justify-between>
<div flex flex-col gap-2>
<div p1>
<div>
<NuxtLink :to="`/@${account.acct}`">
<AccountAvatar :account="account" w-20 h-20 />
<AccountAvatar :account="account" w-30 h-30 />
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="`/@${account.acct}`">

View file

@ -11,10 +11,10 @@ const id = computed(() => fullServer && !account.acct.includes('@') ? `@${accoun
</script>
<template>
<div flex gap-2>
<div p1>
<div flex gap-3>
<div>
<NuxtLink :to="link ? `/@${account.acct}` : null">
<AccountAvatar :account="account" w-10 h-10 />
<AccountAvatar :account="account" w-12 h-12 />
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null">

View file

@ -7,7 +7,7 @@ defineProps<{
</script>
<template>
<NuxtLink :href="`/@${account.acct}`" flex gap-2 items-center>
<NuxtLink :href="`/@${account.acct}`" flex gap-1 items-center>
<AccountAvatar :account="account" w-5 h-5 />
<CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink>

View file

@ -72,10 +72,10 @@ const toggleBookmark = () => toggleStatusAction(
<div :class="(status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line') + (isLoading.bookmarked ? ' pointer-events-none' : '')" />
</div>
</button>
<button flex gap-1 items-center w-full rounded op50 hover="op100 text-purple" group>
<!-- <button flex gap-1 items-center w-full rounded op50 hover="op100 text-purple" group>
<div rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line />
</div>
</button>
</button> -->
</div>
</template>

View file

@ -72,15 +72,15 @@ const timeago = useTimeAgo(() => status.createdAt, {
</div>
</div>
<AccountInfo :account="status.account">
<template>
<template #default>
<div flex-auto />
<div text-sm op50>
<div text-sm op50 :title="status.createdAt">
{{ timeago }}
</div>
</template>
</AccountInfo>
<StatusReplyingTo :status="status" />
<div pl14>
<StatusReplyingTo :status="status" ml5 mt--1 />
<div pl15>
<StatusBody :status="status" />
<StatusMedia
v-if="status.mediaAttachments?.length"
@ -92,6 +92,6 @@ const timeago = useTimeAgo(() => status.createdAt, {
:actions="false"
/>
</div>
<StatusActions v-if="actions !== false" pl12 :status="status" />
<StatusActions v-if="actions !== false" pl13 :status="status" />
</div>
</template>

View file

@ -5,6 +5,7 @@
--c-bg-base: #fff;
--c-bg-active: #efefef;
--c-text-base: #222;
--c-text-secondary: #888;
}
.dark {

View file

@ -16,6 +16,7 @@ export default defineConfig({
'bg-base': 'bg-$c-bg-base',
'bg-active': 'bg-$c-bg-active',
'text-base': 'text-$c-text-base',
'text-secondary': 'text-$c-text-secondary',
'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active interact-disabled',
'btn-outline': 'px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white interact-disabled',