UI tweaks

frontend/src/components/HeartButton.vue

@@ -163,9 +163,10 @@
 		@at-root #{&}__count {
 			@include user-select(none);
 
-			position: relative;
-			bottom: 0.0625rem;
 			cursor: default;
+			font-size: 0.85rem;
+			position: relative;
+			bottom: 0.1rem;
 		}
 
 		@at-root #{&}__heart {
@@ -174,7 +175,7 @@
 			cursor: pointer;
 			color: $color__gray--darkest;
 			transition: transform 0.2s, text-shadow 0.2s, color 0.2s, filter 0.2s;
-			font-size: 1.125rem;
+			font-size: 1rem;
 
 			&:hover {
 				filter: brightness(0.9);

frontend/src/components/MoreThreads.vue

@@ -60,6 +60,7 @@
 		width: 80%;
 		padding: 1rem;
 		margin-top: 1.5rem;
+		border: thin solid $color__gray--darker;
 
 		@at-root #{&}__header {
 			font-size: 1.5rem;
@@ -100,6 +101,7 @@
 		@at-root #{&}__empty {
 			padding: 1rem;
 			font-size: 1.5rem;
+			color: $color__text--primary;
 		}
 	}
 
@@ -107,6 +109,9 @@
 		.more_threads {
 			width: 100%;
 			margin-bottom: -6.5rem;
+			border-radius: 0;
+			border-left: 0;
+			border-right: 0;
 
 			@at-root #{&}__empty {
 				margin-top: 0;

frontend/src/components/PostReply.vue

@@ -90,7 +90,6 @@
 		@at-root #{&}__display {
 			display: inline-flex;
 			align-items: baseline;
-			border: 0.125rem solid $color__gray--darkest;
 			justify-content: center;
 			position: relative;
 			border-radius: 1rem;
@@ -103,9 +102,10 @@
 		@at-root #{&}__letter {
 			height: 1.25rem;
 			width: 1.25rem;
-			line-height: 1.25rem;
-			@include text($font--role-emphasis, 0.9rem)
-			text-align: center;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			@include text($font--role-emphasis, 1rem)
 			border-radius: 100%;
 			background-color: $color__gray--darkest;
 			color: #fff;

frontend/src/components/ThreadDisplay.vue

@@ -104,7 +104,7 @@
 		border-radius: 0.25rem;
 		transition: background-color 0.2s, box-shadow 0.2s;
 		position: relative;
-		@extend .shadow_border;
+		border: thin solid $color__gray--darker;
 
 		&:hover {
 			@extend .shadow_border--hover;

frontend/src/components/ThreadPost.vue

@@ -5,8 +5,8 @@
 			"post--highlighted": highlight,
 			"post--selected": selected
 		}'
-		@mouseenter='setPostFooterState(true)'
-		@mouseleave='setPostFooterState(false)'
+		@mouseenter='hover = true'
+		@mouseleave='hover = false'
 
 		@click='goToPost'
 	>
@@ -27,24 +27,26 @@
 		<report-post-modal v-model='showReportPostModal' :post-id='post.id'></report-post-modal>
 
 		<div class='post__meta_data'>
-			<avatar-icon :user='post.User' class='post__avatar'></avatar-icon>
-			<div class='post__thread' v-if='showThread' @click.stop='goToThread'>
-				In thread <span class='post__thread__name'>{{post.Thread.name}}</span>
-				&nbsp;&middot;&nbsp;
+			<div style='display: inline-flex;'>
+				<avatar-icon :user='post.User' class='post__avatar'></avatar-icon>
+				<div class='post__thread' v-if='showThread' @click.stop='goToThread'>
+					In thread <span class='post__thread__name'>{{post.Thread.name}}</span>
+					&nbsp;&middot;&nbsp;
+				</div>
+				<div class='post__user' v-else>{{username}}</div>
+				<replying-to
+					style='margin-right: 0.5rem;'
+					v-if='post.replyingToUsername'
+					:replyId='post.replyId'
+					:username='post.replyingToUsername'
+					@click='$emit("goToPost", post.replyId, true)'
+				></replying-to>
 			</div>
-			<div class='post__user' v-else>{{username}}</div>
-			<replying-to
-				style='margin-right: 0.5rem;'
-				v-if='post.replyingToUsername'
-				:replyId='post.replyId'
-				:username='post.replyingToUsername'
-				@click='$emit("goToPost", post.replyId, true)'
-			></replying-to>
 			<div class='post__date'>{{post.createdAt | formatDate('time|date', ', ')}}</div>
 		</div>
 		<div class='post__date post__date--mobile'>{{post.createdAt | formatDate('time|date', ', ')}}</div>
 		<div class='post__content' v-html='post.content'></div>
-		<div class='post__footer' :class='{ "post__footer--show": hover }'>
+		<div class='post__footer'>
 			<div
 				class='post__footer_group'
 			>
@@ -66,24 +68,28 @@
 				
 			</div>
 			<div
-				class='post__footer_group'>
-				<div class='post__action post__share' @click.stop='setShareModalState(true)'>Share</div>
+				class='post__footer_group post__actions'
+				:class='{ "post__actions--show": showActions }'
+			>
+				<div class='post__action post__share' @click.stop='setShareModalState(true)'>share</div>
 				<div
 					class='post__action'
 					@click.stop='setShowReportPostModal(true)'
 					v-if='$store.state.username && !post.removed'
 				>
-					Report
+					report
 				</div>
 				<div
 					class='post__action post__reply'
 					v-if='$store.state.username && showReply'
 					@click.stop='$emit("reply", post.id, username)'
 				>
-					Reply
+					reply
 				</div>
 			</div>
 		</div>
+		<div class='post__replies'>
+		</div>
 	</div>
 </template>
 
@@ -135,12 +141,12 @@
 				} else {
 					return '[deleted]'
 				}
+			},
+			showActions () {
+				return this.hover || this.showShareModal || this.showReportPostModal
 			}
 		},
 		methods: {
-			setPostFooterState (state) {
-				this.hover = state
-			},
 			setShareModalState (val) {
 				this.showShareModal = val
 			},
@@ -198,7 +204,7 @@
 
 	.post {
 		position: relative;
-		border-bottom: thin solid $color__gray--primary;
+		border-bottom: thin solid $color__gray--darker;
 		transition: background-color 0.5s;
 		margin: 0.5rem -0.5rem;
 		padding: 0 0.5rem;
@@ -246,6 +252,7 @@
 
 		@at-root #{&}__meta_data {
 			display: flex;
+			justify-content: space-between;
 			padding-top: 0.75rem;
 			position: relative;
 			margin-left: 4rem;
@@ -271,8 +278,6 @@
 			}
 		}
 		@at-root #{&}__date {
-			color: $color__gray--darkest;
-			margin-right: 0.5rem;
 
 			@at-root #{&}--mobile {
 				display: none;
@@ -286,14 +291,8 @@
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			//opacity: 0.6;
 			transition: opacity 0.2s;
 
-			@at-root #{&}--show {
-				opacity: 1;
-				transition: opacity 0.2s;
-			}
-
 			@at-root #{&}_sub_group {
 				display: flex;
 				align-items: baseline;
@@ -303,6 +302,9 @@
 					font-variant: small-caps;
 					margin: 0 0.25rem;
 					margin-left: 0;
+					font-size: 0.9rem;
+					position: relative;
+					bottom: 0.1rem;
 				}
 			}
 
@@ -316,6 +318,10 @@
 			color: $color__darkgray--primary;
 			cursor: pointer;
 			margin-right: 0.75rem;
+			font-size: 0.9rem;
+			font-variant: small-caps;
+			position: relative;
+			bottom: 0.1rem;
 
 			transition: all 0.2s;
 
@@ -323,10 +329,26 @@
 				color: $color__darkgray--darkest;
 			}
 		}
+		@at-root #{&}__actions {
+			opacity: 0;
+
+			@at-root #{&}--show {
+				opacity: 1;
+				transition: opacity 0.2s;
+			}
+		}
 	}
 
 	@media (max-width: 420px) {
 		.post {
+			@at-root #{&}__actions {
+				opacity: 1;
+			}
+
+			@at-root #{&}__content {
+				padding: 0 0.5rem;
+			}
+
 			@at-root #{&}__date {
 				display: none;
 

frontend/src/components/routes/Index.vue

@@ -293,11 +293,11 @@
 	.threads_main__side_bar {
 		width: 12rem;
 		height: 0%;
-		@extend .shadow_border;
 		background: #fff;
 		margin-top: 0.15rem;
 		margin-right: 1rem;
 		border-radius: 0.25rem;
+		border: thin solid $color__gray--darker;
 		padding: 0.5rem 0 1rem 1rem;
 
 		@at-root #{&}__title {

frontend/src/components/routes/Thread.vue

@@ -390,7 +390,7 @@
 	}
 </script>
 
-<style lang='scss' >
+<style lang='scss' scoped>
 	@import '../../assets/scss/variables.scss';
 
 	.thread_side_bar {
@@ -455,17 +455,25 @@
 		background-color: #fff;
 		padding: 0.5rem 1rem;
 		border-radius: 0.25rem;
+		border: thin solid $color__gray--darker;
 	}
 
 
 
 	@media (max-width: 420px) {
+		.route_container {
+			width: 100%;
+			margin: 0;
+		}
+
 		.thread_side_bar {
 			display: flex;
 			position: initial;
 			flex-direction: row;
 			align-items: flex-end;
 
+			padding-left: 1rem;
+
 			> * {
 				margin: 0 0.5rem;
 			}
@@ -478,7 +486,9 @@
 		.posts {
 			width: 100%;
 			padding: 0.25rem 0.5rem;
-			box-shadow: 0 0 0.3rem rgba(175, 175, 175, 0.25);
+			border-radius: 0;
+			border-left: 0;
+			border-right: 0;
 			overflow: hidden;
 		}
 		.locked_thread {
@@ -487,6 +497,7 @@
 
 		.thread_header__thread_title {
 			font-size: 2rem;
+			padding-left: 1rem;
 			width: 100%;
 
 			@at-root #{&}--app_header {

frontend/src/components/routes/User.vue

@@ -119,6 +119,7 @@
 		background-color: #fff;
 		padding: 1rem;
 		border-radius: 0.25rem;
+		border: thin solid $color__gray--darker;
 
 		@at-root #{&}__icon {
 			height: 6rem;

frontend/src/components/routes/UserPosts.vue

@@ -117,6 +117,7 @@
 		background: #fff;
 		border-radius: 0.25rem;
 		padding: 1rem;
+		border: thin solid $color__gray--darker;
 		
 		@at-root #{&}__title {
 			font-size: 1.5rem;