Reworked post component CSS and HTML

4 files changed, 77 insertions, 71 deletions

diff --git a/src/DevHive.Angular/.editorconfig b/src/DevHive.Angular/.editorconfig
index 3d9a482..5129152 100644
--- a/src/DevHive.Angular/.editorconfig
+++ b/src/DevHive.Angular/.editorconfig
@@ -8,6 +8,10 @@ indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.css]
+indent_size = 2
+indent_style = space
+
 [*.ts]
 quote_type = single
 
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css
index 35bbe7a..1d41398 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.css
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -1,75 +1,65 @@
 .post {
-	width: 100%;
-	display: flex;
-
-	border: 2px solid black;
-	border-radius: 10px;
-	padding: 4px;
-}
-
-.post-info {
-	flex: 1;
+  display: flex;
+  width: inherit;
 }
 
-/* Start of navigation */
+/* Author */
 
-.profile {
-	width: 25%;
-	display: flex;
-	box-sizing: border-box;
+.author {
+  display: flex;
+  margin-bottom: .2em;
 }
 
-.post-profile-pic img {
-	width: 60px;
-	height: 60px;
-	border-radius: 50%;
+.author > img {
+  width: 2.2em;
+  height: 2.2em;
+  margin-right: .2em;
+  border-radius: 50%;
+  object-fit: cover;
 }
 
-.user-info {
-	width: 100%;
-	padding-left: 5px;
+.author-info > .handle {
+  font-size: .9em;
+  color: gray;
 }
 
-/* End of navigation */
-
-
-/* Start of post */
+/* Content */
 
 .content {
+  flex: 1;
 }
 
 .message {
+  margin: .3em 0;
 }
 
-.date-created {
-	font-size: small;
-	color: grey;
-	/* TODO: Do this!!! */
+.timestamp {
+  font-size: .5em;
+  color: gray;
 }
 
-.separator {
-	width: 100%;
-}
-
-/* End of post */
-
-
-/* Start of rating */
+/* Rating */
 
 .rating {
-	height: 100%;
-	text-align: center;
-	align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: -.2em;
 }
 
-.rating button {
-	background-color: transparent;
-	background-repeat: no-repeat;
-	border: none;
+.vote {
+  flex: 1;
+  background: white;
+  font-size: 1em;
+  box-sizing: border-box;
+  border: 2px solid white;
+  border-radius: .3em;
 }
 
-.rating button:hover {
-	cursor: pointer;
+.vote:hover {
+  background: lightgray;
 }
 
-/* End of rating */
+.vote:active {
+  border-color: black;
+}
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html
index 15cfc59..c4f3f8c 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -1,30 +1,32 @@
-<div class="post">
-	<div class="post-info">
-		<nav class="profile">
-			<div class="post-profile-pic">
-				<img
-					src="assets/images/feed/profile-pic.png"
-					alt="profile-pic"
-				/>
-			</div>
-			<div class="user-info">
-				<div class="profile-names">
+<div class="post rounded-border">
+	<div class="content">
+		<div class="author">
+			<img src="assets/images/feed/profile-pic.png">
+			<div class="author-info">
+				<div class="name">
 					{{ user.firstName }} {{ user.lastName }}
 				</div>
-				<div class="profile-username">@{{ user.userName }}</div>
+				<div class="handle">
+					@{{ user.userName }}
+				</div>
 			</div>
-		</nav>
-
-		<div class="content">
-			<div class="message">Here, a cool way to style elements in CSS</div>
-			<div class="date-created">17:27 - 06 dec 2020</div>
 		</div>
-		<hr class="separator" />
-		<div class="files">idk.html</div>
+		<div class="message">
+			Your opinion on my idea?
+		</div>
+		<div class="timestamp">
+			17:41 - 27 Dec 2020
+		</div>
 	</div>
 	<div class="rating">
-		<button class="upvote">++</button>
-		<div class="number-votes">{{ votesNumber }}</div>
-		<button class="downvote">&ndash;&ndash;</button>
+		<button class="vote">
+			ᐃ
+		</button>
+		<div class="score">
+			{{ votesNumber }}
+		</div>
+		<button class="vote">
+			ᐁ
+		</button>
 	</div>
 </div>
diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css
index 9acf23f..07a0462 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -7,5 +7,15 @@ html, body {
 }
 
 body {
-  font: 21px sans-serif;
+  font: 21px sans-serif !important;
+}
+
+input:focus, button:focus {
+  outline: 0;
+}
+
+.rounded-border {
+  border: 2px solid black;
+  border-radius: .6em;
+  padding: .4em;
 }