versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 💄 Small UI tweaks

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-11 17:53:42 -10:00
parent 6f0da44844
commit ddebe77e5b
No known key found for this signature in database
3 changed files with 36 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/avatars/Centered.vue
View file

@ -1,7 +1,8 @@
<template>
<div v-bind="$props" class="bg-dark-700 overflow-hidden flex items-center justify-center">
<Skeleton :enabled="!url" class="!h-full !w-full">
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt" />
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt"
:title="alt" />
</Skeleton>
</div>
</template>

37
components/social-elements/notes/header.vue
View file

@ -33,17 +33,28 @@
note?.account.display_name }}
</Skeleton>
</NuxtLink>
<NuxtLink :href="noteUrl" class="text-gray-400 text-sm ml-2 line-clamp-1 break-all shrink-0">
<NuxtLink :href="noteUrl" class="text-gray-400 text-sm ml-2 line-clamp-1 break-all shrink-0"
:alt="fullTime" :title="fullTime">
<Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
{{ timeAgo }}
</Skeleton>
</NuxtLink>
</div>
<span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
<span class="text-gray-400 text-sm line-clamp-1 break-all w-full group">
<Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
@{{
note?.account.acct
}}
<span class="group-hover:hidden">
@{{
note?.account.acct
}}</span>
<span @click="copyAccount" v-if="!hasCopied"
class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
<Icon name="tabler:clipboard" class="h-4 w-4 text-gray-200" aria-hidden="true" />
Click to copy
</span>
<span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
<Icon name="tabler:check" class="h-4 w-4 text-green-500" aria-hidden="true" />
Copied!
</span>
</Skeleton>
</span>
</div>
@ -61,4 +72,20 @@ const props = defineProps<{
const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
const accountUrl = props.note && `/@${props.note.account.acct}`;
const timeAgo = useTimeAgo(props.note?.created_at ?? 0);
const fullTime = Intl.DateTimeFormat("default", {
dateStyle: "medium",
timeStyle: "short",
}).format(new Date(props.note?.created_at ?? 0));
const hasCopied = ref(false);
const { copy } = useClipboard();
const copyAccount = () => {
if (props.note) {
copy(`@${props.note.account.acct}`);
hasCopied.value = true;
setTimeout(() => {
hasCopied.value = false;
}, 2000);
}
};
</script>

4
components/social-elements/notes/note-content.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-if="!collapsed">
<NuxtLink :href="url" class="mt-6 block relative" aria-label="Link to note">
<div class="mt-6 block relative">
<Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
type="content">
<div v-if="content"
@ -8,7 +8,7 @@
v-html="content">
</div>
</Skeleton>
</NuxtLink>
</div>
<div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
<SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
:attachment="attachment" />