You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

63 lines
1.8 KiB

<report-card :report="{ reported: { name: 'Some bad guy', preferredUsername: 'kevin' }, reporter: { preferredUsername: 'somePerson34' }, reportContent: 'This is not good'}" />
<div class="card" v-if="report">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="report.reported.avatar">
<img alt="" :src="report.reported.avatar.url" />
<b-icon v-else size="is-large" icon="account-circle" />
<div class="media-content">
<p class="title is-4">{{ }}</p>
<p class="subtitle is-6">@{{ report.reported.preferredUsername }}</p>
<div class="content columns">
<div class="column is-one-quarter-desktop">
<span v-if="report.reporter.type === ActorType.APPLICATION">
$t("Reported by someone on {domain}", {
domain: report.reporter.domain,
<span v-else>
$t("Reported by {reporter}", {
reporter: report.reporter.preferredUsername,
<div class="column" v-if="report.content" v-html="report.content" />
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IReport } from "@/types/report.model";
import { ActorType } from "@/types/enums";
export default class ReportCard extends Vue {
@Prop({ required: true }) report!: IReport;
ActorType = ActorType;
<style lang="scss">
.content img.image {
display: inline;
height: 1.5em;
vertical-align: text-bottom;