diff options
Diffstat (limited to 'src/app/components')
| -rw-r--r-- | src/app/components/feed/feed.component.css | 171 | ||||
| -rw-r--r-- | src/app/components/feed/feed.component.html | 67 |
2 files changed, 44 insertions, 194 deletions
diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index 3d22349..baa96d5 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -1,171 +1,36 @@ -#feed-page { - height: 100%; - max-width: 40em; - box-sizing: border-box; - border: .5em solid var(--bg-color); - - margin: 0 auto; - - display: flex; -} - -@media screen and (max-width: 750px) { - #profile-bar { - display: none !important; - } - #top-bar-profile-pic { - display: initial; - } -} -@media screen and (min-width: 750px) { - #profile-bar { - display: initial; - } - #top-bar-profile-pic { - display: none !important; - } -} - -/* Content */ - -#feed-content { - flex: 1; - display: flex; - flex-direction: column; -} - -/* Profile bar */ - -#profile-bar { - width: 20%; - height: fit-content; - display: flex; - flex-direction: column; - align-items: center; - - box-sizing: border-box; - background-color: var(--bg-color); - - margin-right: .5em; - padding-bottom: 1em; - padding: .5em; - border-radius: .6em; -} - -#profile-bar-profile-pic { - width: 7em; - height: 7em; - box-sizing: border-box; - padding: .5em; -} - -#profile-bar-name { - text-align: center; -} - -#profile-bar-username { - margin: .5em 0; -} - -#profile-bar > #profile-info { - display: flex; - flex-direction: column; - align-items: center; +#create-post { + width: 100%; + margin: 1em 0; } -/* Top bar */ - -#top-bar { - display: flex; - flex-direction: row; - width: 98%; - margin: 0 auto; - margin-bottom: .5em; - box-sizing: border-box; +#new-post-message { + min-height: 1.5em; + resize: vertical; } -#top-bar-profile-pic { - height: 2.5em; - width: 2.5em; - margin-right: .5em; +#attachments-btns { + padding: 0.5em 0; } -#top-bar-profile-pic > img { - height: inherit; - width: inherit; +#attachments-btns img, .file-button > input { + height: 1.4em; + width: 1.4em; } -#top-bar-open-chat { - /* Until implemented */ - display: none; +#new-post-attachments { + margin-bottom: 0.5em; } -/* Create post */ - -#create-post-form { - width: 100%; +.file-button { position: relative; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -#form-inputs { - display: flex; -} - -#top-bar-create-post { - flex: 1; - font-size: inherit; - width: 100%; - height: 100%; - margin: 0 auto; - box-sizing: border-box; - border: 2px solid var(--bg-color); - border-radius: .6em; -} - -#file-upload { - font-size: inherit; - color: transparent; - width: 1.5em; - height: 1.5em; } -#file-upload:hover { - cursor: pointer; -} - -#attachment-img { - height: 1.5em; - width: 1.5em; +.file-button > img { position: absolute; - right: .4em; pointer-events: none; } -/* Posts */ - -#no-posts-msg { - width: 100%; - margin-top: 1em; - color: gray; - text-align: center; -} - -/* Elements, that act as buttons */ - -#profile-bar > #profile-info:hover, -#top-bar-profile-pic:hover { - cursor: pointer; -} - -/* Can't copy text from */ - -#profile-bar, -.vote { - -webkit-user-select: none; /* Safari */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE10+/Edge */ - user-select: none; /* Standard */ +.file-button > input { + font-size: inherit; + color: transparent; } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 5694b09..c5c4401 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -2,49 +2,34 @@ <app-loading *ngIf="!dataArrived"></app-loading> -<main id="feed-page" *ngIf="dataArrived"> - <aside id="profile-bar" class="round-image rounded-border"> - <summary 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 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"> + <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 }} - </div> - </summary> - <button class="submit-btn" (click)="goToSettings()">Settings</button> - <button class="submit-btn" (click)="logout()">Logout</button> - </aside> - <section id="feed-content"> - <nav id="top-bar"> - <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()"> - <section 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> - </section> - <section 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> - </section> - </form> - <img id="top-bar-open-chat" src="assets/images/feed/chat-pic.png" alt=""/> - </nav> - <section 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; let i = index" class="post"> - <app-post [paramId]="friendPost.postId.toString()" [index]="i"></app-post> + </section> + <section id="new-post-attachments" class="flex-row faded-slim-border border-bottom-only"> + <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> </section> + <button class="faded-slim-border padding-small lighter-hover click-effect border-radius-smaller"> + Post + </button> + </form> + <section id="posts" (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; let i = index" class="post"> + <app-post [paramId]="friendPost.postId.toString()" [index]="i"></app-post> + </div> </section> </main> |