Display report data
This commit is contained in:
parent
180f02f7a2
commit
299c9f74bb
1 changed files with 34 additions and 4 deletions
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue