Make user profiles visible inline.
This commit is contained in:
parent
ae388d7927
commit
5481cf00a3
3 changed files with 20 additions and 4 deletions
|
@ -3,6 +3,7 @@ import FavoriteButton from '../favorite_button/favorite_button.vue'
|
||||||
import RetweetButton from '../retweet_button/retweet_button.vue'
|
import RetweetButton from '../retweet_button/retweet_button.vue'
|
||||||
import DeleteButton from '../delete_button/delete_button.vue'
|
import DeleteButton from '../delete_button/delete_button.vue'
|
||||||
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
||||||
|
import UserCardContent from '../user_card_content/user_card_content.vue'
|
||||||
|
|
||||||
const Status = {
|
const Status = {
|
||||||
props: [
|
props: [
|
||||||
|
@ -12,7 +13,8 @@ const Status = {
|
||||||
data: () => ({
|
data: () => ({
|
||||||
replying: false,
|
replying: false,
|
||||||
expanded: false,
|
expanded: false,
|
||||||
unmuted: false
|
unmuted: false,
|
||||||
|
userExpanded: false
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
retweet () { return !!this.statusoid.retweeted_status },
|
retweet () { return !!this.statusoid.retweeted_status },
|
||||||
|
@ -34,7 +36,8 @@ const Status = {
|
||||||
FavoriteButton,
|
FavoriteButton,
|
||||||
RetweetButton,
|
RetweetButton,
|
||||||
DeleteButton,
|
DeleteButton,
|
||||||
PostStatusForm
|
PostStatusForm,
|
||||||
|
UserCardContent
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleReplying () {
|
toggleReplying () {
|
||||||
|
@ -45,6 +48,9 @@ const Status = {
|
||||||
},
|
},
|
||||||
toggleMute () {
|
toggleMute () {
|
||||||
this.unmuted = !this.unmuted
|
this.unmuted = !this.unmuted
|
||||||
|
},
|
||||||
|
toggleUserExpanded () {
|
||||||
|
this.userExpanded = !this.userExpanded
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,10 +18,13 @@
|
||||||
<div class="media status container">
|
<div class="media status container">
|
||||||
<div class="media-left">
|
<div class="media-left">
|
||||||
<a :href="status.user.statusnet_profile_url">
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="media-body">
|
<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">
|
<div class="user-content">
|
||||||
<h4 class="media-heading">
|
<h4 class="media-heading">
|
||||||
{{status.user.name}}
|
{{status.user.name}}
|
||||||
|
@ -147,4 +150,11 @@
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.usercard {
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -34,7 +34,7 @@ const setStyle = (href) => {
|
||||||
|
|
||||||
styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max')
|
styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max')
|
||||||
styleSheet.insertRule(`body { color: ${base05Color}`, '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'
|
body.style.display = 'initial'
|
||||||
}
|
}
|
||||||
cssEl.addEventListener('load', setDynamic)
|
cssEl.addEventListener('load', setDynamic)
|
||||||
|
|
Loading…
Reference in a new issue