sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Render html tags in statuses

Browse source
This commit is contained in:
Angelina Filippova 2019-06-15 19:01:10 +00:00 committed by feld
parent 85179c6809
commit 42f88d0bea
4 changed files with 66 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/views/reports/components/Statuses.vue
View file

@ -3,15 +3,22 @@
<el-card v-for="status in report.statuses" :key="status.id" class="status-card">
<div slot="header">
<div class="status-header">
<div class="status-account">
<img :src="status.account.avatar" alt="avatar" class="status-avatar-img">
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
<div class="status-account-container">
<div class="status-account">
<img :src="status.account.avatar" class="status-avatar-img">
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
</div>
<a :href="status.account.url" target="_blank" class="account">
@{{ status.account.acct }}
</a>
</div>
<div class="status-actions">
<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-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-item
v-if="!status.sensitive"
@ -46,12 +53,9 @@
</el-dropdown>
</div>
</div>
<a :href="status.account.url" target="_blank" class="account">
@{{ status.account.acct }}
</a>
</div>
<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">
{{ parseTimestamp(status.created_at) }}
</a>
@ -121,6 +125,7 @@ export default {
}
.status-account-name {
margin: 0;
height: 22px;
}
.status-body {
display: flex;
@ -135,6 +140,37 @@ export default {
.status-header {
display: flex;
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>

21
src/views/reports/components/TimelineItem.vue
View file

@ -2,7 +2,10 @@
<el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container">
<el-card>
<div class="header-container">
<h3 class="report-title">Report on {{ report.account.display_name }}</h3>
<div>
<h3 class="report-title">Report on {{ report.account.display_name }}</h3>
<h5 class="id">ID: {{ report.id }}</h5>
</div>
<div>
<el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
<el-dropdown trigger="click">
@ -15,7 +18,6 @@
</el-dropdown>
</div>
</div>
<h5 class="id">ID: {{ report.id }}</h5>
<div>
<div class="line"/>
<span class="report-row-key">Account:</span>
@ -132,11 +134,11 @@ export default {
display: flex;
justify-content: space-between;
align-items: baseline;
height: 30px;
height: 40px;
}
.id {
color: gray;
margin: 0 0 12px;
margin-top: 6px;
}
.line {
width: 100%;
@ -185,8 +187,15 @@ export default {
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.confirm-message {
width: 98%;
.timeline-item-container {
.header-container {
display: flex;
flex-direction: column;
height: 80px;
}
.id {
margin: 6px 0 0 0;
}
}
}
</style>

7
src/views/reports/index.vue
View file

@ -73,10 +73,13 @@ only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.reports-container {
h1 {
margin: 7px 10px 7px 10px;
margin: 7px 10px 15px 10px;
}
.filter-container {
margin: 0 10px 7px 10px
margin: 0 10px
}
.timeline {
margin: 20px 20px 20px 18px
}
}
}

2
src/views/users/index.vue
View file

@ -314,7 +314,7 @@ only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.users-container {
h1 {
margin: 7px 10px 7px 10px;
margin: 7px 10px 15px 10px;
}
.actions-container {
display: flex;