Simplify design making only 2 clickable areas (the avatar to the user page, and the rest of the component to the thread)

frontend/src/components/ThreadDisplay.vue

@@ -1,31 +1,33 @@
 <template>
-	<div
-		class='thread_display'
-		@click.self='goToThread'
-	>
-		<div class='thread_display__border' :style='{"background-color" : thread.Category.color}'></div>
-		<avatar-icon ref='avatar' :user='thread.User' size='small' class='thread_display__icon'></avatar-icon>
-		<div style='width: 100%;'>
-			<div class='thread_display__header' @click.self='goToThread'>
-				<span class='thread_display__name' @click='goToThread'>
+	<div class='thread_display'>
+		<avatar-icon
+			ref='avatar'
+			:user='thread.User'
+			size='small'
+			class='thread_display__icon'
+
+			@click='goToUser'
+		></avatar-icon>
+		<div style='width: 100%;' @click='goToThread'>
+			<div class='thread_display__header'>
+				<span class='thread_display__name'>
 					{{thread.name}}
 				</span>
-				<div class='thread_display__meta_bar' @click.self='goToThread'>
-					<div @click.self='goToThread'>
+				<div class='thread_display__meta_bar'>
+					<div>
 						By
-						<span class='thread_display__username' ref='username' @click='goToUser'>{{threadUsername}}</span>
+						<span class='thread_display__username' ref='username'>{{threadUsername}}</span>
 						in
-						<span class='thread_display__category' ref='category' @click='goToCategory'>{{thread.Category.name}}</span>
+						<span class='thread_display__category' ref='category'>{{thread.Category.name}}</span>
 						&middot;
-						<span class='thread_display__date' @click='goToThread'>{{thread.createdAt | formatDate}}</span>
+						<span class='thread_display__date'>{{thread.createdAt | formatDate}}</span>
 					</div>
 				</div>
 			</div>
-			<div class='thread_display__replies_bar' @click.self='goToThread'>
+			<div class='thread_display__replies_bar'>
 				<div
 					class='thread_display__latest_reply'
 					v-if='thread.Posts.length === 2'
-					@click='goToPost'
 				>
 					<span class='fa fa-reply fa-fw'></span>
 					<span class='thread_display__latest_reply__text'>Latest reply by</span>
@@ -34,12 +36,12 @@
 					<span class='thread_display__date'>{{thread.Posts[1].createdAt | formatDate}}</span>
 				</div>
 				<span style='cursor: default;' v-else>No replies</span>
-				<div class='thread_display__replies' title='Replies to thread' @click='goToThread'>
+				<div class='thread_display__replies' title='Replies to thread'>
 					<span class='fa fa-comment-o fa-fw'></span>
 					{{thread.postsCount - 1}}
 				</div>
 			</div>
-			<div class='thread_display__content' @click='goToThread'>
+			<div class='thread_display__content'>
 				{{thread.Posts[0].content | stripTags | truncate(150)}}
 			</div>
 		</div>
@@ -77,17 +79,6 @@
 			},
 			goToThread () {
 				this.$router.push('/thread/' + this.thread.slug + '/' + this.thread.id)
-			},
-			goToCategory () {
-				this.$router.push('/category/' + this.thread.Category.value.toLowerCase())
-			},
-			goToPost () {
-				this.$router.push(
-					'/thread/' +
-					this.thread.slug + '/' +
-					this.thread.id + '/' +
-					this.thread.Posts[1].postNumber
-				)
 			}
 		}
 	}
@@ -97,14 +88,15 @@
 	@import '../assets/scss/variables.scss';
 
 	.thread_display {
-		display: flex;
-		padding: 0.75rem;
-		margin-bottom: 1rem;
 		background-color: #fff;
+		border: thin solid $color__gray--darker;
 		border-radius: 0.25rem;
-		transition: background-color 0.2s, box-shadow 0.2s;
+		cursor: pointer;
+		display: flex;
+		margin-bottom: 1rem;
+		padding: 0.75rem;
 		position: relative;
-		border: thin solid $color__gray--darker;
+		transition: background-color 0.2s, box-shadow 0.2s;
 
 		&:hover {
 			@extend .shadow_border--hover;
@@ -115,19 +107,10 @@
 		}
 
 		@at-root #{&}__username,
-		         #{&}__category {
-			
-			transition: opacity 0.2s;
-			cursor: pointer;
+		         #{&}__category,
+		         #{&}__date {
 			color: $color--text__primary;
-
-			&:hover {
-				opacity: 0.75;
-			}
 		}	
-		@at-root #{&}__date {
-			color: $color--text__primary;
-		}
 
 		@at-root #{&}__header {
 			display: flex;
@@ -136,11 +119,9 @@
 			@at-root #{&}__name {
 				font-weight: 500;
 				font-size: 1.25rem;
-				cursor: default;
 			}
 			@at-root #{&}__meta_bar {
 				display: flex;
-				cursor: default;
 				color: $color--gray__darkest;
 				justify-content: space-between;
 			}
@@ -150,21 +131,14 @@
 			justify-content: space-between;
 		}
 			@at-root #{&}__latest_reply {
-				cursor: pointer;
-				transition: opacity 0.2s;
 				color: $color--text__secondary;
 
-				&:hover {
-					opacity: 0.75;
-				}
-
 				.fa {
 					color: $color--text__primary;
 					font-size: 0.75rem;
 				}
 			}
 			@at-root #{&}__replies {
-				cursor: default;
 				width: 4rem;
 				text-align: right;
 			}