forked from AkkomaGang/admin-fe
Add ability to display media attachments, polls and statuses with hidden content
This commit is contained in:
Angelina Filippova
parent
2ea990f074
commit
f5c088dc1a
2 changed files with 118 additions and 85 deletions
|
|
@ -54,7 +54,40 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="status-body">
|
<div class="status-body">
|
||||||
<span class="status-content" v-html="status.content"/>
|
<div v-if="status.spoiler_text">
|
||||||
|
<strong>{{ status.spoiler_text }}</strong>
|
||||||
|
<el-button v-if="!showHiddenStatus" size="mini" class="show-more-button" @click="showHiddenStatus = true">Show more</el-button>
|
||||||
|
<el-button v-if="showHiddenStatus" size="mini" class="show-more-button" @click="showHiddenStatus = false">Show less</el-button>
|
||||||
|
<div v-if="showHiddenStatus">
|
||||||
|
<span class="status-content" v-html="status.content"/>
|
||||||
|
<div v-if="status.poll" class="poll">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(option, index) in status.poll.options" :key="index">
|
||||||
|
{{ option.title }}
|
||||||
|
<el-progress :percentage="optionPercent(status.poll, option)" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div v-for="(attachment, index) in status.media_attachments" :key="index" class="image">
|
||||||
|
<img :src="attachment.preview_url">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div v-if="!status.spoiler_text">
|
||||||
|
<span class="status-content" v-html="status.content"/>
|
||||||
|
<div v-if="status.poll" class="poll">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(option, index) in status.poll.options" :key="index">
|
||||||
|
{{ option.title }}
|
||||||
|
<el-progress :percentage="optionPercent(status.poll, option)" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div v-for="(attachment, index) in status.media_attachments" :key="index" class="image">
|
||||||
|
<img :src="attachment.preview_url">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<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>
|
||||||
|
|
@ -66,13 +99,18 @@
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Statuses',
|
name: 'Status',
|
||||||
props: {
|
props: {
|
||||||
status: {
|
status: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showHiddenStatus: false
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
capitalizeFirstLetter(str) {
|
capitalizeFirstLetter(str) {
|
||||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||||
|
|
@ -98,6 +136,13 @@ export default {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
optionPercent(poll, pollOption) {
|
||||||
|
const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0)
|
||||||
|
if (allVotes === 0) {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
return +(pollOption.votes_count / allVotes * 100).toFixed(1)
|
||||||
|
},
|
||||||
parseTimestamp(timestamp) {
|
parseTimestamp(timestamp) {
|
||||||
return moment(timestamp).format('YYYY-MM-DD HH:mm')
|
return moment(timestamp).format('YYYY-MM-DD HH:mm')
|
||||||
}
|
}
|
||||||
|
|
@ -106,66 +151,78 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel='stylesheet/scss' lang='scss'>
|
<style rel='stylesheet/scss' lang='scss'>
|
||||||
.account {
|
.account {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
line-height: 26px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.image {
|
||||||
|
width: 20%;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.status-account {
|
}
|
||||||
display: flex;
|
.show-more-button {
|
||||||
align-items: center;
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.status-account {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.status-avatar-img {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.status-account-name {
|
||||||
|
margin: 0;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
.status-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.status-content {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
.status-card {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.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%;
|
||||||
}
|
}
|
||||||
.status-avatar-img {
|
.el-message-box {
|
||||||
width: 15px;
|
width: 80%;
|
||||||
height: 15px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.status-account-name {
|
|
||||||
margin: 0;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
.status-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.status-content {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
}
|
||||||
.status-card {
|
.status-card {
|
||||||
margin-bottom: 15px;
|
.el-card__header {
|
||||||
}
|
padding: 10px 17px;
|
||||||
.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 {
|
.el-tag {
|
||||||
width: 80%;
|
margin: 3px 4px 3px 0;
|
||||||
}
|
}
|
||||||
.status-card {
|
.status-account-container {
|
||||||
.el-card__header {
|
margin-bottom: 5px;
|
||||||
padding: 10px 17px;
|
}
|
||||||
}
|
.status-actions-button {
|
||||||
.el-tag {
|
margin: 3px 0 3px;
|
||||||
margin: 3px 4px 3px 0;
|
}
|
||||||
}
|
.status-actions {
|
||||||
.status-account-container {
|
display: flex;
|
||||||
margin-bottom: 5px;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.status-actions-button {
|
.status-header {
|
||||||
margin: 3px 0 3px;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
.status-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.status-header {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -70,22 +70,8 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-col :span="18">
|
<el-col :span="18">
|
||||||
<el-timeline class="statuses">
|
<el-timeline class="statuses">
|
||||||
<el-timeline-item v-for="status in statuses" :timestamp="createdAtLocaleString(status.created_at)" :key="status.id">
|
<el-timeline-item v-for="status in statuses" :key="status.id">
|
||||||
<el-card>
|
<status :status="status"/>
|
||||||
<strong v-if="status.spoiler_text">{{ status.spoiler_text }}</strong>
|
|
||||||
<p v-if="status.content" v-html="status.content" />
|
|
||||||
<div v-if="status.poll" class="poll">
|
|
||||||
<ul>
|
|
||||||
<li v-for="(option, index) in status.poll.options" :key="index">
|
|
||||||
{{ option.title }}
|
|
||||||
<el-progress :percentage="optionPercent(status.poll, option)" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div v-for="(attachment, index) in status.media_attachments" :key="index" class="image">
|
|
||||||
<img :src="attachment.preview_url">
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-timeline-item>
|
</el-timeline-item>
|
||||||
</el-timeline>
|
</el-timeline>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -94,8 +80,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Status from '../status/Status'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'UsersShow',
|
name: 'UsersShow',
|
||||||
|
components: { Status },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showPrivate: false
|
showPrivate: false
|
||||||
|
|
@ -116,19 +105,6 @@ export default {
|
||||||
this.$store.dispatch('FetchData', { id: this.$route.params.id, godmode: false })
|
this.$store.dispatch('FetchData', { id: this.$route.params.id, godmode: false })
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
optionPercent(poll, pollOption) {
|
|
||||||
const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0)
|
|
||||||
if (allVotes === 0) {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
|
|
||||||
return +(pollOption.votes_count / allVotes * 100).toFixed(1)
|
|
||||||
},
|
|
||||||
createdAtLocaleString(createdAt) {
|
|
||||||
const date = new Date(createdAt)
|
|
||||||
|
|
||||||
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
|
|
||||||
},
|
|
||||||
onTogglePrivate() {
|
onTogglePrivate() {
|
||||||
console.log(this.showPrivate)
|
console.log(this.showPrivate)
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue