diff options
| author | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-03-21 15:14:54 +0200 |
|---|---|---|
| committer | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-03-21 15:14:54 +0200 |
| commit | 88b8336f0fa51a6f1ac1334e1237d1053d52d8a7 (patch) | |
| tree | 598bf381a42ad0ce554df197e30e38172e284ceb /src/app/components/feed | |
| parent | 17a8110e3e0450a88207b9b8b05ebde166a433bc (diff) | |
| download | DevHive-Angular-88b8336f0fa51a6f1ac1334e1237d1053d52d8a7.tar DevHive-Angular-88b8336f0fa51a6f1ac1334e1237d1053d52d8a7.tar.gz DevHive-Angular-88b8336f0fa51a6f1ac1334e1237d1053d52d8a7.zip | |
Major redesign of form attachments (the ones you find on post creation and edit)
Diffstat (limited to 'src/app/components/feed')
| -rw-r--r-- | src/app/components/feed/feed.component.css | 12 | ||||
| -rw-r--r-- | src/app/components/feed/feed.component.html | 14 |
2 files changed, 12 insertions, 14 deletions
diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index 372792c..a0b6d2e 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -1,3 +1,7 @@ +section:empty { + display: none; +} + #create-post { width: 100%; margin-top: 1em; @@ -8,19 +12,11 @@ resize: vertical; } -#attachments-btns { - padding: 0.5em 0; -} - #attachments-btns img, .file-button > input { height: 1.4em; width: 1.4em; } -#new-post-attachments { - margin-bottom: 0.5em; -} - .file-button { position: relative; } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index fb969da..3fd778a 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -5,17 +5,19 @@ <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"> + <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"> <input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple> </div> </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)"> - ☒ + <section class="flex-row bot-padding-bigger"> + <div *ngFor="let file of files" class="form-attachment faded-slim-border flexible flex-row flex-no-wrap flex-center-align-items padding-small margin-top-bot-small"> + <div class="flexible"> + {{ file.name ? file.name : 'Attachment' }} + </div> + <div class="flex-col hover-half-opacity border-radius-small click-effect" (click)="removeAttachment(file.name)"> + <img src="/assets/icons/tabler-icon-x.svg"> </div> </div> </section> |