🐛 FIX: lint && design

Signed-off-by: Jonas Sulzer <jonas@violoncello.ch>

2 files changed, 57 insertions, 58 deletions

diff --git a/src/components/TimelineContent.vue b/src/components/TimelineContent.vue
index 7e86b0cc..a1796f0c 100644
--- a/src/components/TimelineContent.vue
+++ b/src/components/TimelineContent.vue
@@ -1,48 +1,48 @@
 <template>
-  <div class="entry-content">
-    <div v-if="item.actor_info" class="post-avatar">
-      <avatar v-if="item.local" :size="32" :user="item.actor_info.preferredUsername"
-        :display-name="item.actor_info.account" :disable-tooltip="true" />
-      <avatar v-else :size="32" :url="avatarUrl"
-        :disable-tooltip="true" />
-    </div>
-    <div class="post-content">
-      <div class="post-author-wrapper">
-        <router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}">
-          <span class="post-author">
-            {{ userDisplayName(item.actor_info) }}
-          </span>
-          <span class="post-author-id">
-            @{{ item.actor_info.account }}
-          </span>
-        </router-link>
-        <a v-else :href="item.attributedTo">
-          <span class="post-author-id">
-            {{ item.attributedTo }}
-          </span>
-        </a>
-      </div>
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="post-message" v-html="formatedMessage" />
-      <div v-click-outside="hidePopoverMenu" class="post-actions">
-        <a v-tooltip.bottom="t('social', 'Reply')" class="icon-reply" @click.prevent="reply" />
-        <a v-if="item.actor_info.account !== cloudId" v-tooltip.bottom="t('social', 'Boost')"
-          :class="(isBoosted) ? 'icon-boosted' : 'icon-boost'"
-          @click.prevent="boost" />
-        <div v-if="popoverMenu.length > 0" v-tooltip.bottom="t('social', 'More actions')" class="post-actions-more">
-          <a class="icon-more" @click.prevent="togglePopoverMenu" />
-          <div :class="{open: menuOpened}" class="popovermenu menu-center">
-            <popover-menu :menu="popoverMenu" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">
-        {{ relativeTimestamp }}
-      </div>
-    </div>
-  </div>
+	<div class="entry-content">
+		<div v-if="item.actor_info" class="post-avatar">
+			<avatar v-if="item.local" :size="32" :user="item.actor_info.preferredUsername"
+				:display-name="item.actor_info.account" :disable-tooltip="true" />
+			<avatar v-else :size="32" :url="avatarUrl"
+				:disable-tooltip="true" />
+		</div>
+		<div class="post-content">
+			<div class="post-author-wrapper">
+				<router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}">
+					<span class="post-author">
+						{{ userDisplayName(item.actor_info) }}
+					</span>
+					<span class="post-author-id">
+						@{{ item.actor_info.account }}
+					</span>
+				</router-link>
+				<a v-else :href="item.attributedTo">
+					<span class="post-author-id">
+						{{ item.attributedTo }}
+					</span>
+				</a>
+			</div>
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<div class="post-message" v-html="formatedMessage" />
+			<div v-click-outside="hidePopoverMenu" class="post-actions">
+				<a v-tooltip.bottom="t('social', 'Reply')" class="icon-reply" @click.prevent="reply" />
+				<a v-if="item.actor_info.account !== cloudId" v-tooltip.bottom="t('social', 'Boost')"
+					:class="(isBoosted) ? 'icon-boosted' : 'icon-boost'"
+					@click.prevent="boost" />
+				<div v-if="popoverMenu.length > 0" v-tooltip.bottom="t('social', 'More actions')" class="post-actions-more">
+					<a class="icon-more" @click.prevent="togglePopoverMenu" />
+					<div :class="{open: menuOpened}" class="popovermenu menu-center">
+						<popover-menu :menu="popoverMenu" />
+					</div>
+				</div>
+			</div>
+		</div>
+		<div>
+			<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">
+				{{ relativeTimestamp }}
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
@@ -65,7 +65,7 @@ export default {
 	mixins: [popoverMenu, currentUser],
 	props: {
 		item: { type: Object, default: () => {} },
-    parentAnnounce: { type: Object, default: () => {} }
+		parentAnnounce: { type: Object, default: () => {} }
 	},
 	data() {
 		return {
@@ -132,10 +132,10 @@ export default {
 			this.$root.$emit('composer-reply', this.item)
 		},
 		boost() {
-      let params = {
-        post: this.item,
-        parentAnnounce: this.parentAnnounce
-      }
+			let params = {
+				post: this.item,
+				parentAnnounce: this.parentAnnounce
+			}
 			if (this.isBoosted) {
 				this.$store.dispatch('postUnBoost', params)
 			} else {
diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue
index 03d25ad3..b5862b30 100644
--- a/src/components/TimelineEntry.vue
+++ b/src/components/TimelineEntry.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="timeline-entry">
 		<div v-if="item.type === 'Announce'" class="boost">
-			<span class="icon-container"><span class="icon-boost"></span></span>
+			<span class="icon-boost"></span>
 			<router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}">
 				<span v-tooltip.bottom="item.actor_info.account" class="post-author">
 					{{ userDisplayName(item.actor_info) }}
@@ -14,7 +14,7 @@
 			</a>
 			{{ boosted }}
 		</div>
-		<timeline-content :item="entryContent" :parentAnnounce="isBoost" />
+		<timeline-content :item="entryContent" :parent-announce="isBoost" />
 	</div>
 </template>
 
@@ -42,9 +42,10 @@ export default {
 			}
 		},
 		isBoost() {
-			if (this.item.type === 'Announce'){
+			if (this.item.type === 'Announce') {
 				return this.item
 			}
+			return {}
 		},
 		boosted() {
 			return t('social', 'boosted')
@@ -68,13 +69,11 @@ export default {
 		width: 44px;
 		height: 17px;
 		opacity: .5;
+		background-position: right center;
+		vertical-align: middle;
 	}
 
-	.post-author {
-		font-weight: bold;
-	}
-
-	.post-author-id {
-		opacity: .7;
+	.boost {
+		opacity: .5;
 	}
 </style>