forked from mirror/pixelfed
57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<div class="card bg-bluegray-800 landing-user-card">
|
|
<div class="card-body">
|
|
<div class="d-flex" style="gap: 15px;">
|
|
<div class="flex-shrink-1">
|
|
<a :href="account.url">
|
|
<img class="rounded-circle" :src="account.avatar" onerror="this.src='/storage/avatars/default.jpg';this.onerror=null;" width="50" height="50">
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div v-if="account.name" class="display-name">
|
|
<a :href="account.url">{{ account.name }}</a>
|
|
</div>
|
|
<p class="username">
|
|
<a :href="account.url">@{{ account.username }}</a>
|
|
</p>
|
|
|
|
<div class="user-stats">
|
|
<div class="user-stats-item">{{ formatCount(account.statuses_count) }} Posts</div>
|
|
<div class="user-stats-item">{{ formatCount(account.followers_count) }} Followers</div>
|
|
<div class="user-stats-item">{{ formatCount(account.following_count) }} Following</div>
|
|
</div>
|
|
|
|
<div v-if="account.bio" class="user-bio">
|
|
<p class="small text-bluegray-400 mb-0">{{ truncate(account.bio) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
export default {
|
|
props: ['account'],
|
|
|
|
methods: {
|
|
formatCount(val) {
|
|
if(!val) {
|
|
return 0;
|
|
}
|
|
|
|
return val.toLocaleString('en-CA', { compactDisplay: "short", notation: "compact"});
|
|
},
|
|
|
|
truncate(val, limit = 120) {
|
|
if(!val || val.length < limit) {
|
|
return val;
|
|
}
|
|
|
|
return val.slice(0, limit) + '...'
|
|
}
|
|
}
|
|
}
|
|
</script>
|