Finished feed styling and fucked up post styling(I hate css)

12 files changed, 376 insertions, 251 deletions

diff --git a/src/DevHive.Angular/.editorconfig b/src/DevHive.Angular/.editorconfig
index 59d9a3a..3d9a482 100644
--- a/src/DevHive.Angular/.editorconfig
+++ b/src/DevHive.Angular/.editorconfig
@@ -3,8 +3,8 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 
diff --git a/src/DevHive.Angular/src/app/app.component.html b/src/DevHive.Angular/src/app/app.component.html
index bb3fbbb..2bb3494 100644
--- a/src/DevHive.Angular/src/app/app.component.html
+++ b/src/DevHive.Angular/src/app/app.component.html
@@ -1,7 +1,7 @@
 <div class="main">
   <!-- <app-login></app-login> -->
-  <app-register></app-register>
-  <!-- <app-feed></app-feed> -->
+  <!-- <app-register></app-register> -->
+  <app-feed></app-feed>
 </div>
 
 <!-- <router-outlet></router-outlet> -->
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 7715234..d81f233 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -1,109 +1,40 @@
-#feed {
-	max-width: 50%;
+#feed-page {
+	width: 75%;
 	margin-left: auto;
 	margin-right: auto;
-}
-	
+
+	margin-top: 10px;
+}
+
+.top-bar {
+	display: inline-grid;
+	width: 100%;
+
+	grid-template-columns: 50px auto 50px;
+	grid-template-rows: 50px;
+	place-items: stretch stretch;
+	place-content: stretch stretch;
+}
+
+.top-bar img {
+	width: 50px;
+	height: 50px;
+}
+
+.on-your-mind {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.on-your-mind input {
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+
+	border: 2px solid black;
+	border-radius: 10px;
+}
+
 .post {
-	margin: 1em 0;
-}
-	
-.post-content {
-	background-color: var(--dark-blue);
-	border: 2px solid var(--orange);
-	border-radius: 0.5em;
-	padding: 0.6em;
-	overflow: hidden;
-	display: flex;
-}
-	
-.author {
-	margin-bottom: 0.5em;
-	display: flex;
-	position: relative;
-}
-	
-.profile-picture {
-	height: 2.1em;
-	width: 2.1em;
-	border-radius: 50%;
-	margin-right: 0.5em;
-	object-fit: cover;
-}
-	
-.author-info > .name {
-	font-weight: bold;
-}
-	
-.author-info > .handle {
-	font-size: 0.9em;
-}
-	
-.post-content > .rating {
-	margin-left: auto;
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-}
-	
-.timestamp {
-	font-size: 0.5em;
-	color: var(--gray);
-	padding-top: 0.8em;
-}
-	
-.score {
-	margin-top: auto;
-	margin-bottom: auto;
-}
-	
-.attachments {
-	position: relative;
-	z-index: -1;
-	display: flex;
-}
-	
-.attachment {
-	background-color: var(--dark-blue);
-	border: 1px solid var(--orange);
-	border-bottom-width: 2px;
-	border-radius: 0 0 0.5em 0.5em;
-	padding: 0.5em;
-	margin-top: -0.6em;
-	padding-top: 1em;
-	flex: 1;
-	display: flex;
-	overflow: hidden;
-}
-	
-.attachment:nth-of-type(1) {
-	border-left-width: 2px;
-}
-	
-.attachment:nth-last-of-type(1) {
-	border-right-width: 2px;
-}
-	
-.filename {
-	font-style: italic;
-	text-shadow: 0.1em 0.1em 0.1em black;
-}
-	
-.file-picture {
-	height: 1.9em;
-	width: 1.9em;
-	object-fit: cover;
-	margin-left: auto;
-}
-	
-.info-reminder {
-	font-size: 0.5em;
-	color: var(--gray);
-	padding-top: 0.2em;
-	align-self: flex-end;
-}
-	
-.loading-more {
-	text-align: center;
-}
-	
\ No newline at end of file
+	padding: 1% 0%;
+}
\ 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 96864c7..44ae438 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -1,107 +1,117 @@
-<div id="feed">
+<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>
 	<ul>
-		<li *ngFor="let post of posts; let c = count;">
-			<h1> {{ c }} post</h1>
-			<!-- <app-post class="post"></app-post> -->
+		<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 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="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>
\ No newline at end of file
+									<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>
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
index a0efd17..fa2575f 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import { FeedService } from 'src/app/services/feed.service';
 import { PostComponent } from '../post/post.component';
 
@@ -8,10 +9,19 @@ import { PostComponent } from '../post/post.component';
   styleUrls: ['./feed.component.css']
 })
 export class FeedComponent implements OnInit {
-  public posts: PostComponent[] = [ ];
+  private _title = 'Feed';
+  public posts: PostComponent[];
 
-  constructor(private service: FeedService) { }
+  constructor(private titleService: Title, private service: FeedService) {
+    this.titleService.setTitle(this._title);
+   }
 
   ngOnInit(): void {
+    this.posts = [
+      new PostComponent(),
+      new PostComponent(),
+      new PostComponent(),
+      new PostComponent(),
+    ]
   }
 }
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 e69de29..3a3300d 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.css
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -0,0 +1,120 @@
+.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; */
+
+	border: 2px solid black;
+	border-radius: 10px;
+	padding: 4px;
+}
+
+.post-info {
+	grid-column-start: 1;
+	grid-column-end: 2;
+
+	grid-row-start: 1;
+	grid-row-end: 4;
+}
+
+/* Start of navigation */
+
+.profile {
+	width: 25%;
+	display: grid;
+	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;
+}
+
+.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 */
+
+
+/* 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;
+}
+
+.separator {
+	width: 100%;
+}
+
+/* End of post */
+
+
+/* Start of ranking */
+
+.ranking {
+	width: 40px;
+	height: 100%;
+	text-align: center;
+
+	grid-column-start: 3;
+	grid-column-end: 3;
+
+	grid-row-start: 1;
+	grid-row-end: 4;
+}
+
+.ranking button {
+	background-color: transparent;
+	background-repeat: no-repeat;
+	border: none;
+}
+
+.ranking button:hover {
+	cursor: pointer;
+}
+
+/* End of ranking */
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 71b500c..ee8f495 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -1 +1,30 @@
-<p>post works!</p>
+<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">
+					{{ user.firstName }} {{ user.lastName }}
+				</div>
+				<div class="profile-username">@{{ 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">12.01.2021</div>
+		</div>
+		<hr class="separator" />
+		<div class="files">idk.html</div>
+	</div>
+	<div class="ranking">
+		<button class="upvote">++</button>
+		<div class="number-votes">{{ votesNumber }}</div>
+		<button class="downvote">&ndash;&ndash;</button>
+	</div>
+</div>
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts
index c61410b..72c7aec 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.ts
+++ b/src/DevHive.Angular/src/app/components/post/post.component.ts
@@ -1,15 +1,28 @@
 import { Component, OnInit } from '@angular/core';
+import { Guid } from 'guid-typescript';
+import { User } from 'src/models/identity/user';
 
 @Component({
-  selector: 'app-post',
-  templateUrl: './post.component.html',
-  styleUrls: ['./post.component.css']
+	selector: 'app-post',
+	templateUrl: './post.component.html',
+	styleUrls: ['./post.component.css'],
 })
 export class PostComponent implements OnInit {
+	public user: User;
+	public votesNumber: number;
 
-  constructor() { }
+	constructor() {}
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+		//Fetch data in post service
+		this.user = new User(
+			Guid.create(),
+			'gosho_trapov',
+			'Gosho',
+			'Trapov',
+			'assets/images/feed/profile-pic.png'
+		);
 
+		this.votesNumber = 23;
+	}
 }
diff --git a/src/DevHive.Angular/src/assets/images/feed/chat-pic.png b/src/DevHive.Angular/src/assets/images/feed/chat-pic.png
new file mode 100644
index 0000000..60241fa
--- /dev/null
+++ b/src/DevHive.Angular/src/assets/images/feed/chat-pic.png
diff --git a/src/DevHive.Angular/src/assets/images/feed/profile-pic.png b/src/DevHive.Angular/src/assets/images/feed/profile-pic.png
new file mode 100644
index 0000000..87f67f5
--- /dev/null
+++ b/src/DevHive.Angular/src/assets/images/feed/profile-pic.png
diff --git a/src/DevHive.Angular/src/models/identity/user.ts b/src/DevHive.Angular/src/models/identity/user.ts
index 7fcda42..e16c908 100644
--- a/src/DevHive.Angular/src/models/identity/user.ts
+++ b/src/DevHive.Angular/src/models/identity/user.ts
@@ -1,15 +1,52 @@
 import { Guid } from "guid-typescript";
 
 export class User {
-	private id: Guid;
-	private userName: string;
-	private firstName: string;
-	private lastName: string;
+	private _id : Guid;
+	private _lastName : string;
+	private _firstName : string;
+	private _userName : string;
+	private _imageUrl : string;
 
-	constructor(id: Guid, userName: string, firstName: string, lastName: string) {
+	constructor(id: Guid, userName: string, firstName: string, lastName: string, imageUrl: string) {
 		this.id = id;
 		this.userName = userName;
 		this.firstName = firstName;
 		this.lastName = lastName;
 	}
+
+	
+	public get id() : Guid {
+		return this._id;
+	}
+	public set id(v : Guid) {
+		this._id = v;
+	}
+	
+	public get userName() : string {
+		return this._userName;
+	}
+	public set userName(v : string) {
+		this._userName = v;
+	}
+	
+	public get firstName() : string {
+		return this._firstName;
+	}
+	public set firstName(v : string) {
+		this._firstName = v;
+	}
+	
+	public get lastName() : string {
+		return this._lastName;
+	}
+	public set lastName(v: string) {
+		this._lastName = v;
+	}
+	
+	public get imageUrl() : string {
+		return this._imageUrl;
+	}
+	public set imageUrl(v : string) {
+		this._imageUrl = v;
+	}
 }
diff --git a/src/DevHive.Angular/src/test.ts b/src/DevHive.Angular/src/test.ts
deleted file mode 100644
index 50193eb..0000000
--- a/src/DevHive.Angular/src/test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);