pixelfed/resources/assets/components/landing/partials/PostCard.vue

94 lines
2.5 KiB
Vue

<template>
<div class="timeline-status-component">
<div class="card bg-bluegray-800 landing-post-card" style="border-radius: 15px;">
<div class="card-header border-0 bg-bluegray-700" style="border-top-left-radius: 15px;border-top-right-radius: 15px;">
<div class="media align-items-center">
<a :href="post.account.url" class="mr-2" target="_blank">
<img :src="post.account.avatar" style="border-radius:30px;" width="30" height="30" onerror="this.src='/storage/avatars/default.jpg?v=0';this.onerror=null;">
</a>
<div class="media-body d-flex justify-content-between align-items-center">
<p class="font-weight-bold username mb-0">
<a :href="post.account.url" class="text-white" target="_blank">&commat;{{ post.account.username }}</a>
</p>
<p class="font-weight-bold mb-0">
<a v-if="range === 'daily'" :href="post.url" class="text-bluegray-500" target="_blank">Posted {{ timeago(post.created_at) }} ago</a>
<a v-else :href="post.url" class="text-bluegray-400" target="_blank">View Post</a>
</p>
</div>
</div>
</div>
<div class="card-body m-0 p-0">
<post-content :status="post" />
</div>
</div>
</div>
</template>
<script type="text/javascript">
import PostContent from './../../partials/post/PostContent';
export default {
props: [
'post',
'range'
],
components: {
'post-content': PostContent,
},
methods: {
timestampToAgo(ts) {
let date = Date.parse(ts);
let seconds = Math.floor((new Date() - date) / 1000);
let interval = Math.floor(seconds / 63072000);
if (interval < 0) {
return "0s";
}
if (interval >= 1) {
return interval + "y";
}
interval = Math.floor(seconds / 604800);
if (interval >= 1) {
return interval + "w";
}
interval = Math.floor(seconds / 86400);
if (interval >= 1) {
return interval + "d";
}
interval = Math.floor(seconds / 3600);
if (interval >= 1) {
return interval + "h";
}
interval = Math.floor(seconds / 60);
if (interval >= 1) {
return interval + "m";
}
return Math.floor(seconds) + "s";
},
timeago(ts) {
let short = this.timestampToAgo(ts);
return short;
if(
short.endsWith('s') ||
short.endsWith('m') ||
short.endsWith('h')
) {
return short;
}
const intl = new Intl.DateTimeFormat(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric'
});
return intl.format(new Date(ts));
},
}
}
</script>