From e0a3956e1aa82793af3d3568f75c6c33a7b4899b Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Tue, 16 Aug 2022 19:13:58 +0200
Subject: [PATCH] change: food buttons styles

---
 src/app/food/food.component.css  | 21 ++++++++++++++++-----
 src/app/food/food.component.html | 20 ++++++++++++--------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/app/food/food.component.css b/src/app/food/food.component.css
index c770560..fe5e90e 100644
--- a/src/app/food/food.component.css
+++ b/src/app/food/food.component.css
@@ -30,11 +30,14 @@
 	margin-top: 0.5em;
 }
 
-.foodmenu .button {
-	grid-row: 4;
-	grid-column: 6/8;
-	text-align: center;
-	margin: 0.5em 0;
+.flex {
+	grid-column: 1/13;
+	display: flex;
+	flex-direction: column;
+}
+
+.button {
+	margin: 1em 0;
 }
 
 .form {
@@ -62,6 +65,14 @@
 		text-align: left;
 	}
 
+	.flex {
+		flex-direction: row;
+	}
+
+	.button {
+		flex-basis: 20%;
+	}
+
 	.food {
 		grid-row: 1;
 		grid-column: 1/9;
diff --git a/src/app/food/food.component.html b/src/app/food/food.component.html
index 4408479..5175e92 100644
--- a/src/app/food/food.component.html
+++ b/src/app/food/food.component.html
@@ -2,10 +2,12 @@
 	<div class="food">{{food.Food}}</div>
 	<div class="sideDish">{{food.sideDish}}</div>
 	<div class="price">{{food.price}}</div>
-	<button class="button"
-		type="button"
-		[disabled]="formFoodVisible"
-		(click)="editFood()">Bearbeiten</button>
+	<div class="flex">
+		<button class="button"
+			type="button"
+			[disabled]="formFoodVisible"
+			(click)="editFood()">Bearbeiten</button>
+	</div>
 
 	<form #formFood="ngForm"
 		*ngIf="formFoodVisible"
@@ -17,9 +19,11 @@
 		<input [(ngModel)]="food.sideDish" name="sideDish" type="text" />
 		<label>Preis</label>
 		<input [(ngModel)]="food.price" name="price" type="text" />
-		<button class="button"
-			type="button"
-			id="editFood"
-			(click)="saveFood()">Speichern</button>
+		<div class="flex">
+			<button class="button"
+				type="button"
+				id="editFood"
+				(click)="saveFood()">Speichern</button>
+		</div>
 	</form>
 </div>
-- 
2.39.5