2019-09-09 07:31:08 +00:00
|
|
|
<template>
|
2020-02-18 07:57:00 +00:00
|
|
|
<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" />
|
|
|
|
</figure>
|
2021-11-18 08:49:00 +00:00
|
|
|
<o-icon v-else size="is-large" icon="account-circle" />
|
2020-02-18 07:57:00 +00:00
|
|
|
</div>
|
|
|
|
<div class="media-content">
|
|
|
|
<p class="title is-4">{{ report.reported.name }}</p>
|
|
|
|
<p class="subtitle is-6">@{{ report.reported.preferredUsername }}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-09-09 07:31:08 +00:00
|
|
|
|
2020-02-18 07:57:00 +00:00
|
|
|
<div class="content columns">
|
|
|
|
<div class="column is-one-quarter-desktop">
|
|
|
|
<span v-if="report.reporter.type === ActorType.APPLICATION">
|
2020-11-30 09:24:11 +00:00
|
|
|
{{
|
|
|
|
$t("Reported by someone on {domain}", {
|
|
|
|
domain: report.reporter.domain,
|
|
|
|
})
|
|
|
|
}}
|
2020-02-18 07:57:00 +00:00
|
|
|
</span>
|
|
|
|
<span v-else>
|
2020-11-30 09:24:11 +00:00
|
|
|
{{
|
|
|
|
$t("Reported by {reporter}", {
|
|
|
|
reporter: report.reporter.preferredUsername,
|
|
|
|
})
|
|
|
|
}}
|
2020-02-18 07:57:00 +00:00
|
|
|
</span>
|
2019-09-09 07:31:08 +00:00
|
|
|
</div>
|
2020-09-30 13:25:30 +00:00
|
|
|
<div class="column" v-if="report.content" v-html="report.content" />
|
2020-02-18 07:57:00 +00:00
|
|
|
</div>
|
2019-09-09 07:31:08 +00:00
|
|
|
</div>
|
2020-02-18 07:57:00 +00:00
|
|
|
</div>
|
2019-09-09 07:31:08 +00:00
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
2021-11-18 16:50:54 +00:00
|
|
|
import { Prop, Vue } from "vue-property-decorator";
|
2020-02-18 07:57:00 +00:00
|
|
|
import { IReport } from "@/types/report.model";
|
2020-11-27 18:27:44 +00:00
|
|
|
import { ActorType } from "@/types/enums";
|
2019-09-09 07:31:08 +00:00
|
|
|
|
|
|
|
export default class ReportCard extends Vue {
|
|
|
|
@Prop({ required: true }) report!: IReport;
|
2019-12-03 10:29:51 +00:00
|
|
|
|
|
|
|
ActorType = ActorType;
|
2019-09-09 07:31:08 +00:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
2020-02-18 07:57:00 +00:00
|
|
|
.content img.image {
|
|
|
|
display: inline;
|
|
|
|
height: 1.5em;
|
|
|
|
vertical-align: text-bottom;
|
|
|
|
}
|
|
|
|
</style>
|