From cf6ab406f46904d5870658c5e1b656cabde07914 Mon Sep 17 00:00:00 2001
From: Marcel Schwarz <marcel@icaotix.de>
Date: Tue, 12 Jan 2021 01:11:22 +0100
Subject: [PATCH] Layouting stuff for the user input

---
 .../user-input/user-input.component.html      | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.html b/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.html
index bb8d965..d52eae3 100644
--- a/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.html
@@ -5,26 +5,25 @@
       {{bikePoint?.commonName}}
     </mat-card-title>
   </mat-card-header>
-  <mat-card-content class="p-4 d-flex flex-column justify-content-center">
-    <div>
-      <p>Select a range to analyze data</p>
-      <form [formGroup]="form" class="d-flex flex-row justify-content-between">
-        <mat-form-field appearance="fill">
-          <mat-label>Enter a range</mat-label>
-          <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
-                                formGroupName="dateRange">
-            <input formControlName="start" matStartDate placeholder="Start date">
-            <input formControlName="end" matEndDate placeholder="End date">
-          </mat-date-range-input>
-          <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-          <mat-date-range-picker #picker></mat-date-range-picker>
-        </mat-form-field>
-        <button (click)="onSubmit()" class="mt-n3" color="primary" mat-raised-button>
-          <mat-icon>cached</mat-icon>
-          reload
-        </button>
-      </form>
-    </div>
+  <mat-card-content class="p-4 d-flex flex-column justify-content-center align-content-between">
+    <p>Select a range to analyze data</p>
+    <form [formGroup]="form" (submit)="onSubmit()">
+      <mat-form-field appearance="fill" class="w-100">
+        <mat-label>Enter a range</mat-label>
+        <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
+                              formGroupName="dateRange">
+          <input formControlName="start" matStartDate placeholder="Start date">
+          <input formControlName="end" matEndDate placeholder="End date">
+        </mat-date-range-input>
+        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+        <mat-date-range-picker #picker></mat-date-range-picker>
+      </mat-form-field>
+      <button (click)="onSubmit()" color="primary" type="submit" (keyup.enter)="onSubmit()" class="w-100" mat-raised-button>
+        reload
+        <mat-icon>cached</mat-icon>
+      </button>
+    </form>
+    <br/>
     <div class="ml-n4" id="chart">
       <apx-chart
         [chart]="chartOptions.chart"