mobilizon.chapril.org-mobil.../js/src/components/Discussion/DiscussionComment.vue

113 lines
2.3 KiB
Vue

<template>
<article class="comment">
<div class="avatar">
<figure class="image is-48x48" v-if="comment.actor.avatar">
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="body">
<div class="meta">
<div class="name">
<span>@{{ comment.actor.preferredUsername }}</span>
</div>
<div class="post-infos">
<span :title="comment.insertedAt | formatDateTimeString">
{{ $timeAgo.format(comment.insertedAt, "twitter") || $t("Right now") }}</span
>
</div>
</div>
<div class="description-content" v-html="comment.text"></div>
</div>
</article>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IComment, CommentModel } from "../../types/comment.model";
@Component
export default class DiscussionComment extends Vue {
@Prop({ required: true, type: Object }) comment!: IComment;
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
article.comment {
display: flex;
border-top: 1px solid #e9e9e9;
div.body {
flex: 2;
margin-bottom: 2rem;
padding-top: 1rem;
.meta {
display: flex;
align-items: center;
padding: 0 1rem 0.3em;
.name {
margin-right: auto;
flex: 1 1 auto;
overflow: hidden;
span {
color: #3c376e;
}
}
}
div.description-content {
padding: 0 1rem 0.3rem;
/deep/ h1 {
font-size: 2rem;
}
/deep/ h2 {
font-size: 1.5rem;
}
/deep/ h3 {
font-size: 1.25rem;
}
/deep/ ul {
list-style-type: disc;
}
/deep/ li {
margin: 10px auto 10px 2rem;
}
/deep/ blockquote {
border-left: 0.2em solid #333;
display: block;
padding-left: 1em;
}
/deep/ p {
margin: 10px auto;
a {
display: inline-block;
padding: 0.3rem;
background: $secondary;
color: #111;
&:empty {
display: none;
}
}
}
}
}
div.avatar {
padding-top: 1rem;
flex: 0;
}
}
</style>