From 9ea2a850cfabaee5f6f56ff57e4729e2615729da Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sat, 16 Jan 2021 13:18:41 +0200
Subject: Added a static design for the profile page

---
 .../app/components/profile/profile.component.css   | 69 ++++++++++++++++++++++
 .../app/components/profile/profile.component.html  | 36 ++++++++++-
 2 files changed, 104 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css
index e69de29..4b6dde0 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.css
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css
@@ -0,0 +1,69 @@
+* {
+  box-sizing: border-box;
+}
+
+#content {
+  max-width: 22em;
+  justify-content: start;
+}
+
+/* Top card */
+
+#main-info {
+  display: flex;
+  width: 100%;
+  margin-bottom: .25em
+}
+
+#main-info > img {
+  width: 5em;
+  height: 5em;
+}
+
+#other-main-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#other-main-info > * {
+  font-size: 1.4em;
+}
+
+#other-main-info *:nth-child(1) {
+  margin-top: auto;
+}
+
+#other-main-info *:nth-last-child(1) {
+  margin-bottom: auto;
+}
+
+/* Languages and technologies */
+
+.secondary-info {
+  margin-top: .25em;
+  margin-bottom: .25em;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.user-language, .user-technology {
+  border-radius: .4em;
+  background-color: lightgrey;
+  padding: .2em;
+  margin: 0 .2em;
+}
+
+/* Posts */
+
+#posts {
+  width: 100%;
+}
+
+#posts > hr {
+  width: calc(100% - 1em);
+  color: black;
+  border: 1px solid black;
+}
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html
index 9df0576..ddf4a21 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.html
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html
@@ -1 +1,35 @@
-<p>profile works!</p>
+<div id="content">
+	<div id="main-info" class="rounded-border">
+		<img class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
+		<div id="other-main-info">
+			<div id="name">
+				Gosho Trapov
+			</div>
+			<div id="username">
+				@gosho_trapov
+			</div>
+		</div>
+	</div>
+	<div class="secondary-info rounded-border">
+		Languages:
+		<div class="user-language">
+			C#
+		</div>
+		<div class="user-language">
+			TypeScript
+		</div>
+	</div>
+	<div class="secondary-info rounded-border">
+		Technologies:
+		<div class="user-technology">
+			.NET 5
+		</div>
+		<div class="user-technology">
+			Angular
+		</div>
+	</div>
+	<div id="posts">
+		<hr>
+		Posts go here
+	</div>
+</div>
-- 
cgit v1.2.3