From 27c23fa9ac7a7131b8f881b987cd5d41c1e309b3 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 9 Jan 2020 11:27:54 +0100
Subject: [PATCH] Improve styling of User.vue

- Remove avatar class
- fix competing styles
- follow rscss guidlines
---
 webapp/components/PostCard/PostCard.vue |  6 ++-
 webapp/components/User/User.vue         | 49 ++++++++++++-------------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index d54a86367..821b40216 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -27,7 +27,7 @@
     </div>
     <ds-space margin-bottom="small" />
     <!-- Post Title -->
-    <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
+    <ds-heading tag="h3" class="hyphenate-text post-title">{{ post.title }}</ds-heading>
     <ds-space margin-bottom="small" />
     <!-- Post Content Excerpt -->
     <!-- eslint-disable vue/no-v-html -->
@@ -186,6 +186,10 @@ export default {
     height: 75px;
   }
 
+  .post-title {
+    margin-top: $space-large;
+  }
+
   /* workaround to avoid jumping layout when hc-user is rendered */
   .user-wrapper {
     height: 36px;
diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index e366cd6c5..bf8913b54 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="user" v-if="displayAnonymous">
-    <user-avatar v-if="showAvatar" class="avatar" />
+    <user-avatar v-if="showAvatar" />
     <div>
       <b class="username">{{ $t('profile.userAnonym') }}</b>
     </div>
@@ -8,15 +8,19 @@
   <dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
     <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
       <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
-        <div @mouseover="showPopover ? openMenu(true) : () => {}" @mouseleave="closeMenu(true)">
-          <user-avatar v-if="showAvatar" class="avatar" :user="user" />
-          <div>
-            <ds-text class="userinfo">
-              <b>{{ userSlug }}</b>
-            </ds-text>
-          </div>
+        <user-avatar v-if="showAvatar" :user="user" />
+        <div
+          class="user-info"
+          @mouseover="showPopover ? openMenu(true) : () => {}"
+          @mouseleave="closeMenu(true)"
+        >
+          <ds-text>
+            <b>{{ userSlug }}</b>
+          </ds-text>
           <ds-text class="username" align="left" size="small" color="soft">
             {{ userName | truncate(18) }}
+          </ds-text>
+          <ds-text class="date-time" align="left" size="small" color="soft">
             <template v-if="dateTime">
               <base-icon name="clock" />
               <hc-relative-date-time :date-time="dateTime" />
@@ -148,29 +152,19 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.avatar {
-  float: left;
-  margin-right: 4px;
-  height: 100%;
-  vertical-align: middle;
+.user {
+  display: flex;
+  flex-wrap: nowrap;
 }
 
-.userinfo {
+.user-info {
   display: flex;
-  align-items: center;
+  flex-direction: column;
 
   > .ds-text {
     display: flex;
-    align-items: center;
-    margin-left: $space-xx-small;
+    margin: 0 0 $space-xxx-small $space-xx-small;
   }
-}
-
-.user {
-  white-space: nowrap;
-  position: relative;
-  display: flex;
-  align-items: center;
 
   &:hover,
   &.active {
@@ -178,7 +172,10 @@ export default {
   }
 }
 
-.user-slug {
-  margin-bottom: $space-xx-small;
+.date-time {
+  > .base-icon {
+    align-self: center;
+    margin: $space-xxx-small $space-xxx-small 0 0;
+  }
 }
 </style>