aboutsummaryrefslogtreecommitdiff
path: root/src/app/components/post-page
diff options
context:
space:
mode:
authorSyndamia <kamen.d.mladenov@protonmail.com>2021-03-21 15:48:03 +0200
committerSyndamia <kamen.d.mladenov@protonmail.com>2021-03-21 15:48:14 +0200
commit0133f3b5e9086fba5006314c183451974d50502c (patch)
tree96b4c9663b6eaacf064da902adff23fc2f3b837a /src/app/components/post-page
parent88b8336f0fa51a6f1ac1334e1237d1053d52d8a7 (diff)
downloadDevHive-Angular-0133f3b5e9086fba5006314c183451974d50502c.tar
DevHive-Angular-0133f3b5e9086fba5006314c183451974d50502c.tar.gz
DevHive-Angular-0133f3b5e9086fba5006314c183451974d50502c.zip
Major redesign of post page component and removed post edit and delete functionality, as well as old navbar from it
Diffstat (limited to 'src/app/components/post-page')
-rw-r--r--src/app/components/post-page/post-page.component.css61
-rw-r--r--src/app/components/post-page/post-page.component.html40
-rw-r--r--src/app/components/post-page/post-page.component.ts50
3 files changed, 12 insertions, 139 deletions
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';