From e04eedf0d07ff66dba3e881e9ef8bdf5a868619e Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Fri, 6 Sep 2019 13:36:11 +0200
Subject: [PATCH] Fix and DRY hc-avatar stylings

---
 webapp/components/User/User.vue | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index b8efd6ebe..b83f5b172 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -1,25 +1,17 @@
 <template>
-  <div v-if="displayAnonymous">
-    <div
-      style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
-    >
-      <hc-avatar />
-    </div>
-    <div style="display: inline-block; height: 100%; vertical-align: middle;">
-      <b class="username" style="vertical-align: middle;">{{ $t('profile.userAnonym') }}</b>
+  <div class="user" v-if="displayAnonymous">
+    <hc-avatar />
+    <div>
+      <b class="username">{{ $t('profile.userAnonym') }}</b>
     </div>
   </div>
   <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="openMenu(true)" @mouseleave="closeMenu(true)">
-          <div
-            style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
-          >
-            <hc-avatar :user="user" />
-          </div>
-          <div style="display: inline-block; height: 100%; vertical-align: middle;">
-            <b class="username" style="vertical-align: middle;">{{ userName | truncate(18) }}</b>
+          <hc-avatar :user="user" />
+          <div>
+            <b class="username">{{ userName | truncate(18) }}</b>
           </div>
           <!-- Time -->
           <div v-if="dateTime" style="display: inline;">
@@ -127,7 +119,7 @@ export default {
     },
     displayAnonymous() {
       const { user, isModerator } = this
-      return !user || (user.deleted) || (user.disabled && !isModerator)
+      return !user || user.deleted || (user.disabled && !isModerator)
     },
     userLink() {
       const { id, slug } = this.user
@@ -143,6 +135,14 @@ export default {
 </script>
 
 <style lang="scss">
+.avatar {
+  display: inline-block;
+  float: left;
+  margin-right: 4px;
+  height: 100%;
+  vertical-align: middle;
+}
+
 .user {
   white-space: nowrap;
   position: relative;