From a9358fb8a27cd3d48547f5427797702ee2780de8 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 16:02:43 +0200
Subject: Implemented navbar component; added some global stylings and changed
 the name of others; added icons

---
 src/app/components/navbar/navbar.component.css | 43 ++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/app/components/navbar/navbar.component.css

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

diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
new file mode 100644
index 0000000..58ec821
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.css
@@ -0,0 +1,43 @@
+#navbar {
+  width: 100%;
+  background-color: var(--card-bg);
+}
+
+#nav-contents {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+#nav-contents img {
+  height: 1.9em;
+  width: 1.9em;
+}
+
+@media screen and (max-width: 30rem) {
+  #nav-username {
+    display: none;
+  }
+
+  #navbar {
+    font-size: 0.8em;
+  }
+}
+
+#nav-profile-picture {
+  padding: 0.1em;
+}
+
+#nav-profile-picture img {
+  height: 1.8em;
+  width: 1.8em;
+}
+
+.nav-item {
+  margin-left: 0.2em;
+  padding: 0 0.1em;
+}
+
+.nav-item:first-child {
+  margin-left: 0;
+}
-- 
cgit v1.2.3


From 3002de560f363886fddcfa5520ef5520bf78fcc8 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 17:12:23 +0200
Subject: Improved card (post) scaling, slight modifications of global styling

---
 src/app/components/navbar/navbar.component.css  |  6 ------
 src/app/components/navbar/navbar.component.html |  2 +-
 src/app/components/post/post.component.html     |  2 +-
 src/styles.css                                  | 24 +++++++++++++++++++++++-
 4 files changed, 25 insertions(+), 9 deletions(-)

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

diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
index 58ec821..aa666b0 100644
--- a/src/app/components/navbar/navbar.component.css
+++ b/src/app/components/navbar/navbar.component.css
@@ -3,12 +3,6 @@
   background-color: var(--card-bg);
 }
 
-#nav-contents {
-  max-width: var(--max-width);
-  margin: 0 auto;
-  box-sizing: border-box;
-}
-
 #nav-contents img {
   height: 1.9em;
   width: 1.9em;
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 6bd3e66..9fcd704 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,5 +1,5 @@
 <nav id="navbar">
-	<div id="nav-contents" class="flex-row padding-smaller flex-center-align-items">
+	<div id="nav-contents" class="centered-content flex-row padding-smaller flex-center-align-items">
 		<div class="flexible" *ngIf="!loggedIn">
 			<!-- This element serves as a spacer -->
 		</div>
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 4d9fc64..7b8c1fa 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -35,7 +35,7 @@
 				</span>
 			</summary>
 		</section>
-		<section class="flex-row flexible-children justify-children-center">
+		<section class="flex-row flexible-children justify-children-center flex-center-align-children">
 			<button class="padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
 				<img src="/assets/icons/tabler-icon-message-2.svg">
 				&nbsp;Comment
diff --git a/src/styles.css b/src/styles.css
index 75fe905..af9bbeb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -140,6 +140,11 @@ input[type=file]::file-selector-button {
   justify-content: flex-end;
 }
 
+.flex-center-align-children > * {
+  display: flex;
+  align-items: center;
+}
+
 .justify-children-center > * {
   display: flex;
   justify-content: center;
@@ -220,13 +225,22 @@ input[type=file]::file-selector-button {
 /* Cards */
 
 .card {
-  margin: .5em auto;
+  margin: 0.5em auto;
   box-sizing: border-box;
   padding: var(--card-padding);
   background-color: var(--card-bg);
   position: relative;
 }
 
+@media screen and (max-width: 30rem) {
+  .card {
+    font-size: 0.8em;
+  }
+
+  .card button {
+    font-size: 0.9em;
+  }
+}
 
 /* Effects */
 
@@ -250,6 +264,14 @@ input[type=file]::file-selector-button {
   transform: scale(0.9);
 }
 
+/* Misc */
+
+.centered-content {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
 /* Inputs, the type found in login and register */
 
 .input-field {
-- 
cgit v1.2.3


From da7ee0c5d640083fcce8af38730c587c4fb15395 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 19:18:21 +0200
Subject: Fixed height of pages that were the whole window height but were also
 below the navbar

---
 src/app/components/comment-page/comment-page.component.html         | 2 +-
 src/app/components/feed/feed.component.html                         | 2 +-
 src/app/components/navbar/navbar.component.css                      | 1 +
 src/app/components/post-page/post-page.component.html               | 2 +-
 src/app/components/profile-settings/profile-settings.component.html | 2 +-
 src/app/components/profile/profile.component.html                   | 2 +-
 src/app/services/comment.service.ts                                 | 2 +-
 src/styles.css                                                      | 5 +++++
 8 files changed, 12 insertions(+), 6 deletions(-)

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

diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html
index 1b94568..553b545 100644
--- a/src/app/components/comment-page/comment-page.component.html
+++ b/src/app/components/comment-page/comment-page.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!loaded"></app-loading>
 
-<main id="content" *ngIf="loaded">
+<main id="content" class="scroll-standalone under-navbar" *ngIf="loaded">
 	<nav>
 		<button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button>
 	</nav>
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index c5c4401..a8290a1 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<main class="centered-content scroll-standalone flex-col flex-justify-start" *ngIf="dataArrived">
+<main class="centered-content scroll-standalone under-navbar flex-col flex-justify-start" *ngIf="dataArrived">
 	<form id="create-post" class="card flex-col" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
 		<textarea id="new-post-message" class="faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
 		<section id="attachments-btns" class="flex-row flex-justify-start flex-center-align-children">
diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
index aa666b0..d02e928 100644
--- a/src/app/components/navbar/navbar.component.css
+++ b/src/app/components/navbar/navbar.component.css
@@ -1,4 +1,5 @@
 #navbar {
+  height: var(--navbar-height);
   width: 100%;
   background-color: var(--card-bg);
 }
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index fe12177..ad748e3 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<main id="content" *ngIf="dataArrived">
+<main id="content" class="scroll-standalone under-navbar" *ngIf="dataArrived">
 	<nav>
 		<div class="many-buttons"  *ngIf="loggedIn">
 			<button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button>
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index dbfc747..9e0e80e 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<div id="content" *ngIf="dataArrived">
+<div id="content" class="scroll-standalone under-navbar" *ngIf="dataArrived">
 	<nav id="navigation">
 		<button class="submit-btn" (click)="goToProfile()">ᐊ Back</button>
 		<button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isAdminUser">Panel</button>
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 45e51a5..38f15e4 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<main class="scroll-standalone flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)">
+<main class="scroll-standalone under-navbar flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)">
 	<section id="user-info" class="card flex-row full-width flex-justify-center">
 		<div>
 			<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
diff --git a/src/app/services/comment.service.ts b/src/app/services/comment.service.ts
index 29707ab..f299e82 100644
--- a/src/app/services/comment.service.ts
+++ b/src/app/services/comment.service.ts
@@ -55,7 +55,7 @@ export class CommentService {
 
   getCommentRequest(id: Guid): Observable<object> {
     const options = {
-      params: new HttpParams().set('Id', id.toString())
+      params: new HttpParams().set('CommentId', id.toString())
     };
     return this._http.get(AppConstants.API_COMMENT_URL, options);
   }
diff --git a/src/styles.css b/src/styles.css
index 64aa79f..0f60fd0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -11,6 +11,7 @@
   --success: forestgreen;
   --failure: indianred;
   --faded-color: #696969;
+  --navbar-height: 2.6em;
 }
 
 html,
@@ -287,6 +288,10 @@ input[type=file]::file-selector-button {
   box-sizing: border-box;
 }
 
+.under-navbar {
+  height: calc(100% - var(--navbar-height)) !important;
+}
+
 /* Inputs, the type found in login and register */
 
 .input-field {
-- 
cgit v1.2.3