Display report data

This commit is contained in:
Angelina Filippova 2019-05-18 19:50:08 +03:00
parent 180f02f7a2
commit 299c9f74bb

View file

@ -2,14 +2,32 @@
<el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container"> <el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container">
<el-card> <el-card>
<div class="header-container"> <div class="header-container">
<h4>Report on {{ report.account.acct }}</h4> <h4>Report on {{ report.account.display_name }}</h4>
<div> <div>
<el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag> <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
<el-button plain size="small" @click="toggleNoteInput">{{ $t('reports.reply') }}</el-button> <el-button plain size="small" @click="toggleNoteInput">{{ $t('reports.reply') }}</el-button>
</div> </div>
</div> </div>
<h5 class="id">#{{ report.id }}</h5> <h5 class="id">ID: {{ report.id }}</h5>
<p>{{ report.content }}</p> <div class="report-row">
<span>Account:</span>
<img
:src="report.account.avatar"
alt="User's avatar"
class="avatar-img">
<a :href="report.account.url" target="_blank" class="account">{{ report.account.acct }}</a>
</div>
<div class="report-row">
<span>Content: {{ report.content }}</span>
</div>
<div class="report-row">
<span>Actor:</span>
<img
:src="report.actor.avatar"
alt="User's avatar"
class="avatar-img">
<a :href="report.actor.url" target="_blank" class="account">{{ report.actor.acct }}</a>
</div>
<el-collapse v-model="showNotes"> <el-collapse v-model="showNotes">
<el-collapse-item :title="$t('reports.showNotes')" name="showNotes"> <el-collapse-item :title="$t('reports.showNotes')" name="showNotes">
<div v-if="report.statuses.length > 0"> <div v-if="report.statuses.length > 0">
@ -115,6 +133,14 @@ export default {
</script> </script>
<style rel='stylesheet/scss' lang='scss'> <style rel='stylesheet/scss' lang='scss'>
.account {
text-decoration: underline;
}
.avatar-img {
vertical-align: bottom;
width: 15px;
height: 15px;
}
.el-card__body { .el-card__body {
padding: 17px 17px 0; padding: 17px 17px 0;
} }
@ -142,10 +168,11 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
height: 25px;
} }
.id { .id {
color: gray; color: gray;
margin: 0; margin: 0 0 12px;
} }
.new-note { .new-note {
p { p {
@ -163,6 +190,9 @@ export default {
font-style: italic; font-style: italic;
color: gray; color: gray;
} }
.report-row {
margin-bottom: 5px;
}
.submit-button { .submit-button {
display: block; display: block;
margin: 7px 0 17px auto; margin: 7px 0 17px auto;