Posts design fixes

4 files changed, 62 insertions, 184 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 d81f233..b6c1d3e 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -1,19 +1,21 @@
 #feed-page {
-	width: 75%;
-	margin-left: auto;
-	margin-right: auto;
+	width: 45%;
+	display: flex;
 
+	margin-left: auto;
+	margin-right: auto; 
 	margin-top: 10px;
+
+	place-content: center center;
+}
+
+.side-bar {
+
 }
 
 .top-bar {
-	display: inline-grid;
+	display: flex;
 	width: 100%;
-
-	grid-template-columns: 50px auto 50px;
-	grid-template-rows: 50px;
-	place-items: stretch stretch;
-	place-content: stretch stretch;
 }
 
 .top-bar img {
@@ -21,6 +23,10 @@
 	height: 50px;
 }
 
+.nav-bar-profile-pic {
+	border-radius: 50%;
+}
+
 .on-your-mind {
 	margin-left: 10px;
 	margin-right: 10px;
@@ -36,5 +42,6 @@
 }
 
 .post {
-	padding: 1% 0%;
+	padding: 1% 0%; 
+	box-sizing: border-box;
 }
\ No newline at end of file
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 44ae438..465adeb 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -1,117 +1,33 @@
 <div id="feed-page">
-	<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>
+	<nav class="side-bar">
+		<div class="side-bar-profile-pic"></div>
+		<div class="side-bar-names"></div>
+		<div class="side-bar-username"></div>
 	</nav>
-	<ul>
-		<li *ngFor="let post of posts" class="post">
-			<app-post></app-post>
-		</li>
-	</ul>
-	<!-- <div class="post">
-									<div class="post-content">
-										<div class="content">
-											<div class="author">
-												<img src="https://cdn.pixabay.com/photo/2020/03/01/12/36/fire-4892711_960_720.jpg" class="profile-picture">
-												<div class="author-info">
-													<div class="name">
-														Gosho Ivanov
-													</div>
-													<div class="handle">
-														@givanov
-													</div>
-												</div>
-											</div>
-											<div class="message">
-												Here, a cool way to style elements in CSS
-											</div>
-											<div class="timestamp">
-												17:41 - 27 Dec 2020
-											</div>
-										</div>
-										<div class="rating">
-											<div class="upvote">
-												ᐃ
-											</div>
-											<div class="score">
-												11
-											</div>
-											<div class="downvote">
-												ᐁ
-											</div>
-										</div>
-									</div>
-									<div class="attachments">
-										<div class="attachment">
-											<div class="filename">
-												index.html
-												<div class="info-reminder">
-													Click to preview
-												</div>
-											</div>
-											<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
-																</div>
-										<div class="attachment">
-											<div class="filename">
-												styles.css
-												<div class="info-reminder">
-													Click to preview
-												</div>
-											</div>
-											<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
-										</div>
-									</div>
-								</div>
-								<div class="post">
-									<div class="post-content">
-										<div class="content">
-											<div class="author">
-												<img src="https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg" class="profile-picture">
-												<div class="author-info">
-													<div class="name">
-														Petio Draganov
-													</div>
-													<div class="handle">
-														@pen15
-													</div>
-												</div>
-											</div>
-											<div class="message">
-												Your opinion on my idea?
-											</div>
-											<div class="timestamp">
-												17:41 - 27 Dec 2020
-											</div>
-										</div>
-										<div class="rating">
-											<div class="upvote">
-												ᐃ
-											</div>
-											<div class="score">
-												-2
-											</div>
-											<div class="downvote">
-												ᐁ
-											</div>
-										</div>
-									</div>
-									<div class="attachments">
-										<div class="attachment">
-											<div class="filename">
-												my_new_idea1.txt
-												<div class="info-reminder">
-													Click to preview
-												</div>
-											</div>
-											<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
-										</div>
-									</div>
-								</div> -->
+	<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>
+		</nav>
+		<ul>
+			<li *ngFor="let post of posts" class="post">
+				<app-post></app-post>
+			</li>
+		</ul>
+	</div>
 </div>
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 3a3300d..35bbe7a 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.css
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -1,13 +1,6 @@
 .post {
 	width: 100%;
-	display: grid;
-	position: relative;
-
-	grid-template-columns: 25% auto 40px;
-	grid-template-rows: 10% 10% auto 5% 10%;
-
-	/* justify-content: space-between;
-	align-items: center; */
+	display: flex;
 
 	border: 2px solid black;
 	border-radius: 10px;
@@ -15,55 +8,26 @@
 }
 
 .post-info {
-	grid-column-start: 1;
-	grid-column-end: 2;
-
-	grid-row-start: 1;
-	grid-row-end: 4;
+	flex: 1;
 }
 
 /* Start of navigation */
 
 .profile {
 	width: 25%;
-	display: grid;
+	display: flex;
 	box-sizing: border-box;
-
-	grid-column-start: 1;
-	grid-column-end: 2;
-
-	grid-row-start: 1;
-	grid-row-end: 2;
 }
 
 .post-profile-pic img {
 	width: 60px;
 	height: 60px;
-
-	grid-column-start: 1;
-	grid-column-end: 1;
-
-	grid-row-start: 1;
-	grid-row-end: 2;
+	border-radius: 50%;
 }
 
 .user-info {
 	width: 100%;
 	padding-left: 5px;
-
-	grid-column-start: 2;
-	grid-column-end: 2;
-
-	grid-row-start: 1;
-	grid-row-end: 2;
-}
-
-.profile-names {
-	grid-row: 1;
-}
-
-.profile-username {
-	grid-row: 2;
 }
 
 /* End of navigation */
@@ -72,18 +36,15 @@
 /* Start of post */
 
 .content {
-	grid-column-start: 1;
-	grid-column-end: 2;
 }
 
 .message {
-	grid-row-start: 3;
-	grid-row-end: 3;
 }
 
 .date-created {
-	grid-row-start: 4;
-	grid-row-end: 4;
+	font-size: small;
+	color: grey;
+	/* TODO: Do this!!! */
 }
 
 .separator {
@@ -93,28 +54,22 @@
 /* End of post */
 
 
-/* Start of ranking */
+/* Start of rating */
 
-.ranking {
-	width: 40px;
+.rating {
 	height: 100%;
 	text-align: center;
-
-	grid-column-start: 3;
-	grid-column-end: 3;
-
-	grid-row-start: 1;
-	grid-row-end: 4;
+	align-self: center;
 }
 
-.ranking button {
+.rating button {
 	background-color: transparent;
 	background-repeat: no-repeat;
 	border: none;
 }
 
-.ranking button:hover {
+.rating button:hover {
 	cursor: pointer;
 }
 
-/* End of ranking */
+/* End of rating */
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 ee8f495..15cfc59 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -17,12 +17,12 @@
 
 		<div class="content">
 			<div class="message">Here, a cool way to style elements in CSS</div>
-			<div class="date-created">12.01.2021</div>
+			<div class="date-created">17:27 - 06 dec 2020</div>
 		</div>
 		<hr class="separator" />
 		<div class="files">idk.html</div>
 	</div>
-	<div class="ranking">
+	<div class="rating">
 		<button class="upvote">++</button>
 		<div class="number-votes">{{ votesNumber }}</div>
 		<button class="downvote">&ndash;&ndash;</button>