forked from kaverti/website
186 lines
4.1 KiB
Vue
186 lines
4.1 KiB
Vue
<template>
|
|
<article class='thread_display box'>
|
|
<avatar-icon
|
|
ref='avatar'
|
|
:user='thread.User'
|
|
size='small'
|
|
class='thread_display__icon'
|
|
|
|
@click='goToUser'
|
|
></avatar-icon>
|
|
<div style='width: calc(100% - 3rem);' @click='goToThread'>
|
|
<div class='thread_display__header'>
|
|
<span class='thread_display__name'>
|
|
{{thread.title}}
|
|
</span>
|
|
<div class='thread_display__meta_bar'>
|
|
<div>
|
|
By
|
|
<span class='thread_display__username' ref='username'>{{threadUsername | truncateMid(25)}}</span>
|
|
in
|
|
<span class='thread_display__category' ref='category'>{{thread.Category.name}}</span>
|
|
·
|
|
<span class='thread_display__date'>{{thread.createdAt | formatDate}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='thread_display__replies_bar'>
|
|
<div
|
|
class='thread_display__latest_reply'
|
|
v-if='thread.Posts.length === 2'
|
|
>
|
|
<font-awesome-icon :icon='["fa", "reply"]' fixed-width />
|
|
<span class='thread_display__latest_reply__text'>Latest reply by </span>
|
|
·
|
|
<span class='thread_display__date'>{{thread.Posts[1].createdAt | formatDate}}</span>
|
|
</div>
|
|
<span title='Replies to thread' v-if="thread.Posts[0]">
|
|
<font-awesome-icon :icon='["far", "comment"]' fixed-width />
|
|
{{thread.replies}}
|
|
</span>
|
|
<span title='Replies to thread' v-else>
|
|
<font-awesome-icon :icon='["far", "comment"]' fixed-width />
|
|
0
|
|
</span>
|
|
</div>
|
|
<div class='thread_display__content'>
|
|
{{threadContent | stripTags | truncate(150)}}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import AvatarIcon from './AvatarIcon'
|
|
|
|
export default {
|
|
name: 'ThreadDisplay',
|
|
props: ['thread'],
|
|
components: {
|
|
AvatarIcon
|
|
},
|
|
computed: {
|
|
threadUsername () {
|
|
if(this.thread.User) {
|
|
return this.thread.User.username
|
|
} else {
|
|
return '[deleted]'
|
|
}
|
|
},
|
|
threadContent() {
|
|
if(this.thread.content) {
|
|
return this.thread.content
|
|
} else {
|
|
return {id: "0", content: 'Uninitialized Thread', createdAt: "2020-10-10T15:40:51.000Z", updatedAt: "2020-10-10T15:40:51.000Z"}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
goToUser () {
|
|
this.$router.push('/u/' + this.thread.User.username)
|
|
},
|
|
goToThread () {
|
|
this.$router.push('/thread/' + this.thread.id)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
@import '../assets/scss/variables.scss';
|
|
|
|
.thread_display {
|
|
border: thin solid $color__gray--darker;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
padding: 0.75rem;
|
|
position: relative;
|
|
transition: background-color 0.2s, box-shadow 0.2s;
|
|
|
|
&:hover {
|
|
@extend .shadow_border--hover;
|
|
}
|
|
|
|
@at-root #{&}__icon {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
@at-root #{&}__username,
|
|
#{&}__category,
|
|
#{&}__date {
|
|
color: $color--text__primary;
|
|
}
|
|
|
|
@at-root #{&}__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
@at-root #{&}__name {
|
|
font-weight: 500;
|
|
font-size: 1.25rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
@at-root #{&}__meta_bar {
|
|
color: $color--gray__darkest;
|
|
flex-shrink: 0;
|
|
line-height: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
@at-root #{&}__replies_bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
@at-root #{&}__latest_reply {
|
|
color: $color--text__secondary;
|
|
|
|
.fa {
|
|
color: $color--text__primary;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
@at-root #{&}__replies {
|
|
width: 4rem;
|
|
text-align: right;
|
|
}
|
|
|
|
@at-root #{&}__content {
|
|
margin-top: 0.5rem;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.thread_display {
|
|
@at-root #{&}__header {
|
|
flex-direction: column;
|
|
}
|
|
@at-root #{&}__meta_bar {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
@at-root #{&}__replies_bar {
|
|
position: relative;
|
|
left: -3.25rem;
|
|
width: calc(100% + 3.25rem);
|
|
}
|
|
|
|
@at-root #{&}__latest_reply {
|
|
.fa {
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
@at-root #{&}__text {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|