Commit 42f88d0b authored by Angelina Filippova's avatar Angelina Filippova Committed by feld

Render html tags in statuses

parent 85179c68
...@@ -3,15 +3,22 @@ ...@@ -3,15 +3,22 @@
<el-card v-for="status in report.statuses" :key="status.id" class="status-card"> <el-card v-for="status in report.statuses" :key="status.id" class="status-card">
<div slot="header"> <div slot="header">
<div class="status-header"> <div class="status-header">
<div class="status-account-container">
<div class="status-account"> <div class="status-account">
<img :src="status.account.avatar" alt="avatar" class="status-avatar-img"> <img :src="status.account.avatar" class="status-avatar-img">
<h3 class="status-account-name">{{ status.account.display_name }}</h3> <h3 class="status-account-name">{{ status.account.display_name }}</h3>
</div> </div>
<a :href="status.account.url" target="_blank" class="account">
@{{ status.account.acct }}
</a>
</div>
<div class="status-actions"> <div class="status-actions">
<el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag> <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
<el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag> <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/></el-button> <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
{{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
</el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
v-if="!status.sensitive" v-if="!status.sensitive"
...@@ -46,12 +53,9 @@ ...@@ -46,12 +53,9 @@
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<a :href="status.account.url" target="_blank" class="account">
@{{ status.account.acct }}
</a>
</div> </div>
<div class="status-body"> <div class="status-body">
<span class="status-content">{{ status.content }}</span> <span class="status-content" v-html="status.content"/>
<a :href="status.url" target="_blank" class="account"> <a :href="status.url" target="_blank" class="account">
{{ parseTimestamp(status.created_at) }} {{ parseTimestamp(status.created_at) }}
</a> </a>
...@@ -121,6 +125,7 @@ export default { ...@@ -121,6 +125,7 @@ export default {
} }
.status-account-name { .status-account-name {
margin: 0; margin: 0;
height: 22px;
} }
.status-body { .status-body {
display: flex; display: flex;
...@@ -135,6 +140,37 @@ export default { ...@@ -135,6 +140,37 @@ export default {
.status-header { .status-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.el-message {
min-width: 80%;
}
.el-message-box {
width: 80%;
}
.status-card {
.el-card__header {
padding: 10px 17px
}
.el-tag {
margin: 3px 4px 3px 0;
}
.status-account-container {
margin-bottom: 5px;
}
.status-actions-button {
margin: 3px 0 3px;
}
.status-actions {
display: flex;
flex-wrap: wrap;
}
.status-header {
display: flex;
flex-direction: column;
}
}
} }
</style> </style>
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<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">
<div>
<h3 class="report-title">Report on {{ report.account.display_name }}</h3> <h3 class="report-title">Report on {{ report.account.display_name }}</h3>
<h5 class="id">ID: {{ report.id }}</h5>
</div>
<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-dropdown trigger="click"> <el-dropdown trigger="click">
...@@ -15,7 +18,6 @@ ...@@ -15,7 +18,6 @@
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<h5 class="id">ID: {{ report.id }}</h5>
<div> <div>
<div class="line"/> <div class="line"/>
<span class="report-row-key">Account:</span> <span class="report-row-key">Account:</span>
...@@ -132,11 +134,11 @@ export default { ...@@ -132,11 +134,11 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
height: 30px; height: 40px;
} }
.id { .id {
color: gray; color: gray;
margin: 0 0 12px; margin-top: 6px;
} }
.line { .line {
width: 100%; width: 100%;
...@@ -185,8 +187,15 @@ export default { ...@@ -185,8 +187,15 @@ export default {
@media @media
only screen and (max-width: 760px), only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
.confirm-message { .timeline-item-container {
width: 98%; .header-container {
display: flex;
flex-direction: column;
height: 80px;
}
.id {
margin: 6px 0 0 0;
}
} }
} }
</style> </style>
...@@ -73,10 +73,13 @@ only screen and (max-width: 760px), ...@@ -73,10 +73,13 @@ only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
.reports-container { .reports-container {
h1 { h1 {
margin: 7px 10px 7px 10px; margin: 7px 10px 15px 10px;
} }
.filter-container { .filter-container {
margin: 0 10px 7px 10px margin: 0 10px
}
.timeline {
margin: 20px 20px 20px 18px
} }
} }
} }
......
...@@ -314,7 +314,7 @@ only screen and (max-width: 760px), ...@@ -314,7 +314,7 @@ only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
.users-container { .users-container {
h1 { h1 {
margin: 7px 10px 7px 10px; margin: 7px 10px 15px 10px;
} }
.actions-container { .actions-container {
display: flex; display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment