From 14b2c798d996b77623dcbd058312fa6cd26597fc Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 13:03:39 +0100
Subject: [PATCH] Change position of the add file button next to the check box

---
 src/app/components/feed/feed.component.html | 24 +++++++++++++--------
 src/app/components/feed/feed.component.sass | 15 ++++++++++---
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index 308c0d3..01fc5c6 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -13,21 +13,27 @@
             Your browser does not support playing HTML5 video.
           </video>
         </div>
-        <mat-form-field id="input">
+        <mat-form-field class="input">
           <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting"
-                    mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
-          <button mat-button matSuffix mat-icon-button (click)="name.click()"
+            mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
+        </mat-form-field>
+        <input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
+        <div class="input">
+        <div class="left">
+          <p id="check">
+            <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked" [disabled]="posting">I protected the environment.
+            </mat-checkbox>
+          </p>
+        </div>
+        <div class="right">
+          <button mat-button mat-icon-button (click)="name.click()"
             matTooltip="upload a picture or video (up to 10MB)"
             matTooltipShowDelay="200"
             [disabled]="posting">
             <mat-icon>attach_file</mat-icon>
           </button>
-          <input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
-        </mat-form-field>
-        <p id="check">
-          <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked" [disabled]="posting">I protected the environment.
-          </mat-checkbox>
-        </p>
+        </div>
+        </div>
         <mat-form-field id="action-chooser" *ngIf="checked">
           <mat-label>What did you do?</mat-label>
           <mat-select [(ngModel)]="activityId" name="action" [disabled]="posting">
diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass
index e3724a0..9997dd5 100644
--- a/src/app/components/feed/feed.component.sass
+++ b/src/app/components/feed/feed.component.sass
@@ -27,12 +27,17 @@
 #feedlist
   width: 100%
 
-#input
+.input
   width: 100%
   padding-left: 0.5em
   padding-right: 0.5em
-  .mat-icon
-    transform: scale(1.5)
+.left, .right
+  display: inline-block
+  width: 50%
+.left 
+  text-align: left
+.right
+  text-align: right
 #inputPreview
   max-width: 100%
   max-height: 40vh
@@ -60,6 +65,10 @@
 #check
   margin: 0
   padding-left: 0.5em
+  display: contents
+#button-box
+  text-align: right
+  margin-left: auto
 
 #post-button
   width: 100%