diff options
Diffstat (limited to 'src/app/components/feed/feed.component.html')
| -rw-r--r-- | src/app/components/feed/feed.component.html | 78 |
1 files changed, 32 insertions, 46 deletions
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 1a03dcc..4832456 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -1,52 +1,38 @@ +<app-navbar></app-navbar> + <app-loading *ngIf="!dataArrived"></app-loading> -<div id="feed-page" *ngIf="dataArrived"> - <nav id="profile-bar" class="round-image rounded-border"> - <div id="profile-info" (click)="goToProfile()"> - <img id="profile-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt=""/> - <div id="profile-bar-name"> - {{ user.firstName }} {{ user.lastName }} +<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 class="textarea-new-msg border-faded-slim border-bottom-only padding-dot2" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea> + <section class="flex-row flex-justify-start align-children-center padding-top-bot-dot5"> + <div class="file-button hover-half-opacity click-effect"> + <img src="/assets/icons/tabler-icon-paperclip.svg"> + <input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple> </div> - <div id="profile-bar-username"> - @{{ user.userName }} + </section> + <section class="flex-row bot-padding-dot6ger"> + <div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-dot2"> + <div class="flexible"> + {{ file.name ? file.name : 'Attachment' }} + </div> + <div class="flex-col hover-half-opacity border-radius-dot2 click-effect" (click)="removeAttachment(file.name)"> + <img src="/assets/icons/tabler-icon-x.svg"> + </div> </div> + </section> + <button class="border-faded-slim padding-dot2 lighter-hover click-effect border-radius-dot3"> + Post + </button> + </form> + <hr class="card-hr"> + <section id="posts" (scroll)="onScroll($event)"> + <div class="text-centered" *ngIf="posts.length === 0"> + None of your friends have posted anything yet!<br> + Try refreshing your page! </div> - <button class="submit-btn" (click)="goToSettings()">Settings</button> - <button class="submit-btn" (click)="logout()">Logout</button> - </nav> - <div id="feed-content"> - <nav id="top-bar"> - <div id="main-content"> - <img id="top-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt="" (click)="goToProfile()"> - <form id="create-post-form" class="rounded-border" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()"> - <div id="form-inputs"> - <input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/> - <input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent --> - <img id="attachment-img" src="assets/images/paper-clip.png"> - <input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple> - </div> - <div class="form-attachments"> - <div *ngFor="let file of files" class="form-attachment"> - {{ file.name ? file.name : 'Attachment' }} - <div class="remove-form-attachment" (click)="removeAttachment(file.name)"> - ☒ - </div> - </div> - </div> - </form> - <a id="top-bar-open-chat" href=""> - <img src="assets/images/feed/chat-pic.png" alt=""/> - </a> - </div> - </nav> - <div id="posts" class="scroll-standalone" (scroll)="onScroll($event)"> - <div id="no-posts-msg" *ngIf="posts.length === 0"> - None of your friends have posted anything yet!<br> - Try refreshing your page! - </div> - <div *ngFor="let friendPost of posts" class="post"> - <app-post [paramId]="friendPost.postId.toString()"></app-post> - </div> + <div *ngFor="let friendPost of posts" class="post"> + <app-post [paramId]="friendPost.postId.toString()"></app-post> </div> - </div> -</div> + </section> +</main> |