From 97f3e372bd96195e6f243358ef7063a63278f699 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 19:07:24 +0200
Subject: Major redesign of profile component styling

---
 src/app/components/profile/profile.component.css | 109 +++--------------------
 1 file changed, 11 insertions(+), 98 deletions(-)

(limited to 'src/app/components/profile/profile.component.css')

diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css
index ebcd406..c14fd00 100644
--- a/src/app/components/profile/profile.component.css
+++ b/src/app/components/profile/profile.component.css
@@ -1,105 +1,18 @@
-* {
-  box-sizing: border-box;
+#user-info {
+  font-size: 1.3em;
 }
 
-#content {
-  max-width: 22em;
-  justify-content: start;
+#profile-picture {
+  height: 5rem;
+  width: 5rem;
 }
 
-hr {
-  width: calc(100% - 1em);
-  color: black;
-  border: 1px solid black;
+.sec-info-title {
+  padding-bottom: 0.2em;
+  margin-bottom: 0.3em;
 }
 
-form {
-  width: 100%;
-}
-
-/* Navigation bar (for loggedin user) */
-
-#navigation {
-  display: flex;
-  width: 100%;
-}
-
-.submit-btn {
-  flex: 1;
-  margin-top: 0;
-  margin-left: .5em;
-  font-size: inherit;
-}
-
-#navigation > .submit-btn:first-child {
-  margin-left: 0;
-}
-
-/* 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;
-  text-align: 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;
-}
-
-#add-friend, #loggedin-password {
-  flex: 0 !important;
-  margin-top: .4em;
-  max-width: 8em;
-  font-size: .6em !important;
-}
-
-#loggedin-password {
-  max-width: 100%;
-}
-
-/* Languages and technologies */
-
-.secondary-info {
-  margin-top: .25em;
-  margin-bottom: .25em;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-/* Posts */
-
-#no-posts {
-  width: 100%;
-  text-align: center;
-  color: gray;
-  margin-top: .2em;
-}
-
-#posts {
-  width: 100%;
-  height: 100%;
+.sec-info {
+  background-color: #424242;
+  margin: 0 0.3em 0.3em 0;
 }
-- 
cgit v1.2.3


From 1721bb8f98ce8580fd188cd4c947e69641971ad5 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 19:44:03 +0200
Subject: Fixed spacing around user secondary info

---
 src/app/components/profile/profile.component.css  |  5 +++++
 src/app/components/profile/profile.component.html | 22 +++++++++++-----------
 2 files changed, 16 insertions(+), 11 deletions(-)

(limited to 'src/app/components/profile/profile.component.css')

diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css
index c14fd00..22ad320 100644
--- a/src/app/components/profile/profile.component.css
+++ b/src/app/components/profile/profile.component.css
@@ -7,12 +7,17 @@
   width: 5rem;
 }
 
+.sec-info-card {
+  padding-bottom: calc(var(--card-padding) - 0.3em);
+}
+
 .sec-info-title {
   padding-bottom: 0.2em;
   margin-bottom: 0.3em;
 }
 
 .sec-info {
+  width: fit-content;
   background-color: #424242;
   margin: 0 0.3em 0.3em 0;
 }
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 4bb6752..2a8786d 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -21,30 +21,30 @@
 			</form>
 		</div>
 	</section>
-	<section class="card flex-col full-width">
+	<section class="card sec-info-card flex-col full-width">
 		<div class="sec-info-title faded-slim-border border-bottom-only">
 			Languages
 		</div>
-		<span *ngIf="user.languages.length === 0">
+		<div *ngIf="user.languages.length === 0">
 			None
-		</span>
+		</div>
 		<div class="flex-row" *ngFor="let lang of user.languages">
-			<span class="sec-info border-radius-normal padding-small">
+			<div class="sec-info border-radius-normal padding-small">
 				{{ lang.name }}
-			</span>
+			</div>
 		</div>
 	</section>
-	<section class="card flex-col full-width">
+	<section class="card sec-info-card flex-col full-width">
 		<div class="sec-info-title faded-slim-border border-bottom-only">
 			Technologies
 		</div>
-		<span *ngIf="user.technologies.length === 0">
+		<div *ngIf="user.technologies.length === 0">
 			None
-		</span>
-		<div *ngFor="let tech of user.technologies">
-			<span class="sec-info border-radius-normal padding-small">
+		</div>
+		<div  class="flex-row" *ngFor="let tech of user.technologies">
+			<div class="sec-info border-radius-normal padding-small">
 				{{ tech.name }}
-			</span>
+			</div>
 		</div>
 	</section>
 	<hr class="card-hr">
-- 
cgit v1.2.3


From 30fa7e2ee78d7efb7f404a7f440d60eb86b98f2f Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 19:46:05 +0200
Subject: Fixed bottom border of secondary info cards not being proper width
 when none message is shown

---
 src/app/components/profile/profile.component.css  | 4 ++++
 src/app/components/profile/profile.component.html | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/app/components/profile/profile.component.css')

diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css
index 22ad320..c7e112f 100644
--- a/src/app/components/profile/profile.component.css
+++ b/src/app/components/profile/profile.component.css
@@ -16,6 +16,10 @@
   margin-bottom: 0.3em;
 }
 
+.none-message {
+  margin-bottom: 0.3em;
+}
+
 .sec-info {
   width: fit-content;
   background-color: #424242;
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 2a8786d..7632620 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -25,7 +25,7 @@
 		<div class="sec-info-title faded-slim-border border-bottom-only">
 			Languages
 		</div>
-		<div *ngIf="user.languages.length === 0">
+		<div class="none-message" *ngIf="user.languages.length === 0">
 			None
 		</div>
 		<div class="flex-row" *ngFor="let lang of user.languages">
@@ -38,7 +38,7 @@
 		<div class="sec-info-title faded-slim-border border-bottom-only">
 			Technologies
 		</div>
-		<div *ngIf="user.technologies.length === 0">
+		<div class="none-message" *ngIf="user.technologies.length === 0">
 			None
 		</div>
 		<div  class="flex-row" *ngFor="let tech of user.technologies">
-- 
cgit v1.2.3