Make user profiles visible inline.

This commit is contained in:
Roger Braun 2017-02-16 15:58:49 +01:00
parent ae388d7927
commit 5481cf00a3
3 changed files with 20 additions and 4 deletions

View file

@ -3,6 +3,7 @@ import FavoriteButton from '../favorite_button/favorite_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCardContent from '../user_card_content/user_card_content.vue'
const Status = {
props: [
@ -12,7 +13,8 @@ const Status = {
data: () => ({
replying: false,
expanded: false,
unmuted: false
unmuted: false,
userExpanded: false
}),
computed: {
retweet () { return !!this.statusoid.retweeted_status },
@ -34,7 +36,8 @@ const Status = {
FavoriteButton,
RetweetButton,
DeleteButton,
PostStatusForm
PostStatusForm,
UserCardContent
},
methods: {
toggleReplying () {
@ -45,6 +48,9 @@ const Status = {
},
toggleMute () {
this.unmuted = !this.unmuted
},
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
}
}
}

View file

@ -18,10 +18,13 @@
<div class="media status container">
<div class="media-left">
<a :href="status.user.statusnet_profile_url">
<img class='avatar' :src="status.user.profile_image_url_original">
<img @click.prevent="toggleUserExpanded" class='avatar' :src="status.user.profile_image_url_original">
</a>
</div>
<div class="media-body">
<div class="base05 base05=border usercard" v-if="userExpanded">
<user-card-content :user="status.user"></user-card-content>
</div>
<div class="user-content">
<h4 class="media-heading">
{{status.user.name}}
@ -147,4 +150,11 @@
display: block;
margin-left: auto;
}
.usercard {
border-style: solid;
border-width: 1px;
border-radius: 1em;
margin-bottom: 1em;
}
</style>

View file

@ -34,7 +34,7 @@ const setStyle = (href) => {
styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max')
styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max')
styleSheet.insertRule(`.base05-border { color: ${base05Color}`, 'index-max')
styleSheet.insertRule(`.base05-border { border-color: ${base05Color}`, 'index-max')
body.style.display = 'initial'
}
cssEl.addEventListener('load', setDynamic)