diff options
Diffstat (limited to 'src/app')
4 files changed, 13 insertions, 19 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> diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index 3c25563..6cdab0b 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -1,7 +1,3 @@ -.attachment { - background-color: #424242; -} - /* Full attachment */ .show-full-attachment { diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 12004dc..04ba633 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,4 +1,4 @@ -<figure class="attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()"> +<figure class="form-attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()"> <div class="flex-col flex-justify-center margin-right-small" [ngSwitch]="fileType"> <img *ngSwitchCase="'img'" src="/assets/icons/tabler-icon-photo.svg"> <img *ngSwitchDefault src="/assets/icons/tabler-icon-file.svg"> |