Make user profiles visible inline.

src/components/status/status.js

@@ -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
     }
   }
 }

src/components/status/status.vue

@@ -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>

src/services/style_setter/style_setter.js

@@ -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)