mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-18 12:31:27 +00:00
93 lines
2.5 KiB
Vue
93 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">@{{ 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>
|