Reworked feed component

5 files changed, 98 insertions, 56 deletions

diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css
index d19330e..ec2c3d6 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -1,46 +1,87 @@
 #feed-page {
-	width: 45%;
-	display: flex;
+  max-width: 40em;
+  margin: 0 auto;
+  border: .5em solid white;
+  border-bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+}
+
+@media screen and (max-width: 750px) {
+  #profile-bar {
+    display: none !important;
+  }
+  #top-bar-profile-pic {
+    display: initial;
+  }
+}
+@media screen and (min-width: 750px) {
+  #profile-bar {
+    display: initial;
+  }
+  #top-bar-profile-pic {
+    display: none !important;
+  }
+}
+
+/* Content */
 
-	margin-left: auto;
-	margin-right: auto; 
-	margin-top: 10px;
+#content {
+  flex: 1;
+}
 
-	place-content: center center;
+#posts {
+  max-height: calc(100vh - 3em);
+  overflow-y: auto;
 }
 
-.side-bar {
+/* Profile bar */
+
+#profile-bar {
+  width: 20%;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  margin-right: .5em;
+  padding-bottom: 1em;
 }
 
-.top-bar {
-	display: flex;
-	width: 100%;
+#profile-bar-profile-pic {
+  width: 100%;
+  box-sizing: border-box;
+  padding: .5em;
 }
 
-.top-bar img {
-	width: 50px;
-	height: 50px;
+/* Top bar */
+
+#top-bar {
+  display: flex;
 }
 
-.nav-bar-profile-pic {
-	border-radius: 50%;
+#top-bar img {
+  height: 1.6em;
+  width: 1.6em;
 }
 
-.on-your-mind {
-	margin-left: 10px;
-	margin-right: 10px;
+#top-bar-profile-pic {
+  height: 2.5em;
+  width: 2.5em;
+  margin-right: .5em;
 }
 
-.on-your-mind input {
-	box-sizing: border-box;
-	width: 100%;
-	height: 100%;
+#top-bar-profile-pic > img {
+  height: inherit;
+  width: inherit;
+}
 
-	border: 2px solid black;
-	border-radius: 10px;
+#top-bar-create-post {
+  flex: 1;
+  font-size: inherit;
 }
 
-.post {
-	padding: 1% 0%; 
-	box-sizing: border-box;
-}
\ No newline at end of file
+#top-bar-open-chat {
+  /* Until implemented */
+  display: none;
+}
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html
index 465adeb..7375587 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -1,30 +1,24 @@
 <div id="feed-page">
-	<nav class="side-bar">
-		<div class="side-bar-profile-pic"></div>
-		<div class="side-bar-names"></div>
-		<div class="side-bar-username"></div>
+	<nav id="profile-bar" class="rounded-border">
+		<img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
+		<div id="profile-bar-name">
+			Static
+		</div>
+		<div id="profile-bar-username">
+			@static
+		</div>
 	</nav>
-	<div class="content">
-		<nav class="top-bar">
-			<div class="nav-bar-profile-pic">
-				<a href=""
-					><img
-						src="assets/images/feed/profile-pic.png"
-						alt="profile-pic"
-				/></a>
-			</div>
-			<div class="on-your-mind">
-				<a href=""
-					><input type="text" placeholder="What's on yo' mind?"
-				/></a>
-			</div>
-			<div class="nav-bar-chat-pic">
-				<a href=""
-					><img src="assets/images/feed/chat-pic.png" alt="chat-pic"
-				/></a>
-			</div>
+	<div id="content">
+		<nav id="top-bar">
+			<a id="top-bar-profile-pic" class="round-image" href="">
+				<img class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
+			</a>
+			<input id="top-bar-create-post" class="rounded-border" type="text" placeholder="What's on your mind?"/>
+			<a id="top-bar-open-chat" href="">
+				<img src="assets/images/feed/chat-pic.png" alt=""/>
+			</a>
 		</nav>
-		<ul>
+		<ul id="posts">
 			<li *ngFor="let post of posts" class="post">
 				<app-post></app-post>
 			</li>
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 1d41398..e53eb2c 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.css
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -1,6 +1,7 @@
 .post {
   display: flex;
   width: inherit;
+  margin: .5em 0;
 }
 
 /* Author */
@@ -14,8 +15,6 @@
   width: 2.2em;
   height: 2.2em;
   margin-right: .2em;
-  border-radius: 50%;
-  object-fit: cover;
 }
 
 .author-info > .handle {
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 c4f3f8c..b6fab55 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -1,7 +1,7 @@
 <div class="post rounded-border">
 	<div class="content">
 		<div class="author">
-			<img src="assets/images/feed/profile-pic.png">
+			<img class="round-image" src="assets/images/feed/profile-pic.png">
 			<div class="author-info">
 				<div class="name">
 					{{ user.firstName }} {{ user.lastName }}
diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css
index 07a0462..2bd0a3b 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -1,11 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
 @import "./reset.css";
 
+:root {
+  --bg-color: white;
+}
+
 html, body {
 	height: 100%;
 	margin: 0;
 }
-
 body {
   font: 21px sans-serif !important;
 }
@@ -19,3 +22,8 @@ input:focus, button:focus {
   border-radius: .6em;
   padding: .4em;
 }
+
+.round-image {
+  border-radius: 50%;
+  object-fit: cover;
+}