mirror/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk synced 2024-11-23 22:56:09 +09:00
Code

ui: adjust spacing

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/account/AccountHeader.vue
View File

@ -16,12 +16,12 @@ const createdAt = $computed(() => {
<div border="b base"> <div border="b base">
<img h-50 w-full object-cover :src="account.header"> <img h-50 w-full object-cover :src="account.header">
</div> </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 justify-between>
<div flex flex-col gap-2> <div flex flex-col gap-2>
<div p1> <div>
<NuxtLink :to="`/@${account.acct}`"> <NuxtLink :to="`/@${account.acct}`">
<AccountAvatar :account="account" w-20 h-20 /> <AccountAvatar :account="account" w-30 h-30 />
</NuxtLink> </NuxtLink>
</div> </div>
<NuxtLink flex flex-col :to="`/@${account.acct}`"> <NuxtLink flex flex-col :to="`/@${account.acct}`">

6
components/account/AccountInfo.vue
View File

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

2
components/account/AccountInlineInfo.vue
View File

@ -7,7 +7,7 @@ defineProps<{
</script> </script>
<template> <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 /> <AccountAvatar :account="account" w-5 h-5 />
<CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" /> <CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink> </NuxtLink>

4
components/status/StatusActions.vue
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 :class="(status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line') + (isLoading.bookmarked ? ' pointer-events-none' : '')" />
</div> </div>
</button> </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 rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line /> <div i-ri:share-circle-line />
</div> </div>
</button> </button> -->
</div> </div>
</template> </template>

10
components/status/StatusCard.vue
View File

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

1
styles/vars.css
View File

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

1
unocss.config.ts
View File

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