zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: image previews (#104)

Browse source 
Co-authored-by: lihbr <lihbr@users.noreply.github.com>
This commit is contained in:
Lucie 2022-11-25 13:13:44 -05:00 • committed by GitHub
parent a812ea098f
commit 9df9c06f64
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/account/AccountHeader.vue
View file

@ -43,19 +43,27 @@ function getFieldNameIcon(fieldName: string) {
if (fieldNameIcons[name])
return fieldNameIcons[name]
}
function previewHeader() {
openImagePreviewDialog({ src: account.header, alt: `${account.username}'s profile header` })
}
function previewAvatar() {
openImagePreviewDialog({ src: account.avatar, alt: account.username })
}
</script>
<template>
<div flex flex-col>
<div border="b base">
<img h-50 w-full object-cover :src="account.header">
</div>
<button border="b base" z-1>
<img h-50 w-full object-cover :src="account.header" @click="previewHeader">
</button>
<div p4 mt--17 flex flex-col gap-6>
<div flex justify-between>
<div flex="~ col gap-2 1" min-w-0>
<NuxtLink w-fit :to="getAccountPath(account)">
<AccountAvatar :account="account" w-30 h-30 />
</NuxtLink>
<div flex="~ col gap-2 1">
<button w-30 h-30 rounded-full bg-black z-2 @click="previewAvatar">
<AccountAvatar :account="account" hover:opacity-90 transition-opacity />
</button>
<div flex flex-col>
<ContentRich font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" />
<p op50>