Major redesign of post page component and removed post edit and delete functionality, as well as old navbar from it

6 files changed, 30 insertions, 168 deletions

diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css
index a0b6d2e..295a379 100644
--- a/src/app/components/feed/feed.component.css
+++ b/src/app/components/feed/feed.component.css
@@ -7,11 +7,6 @@ section:empty {
   margin-top: 1em;
 }
 
-#new-post-message {
-  min-height: 1.5em;
-  resize: vertical;
-}
-
 #attachments-btns img, .file-button > input {
   height: 1.4em;
   width: 1.4em;
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index 3fd778a..ee9d89b 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -4,7 +4,7 @@
 
 <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>
+		<textarea class="textarea-new-msg faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
 		<section class="flex-row flex-justify-start flex-center-align-children top-bot-padding-bigger">
 			<div class="file-button hover-half-opacity click-effect">
 				<img src="/assets/icons/tabler-icon-paperclip.svg">
diff --git a/src/app/components/post-page/post-page.component.css b/src/app/components/post-page/post-page.component.css
index 4f2ae60..7405240 100644
--- a/src/app/components/post-page/post-page.component.css
+++ b/src/app/components/post-page/post-page.component.css
@@ -1,60 +1,3 @@
-#content {
-  justify-content: flex-start !important;
-}
-
-#content > * {
-  width: 100%;
-}
-
-.many-buttons {
-  width: 100%;
-  display: flex;
-}
-
-.many-buttons > * {
-  flex: 1;
-  margin-right: .3em;
-}
-
-.many-buttons > *:last-of-type {
-  margin-right: 0;
-}
-
-#editPost {
-  display: flex;
-  position: relative;
-}
-
-#new-message-input {
-  flex: 1;
-  box-sizing: border-box;
-}
-
-#file-upload {
-  font-size: inherit;
-  color: transparent;
-  width: 1.99em;
-  height: 1.99em;
-  margin-left: .3em;
-}
-
-#file-upload:hover {
-  cursor: pointer;
-}
-
-#file-upload::-webkit-file-upload-button {
-  visibility: hidden;
-}
-
-#attachment-img {
-  height: 1.99em;
-  width: 1.99em;
-  position: absolute;
-  right: 0;
-  pointer-events: none;
-}
-
-.submit-btn {
-  margin: 0 auto;
-  margin-bottom: .5em;
+main {
+  padding-top: 0.5em;
 }
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index ad748e3..529d971 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -2,38 +2,18 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<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>
-			<button class="submit-btn" type="submit" (click)="backToProfile()">ᐊ Back to profile</button>
-		</div>
-		<button class="submit-btn" type="submit" (click)="toLogin()" *ngIf="!loggedIn">Login</button>
-	</nav>
+<main class="centered-content scroll-standalone under-navbar flex-col" *ngIf="dataArrived">
 	<app-post [paramId]="postId.toString()" [index]="0"></app-post>
-	<div class="many-buttons" *ngIf="editable">
-		<button class="submit-btn" (click)="editPost()">Edit post</button>
-		<button class="submit-btn delete-btn" (click)="deletePost()">Delete post</button>
-	</div>
-	<form  id="editPost" [formGroup]="editPostFormGroup"  *ngIf="editingPost" (ngSubmit)="editPost()">
-		<input id="new-message-input" type="text" placeholder="New post message" class="input-field" formControlName="newPostMessage">
-		<img id="attachment-img" src="assets/images/paper-clip.png">
-		<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
-		<input type="submit" style="display: none" />
+	<form class="card flex-col full-width no-margin-top" [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
+		<textarea rows="1" placeholder="Add a new comment" class="textarea-new-msg faded-slim-border border-bottom-only padding-small margin-bot-bigger" formControlName="newComment"></textarea>
+		<button class="faded-slim-border padding-small lighter-hover click-effect border-radius-smaller" type="submit">
+			Add Comment
+		</button>
 	</form>
-	<figure class="form-attachments" *ngIf="editingPost">
-		<div *ngFor="let file of files" class="form-attachment">
-			{{ file.name ? file.name : 'Attachment' }}
-			<div class="remove-form-attachment" (click)="removeAttachment(file.name)">
-				☒
-			</div>
+	<hr class="card-hr">
+	<section class="margin-top-bigger">
+		<div class="comment" *ngFor="let comm of post?.comments">
+			<app-comment [paramId]="comm.id.toString()"></app-comment>
 		</div>
-	</figure>
-	<form [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
-		<input type="text" placeholder="Add comment" class="input-field" formControlName="newComment">
-		<input type="submit" style="display: none" />
-	</form>
-	<section class="comment" *ngFor="let comm of post?.comments">
-		<app-comment [paramId]="comm.id.toString()"></app-comment>
 	</section>
 </main>
diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts
index a60f4da..e159c69 100644
--- a/src/app/components/post-page/post-page.component.ts
+++ b/src/app/components/post-page/post-page.component.ts
@@ -87,48 +87,6 @@ export class PostPageComponent implements OnInit {
     }
   }
 
-  backToFeed(): void {
-    this._router.navigate(['/']);
-  }
-
-  backToProfile(): void {
-    this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]);
-  }
-
-  toLogin(): void {
-    this._router.navigate(['/login']);
-  }
-
-  onFileUpload(event: any): void {
-    this.files.push(...event.target.files);
-    this.editPostFormGroup.get('fileUpload')?.reset();
-  }
-
-  removeAttachment(fileName: string): void {
-    this.files = this.files.filter(x => x.name !== fileName);
-  }
-
-  editPost(): void {
-    if (this._tokenService.getTokenFromSessionStorage() === '') {
-      this.toLogin();
-      return;
-    }
-
-    if (this.editingPost) {
-      const newMessage = this.editPostFormGroup.get('newPostMessage')?.value;
-
-      if (newMessage === '' && newMessage !== this.post.message) {
-        this._postService.putPostWithSessionStorageRequest(this.postId, newMessage, this.files).subscribe({
-          next: () => {
-            this.reloadPage();
-          }
-        });
-        this.dataArrived = false;
-      }
-    }
-    this.editingPost = !this.editingPost;
-  }
-
   addComment(): void {
     if (!this.loggedIn) {
       this._router.navigate(['/login']);
@@ -146,14 +104,6 @@ export class PostPageComponent implements OnInit {
     }
   }
 
-  deletePost(): void {
-    this._postService.deletePostWithSessionStorage(this.postId).subscribe({
-      next: () => {
-        this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]);
-      }
-    });
-  }
-
   private reloadPage(): void {
     this._router.routeReuseStrategy.shouldReuseRoute = () => false;
     this._router.onSameUrlNavigation = 'reload';
diff --git a/src/styles.css b/src/styles.css
index b166d70..d57416e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -297,10 +297,22 @@ input[type=file]::file-selector-button {
   margin: 0;
 }
 
+.no-margin-top {
+  margin-top: 0;
+}
+
 .margin-top-normal {
   margin-top: 0.4em;
 }
 
+.margin-top-bigger {
+  margin-top: 0.5em;
+}
+
+.margin-bot-bigger {
+  margin-bottom: 0.5em;
+}
+
 .margin-top-bot-small {
   margin-top: 0.2em;
   margin-bottom: 0.2em;
@@ -359,6 +371,11 @@ input[type=file]::file-selector-button {
 
 /* Inputs, the type found in login and register */
 
+.textarea-new-msg {
+  min-height: 1.5em;
+  resize: vertical;
+}
+
 .fancy-input {
   box-sizing: border-box;
   margin-bottom: 0.5em;
@@ -458,26 +475,3 @@ input[type=file]::file-selector-button {
 .form-attachment {
   background-color: #424242;
 }
-
-.form-attachments {
-  display: flex;
-  flex-wrap: wrap;
-  color: gray;
-  font-size: 0.75em;
-  margin: 0 0.3em;
-}
-
-.remove-form-attachment {
-  font-size: 0.9em;
-  color: var(--failure);
-  background-color: white;
-  border-radius: 0.2em;
-  margin: 0 0.2em;
-  padding: 0.2em;
-}
-
-.remove-form-attachment:hover {
-  color: white;
-  background-color: var(--failure);
-  cursor: pointer;
-}