Use UserMetaWidget

client/src/components/UserMetaWidget.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="user-widget">
+      <div class="user-widget__avatar">
+        <avatar :avatar-url="avatarUrl" />
+      </div>
+      <span class="user-widget__name">{{firstName}} {{lastName}}</span>
+      <span class="user-widget__date" v-if="date">{{date}}</span>
+    </div>
+</template>
+
+<script>
+  import Avatar from '@/components/profile/Avatar';
+
+  export default {
+    props: ['firstName', 'lastName', 'avatarUrl', 'date'],
+
+    components: {
+      Avatar
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .user-widget {
+    color: $color-silver-dark;
+    display: flex;
+    align-items: center;
+
+    &__name {
+      padding: 0px 10px;
+      color: $color-silver-dark;
+      font-family: $sans-serif-font-family;
+    }
+
+    &__date {
+      font-family: $sans-serif-font-family;
+    }
+
+    &__avatar {
+      width: 30px;
+      height: 30px;
+      fill: $color-silver-dark;
+    }
+
+    &--is-profile {
+      & > span {
+        color: $color-brand;
+      }
+    }
+  }
+</style>

client/src/components/rooms/RoomEntry.vue

@@ -13,7 +13,7 @@
         <p class="room-entry__teaser" v-html="teaser">
 
         </p>
-        <user-widget class="room-entry__author" v-bind="author"></user-widget>
+        <user-meta-widget class="room-entry__author" v-bind="author"></user-meta-widget>
       </div>
     </router-link>
   </div>
@@ -25,7 +25,7 @@
   import ROOM_ENTRIES_QUERY from '@/graphql/gql/roomEntriesQuery.gql';
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
-  import UserWidget from '@/components/UserWidget';
+  import UserMetaWidget from '@/components/UserMetaWidget';
   import MoreOptionsWidget from '@/components/MoreOptionsWidget';
   import teaser from '@/helpers/teaser';
 
@@ -34,7 +34,7 @@
 
     components: {
       MoreOptionsWidget,
-      UserWidget
+      UserMetaWidget
     },
 
     methods: {

client/src/pages/article.vue

@@ -2,7 +2,7 @@
   <div class="article">
     <div class="article__header">
       <div class="article__meta">
-        <user-widget v-bind="roomEntry.author"></user-widget>
+        <user-meta-widget v-bind="roomEntry.author"></user-meta-widget>
       </div>
       <h1 class="article__title">{{roomEntry.title}}</h1>
     </div>
@@ -24,7 +24,7 @@
   import VideoBlock from '@/components/content-blocks/VideoBlock';
   import LinkBlock from '@/components/content-blocks/LinkBlock';
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
-  import UserWidget from '@/components/UserWidget';
+  import UserMetaWidget from '@/components/UserMetaWidget';
 
   import ROOM_ENTRY_QUERY from '@/graphql/gql/roomEntryQuery.gql';
 
@@ -36,7 +36,7 @@
       'video_block': VideoBlock,
       'link_block': LinkBlock,
       'document_block': DocumentBlock,
-      UserWidget
+      UserMetaWidget
     },
 
     apollo: {