116 lines
2 KiB
Vue
116 lines
2 KiB
Vue
|
<template>
|
||
|
|
<div class="mk-welcome-timeline">
|
||
|
|
<div v-for="post in posts">
|
||
|
|
<router-link class="avatar-anchor" :to="`/${post.user.username}`">
|
||
|
|
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=96`" alt="avatar"/>
|
||
|
|
</router-link>
|
||
|
|
<div class="body">
|
||
|
|
<header>
|
||
|
|
<router-link class="name" :to="`/${post.user.username}`">{{ post.user.name }}</router-link>
|
||
|
|
<span class="username">@{{ post.user.username }}</span>
|
||
|
|
<div class="info">
|
||
|
|
<router-link class="created-at" :to="`/${post.user.username}/${post.id}`">
|
||
|
|
<mk-time :time="post.created_at"/>
|
||
|
|
</router-link>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="text">
|
||
|
|
<mk-post-html :ast="post.ast"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import Vue from 'vue';
|
||
|
|
|
||
|
|
export default Vue.extend({
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
fetching: true,
|
||
|
|
posts: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.fetch();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fetch(cb?) {
|
||
|
|
this.fetching = true;
|
||
|
|
(this as any).api('posts', {
|
||
|
|
reply: false,
|
||
|
|
repost: false,
|
||
|
|
media: false,
|
||
|
|
poll: false,
|
||
|
|
bot: false
|
||
|
|
}).then(posts => {
|
||
|
|
this.posts = posts;
|
||
|
|
this.fetching = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
.mk-welcome-timeline
|
||
|
|
background #fff
|
||
|
|
|
||
|
|
> div
|
||
|
|
padding 16px
|
||
|
|
overflow-wrap break-word
|
||
|
|
font-size .9em
|
||
|
|
color #4C4C4C
|
||
|
|
border-bottom 1px solid rgba(0, 0, 0, 0.05)
|
||
|
|
|
||
|
|
&:after
|
||
|
|
content ""
|
||
|
|
display block
|
||
|
|
clear both
|
||
|
|
|
||
|
|
> .avatar-anchor
|
||
|
|
display block
|
||
|
|
float left
|
||
|
|
position -webkit-sticky
|
||
|
|
position sticky
|
||
|
|
top 16px
|
||
|
|
|
||
|
|
> img
|
||
|
|
display block
|
||
|
|
width 36px
|
||
|
|
height 36px
|
||
|
|
border-radius 6px
|
||
|
|
|
||
|
|
> .body
|
||
|
|
float right
|
||
|
|
width calc(100% - 36px)
|
||
|
|
padding-left 8px
|
||
|
|
|
||
|
|
> header
|
||
|
|
display flex
|
||
|
|
align-items center
|
||
|
|
margin-bottom 4px
|
||
|
|
white-space nowrap
|
||
|
|
|
||
|
|
> .name
|
||
|
|
display block
|
||
|
|
margin 0 .5em 0 0
|
||
|
|
padding 0
|
||
|
|
overflow hidden
|
||
|
|
font-weight bold
|
||
|
|
text-overflow ellipsis
|
||
|
|
|
||
|
|
> .username
|
||
|
|
margin 0 .5em 0 0
|
||
|
|
color #ccc
|
||
|
|
|
||
|
|
> .info
|
||
|
|
margin-left auto
|
||
|
|
font-size 0.9em
|
||
|
|
|
||
|
|
> .created-at
|
||
|
|
color #c0c0c0
|
||
|
|
|
||
|
|
</style>
|