From: Bastian Dehn <hhaalo@arcor.de>
Date: Thu, 9 Jun 2022 16:17:23 +0000 (+0200)
Subject: add: food edit form design
X-Git-Tag: v1.0^2~19^2~2
X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=62678e53303d975887f064b927abfb71e5e8ebfc;p=speisekarten-editor.git

add: food edit form design
---

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 53125d5..7fd2219 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -38,87 +38,10 @@ h2 {
 	font-size: 2em;
 }
 
-.grid {
-	display: grid;
-	grid-template-columns: repeat(12, 1fr);
-}
-
-.foodmenu {
-	text-align: center;
-}
-
-.food {
-	grid-row: 1;
-	grid-column: 1/13;
-	font-size: 1.2em;
-	font-weight: bold;
-}
-
-.sideDish {
-	grid-row: 2;
-	grid-column: 1/13;
-	font-style: italic;	
-}
-
-.price {
-	grid-row: 3;
-	grid-column: 1/13;
-	margin-top: 0.5em;
-}
-
-.foodmenu .button:nth-child(odd) {
-	grid-column: 7/8;
-	text-align: center;
-}
-
-.foodmenu .button:nth-child(even) {
-	grid-column: 6/7;
-	text-align: center;
-}
-
 @media only screen and (min-width: 46.875em) {
 	h1, h2 {
 		text-align: left;
 	}
-
-	.foodmenu {
-		padding: 0.5em 0;
-		border-bottom: 0.125em solid gray;
-		text-align: left;
-	}
-
-	.food {
-		grid-row: 1;
-		grid-column: 1/9;
-		font-size: 1.5em;
-	}
-
-	.sideDish {
-		grid-row: 2;
-		grid-column: 1/13;
-	}
-
-	.price {
-		grid-row: 1;
-		grid-column: 9/13;
-		text-align: right;
-		font-size: 1.1em;
-	}
-
-	.foodmenu .button:nth-child(4) {
-		grid-column: 1/2;
-		text-align: center;
-	}
-
-	.foodmenu .button:nth-child(5) {
-		grid-column: 2/3;
-		text-align: center;
-	}
-
-	.foodmenu .button:nth-child(6) {
-		grid-column: 3/4;
-		text-align: center;
-	}
 }
 
 @media only screen and (min-width: 60.625em) {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 89e9f6b..145c408 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -97,8 +97,7 @@
 			id="buttonFood"
 			[disabled]="disableFoodButton()"
 			(click)="addNewFood(title, i)">Speise hinzufügen</button>
-		<div *ngFor="let food of subtitle.Foods; let i = index"
-			class="foodmenu grid">
+		<div *ngFor="let food of subtitle.Foods; let i = index">
 			<app-food [food]="food"></app-food>
 			<button class="button"
 				type="button"
diff --git a/src/app/food/food.component.css b/src/app/food/food.component.css
index e69de29..cbb9d86 100644
--- a/src/app/food/food.component.css
+++ b/src/app/food/food.component.css
@@ -0,0 +1,79 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+}
+
+.foodmenu {
+	text-align: center;
+}
+
+.food {
+	grid-row: 1;
+	grid-column: 1/13;
+	font-size: 1.2em;
+	font-weight: bold;
+}
+
+.sideDish {
+	grid-row: 2;
+	grid-column: 1/13;
+	font-style: italic;	
+}
+
+.price {
+	grid-row: 3;
+	grid-column: 1/13;
+	margin-top: 0.5em;
+}
+
+.foodmenu .button {
+	grid-row: 4;
+	grid-column: 6/7;
+	text-align: center;
+}
+
+.form {
+	grid-row: 5;
+	grid-column: 1/13;
+}
+
+.form label {
+	display: inline-block;
+	grid-column: 1/3;
+}
+
+.form input {
+	display: inline-block;
+	grid-column: 3/13;
+}
+
+@media only screen and (min-width: 46.875em) {
+	.foodmenu {
+		padding: 0.5em 0;
+		border-bottom: 0.125em solid gray;
+		text-align: left;
+	}
+
+	.food {
+		grid-row: 1;
+		grid-column: 1/9;
+		font-size: 1.5em;
+	}
+
+	.sideDish {
+		grid-row: 2;
+		grid-column: 1/13;
+	}
+
+	.price {
+		grid-row: 1;
+		grid-column: 9/13;
+		text-align: right;
+		font-size: 1.1em;
+	}
+
+	.foodmenu .button {
+		grid-column: 1/2;
+		text-align: center;
+	}
+}
diff --git a/src/app/food/food.component.html b/src/app/food/food.component.html
index cfba741..eeac428 100644
--- a/src/app/food/food.component.html
+++ b/src/app/food/food.component.html
@@ -1,19 +1,22 @@
-<div class="food">{{food.Food}}</div>
-<div class="sideDish">{{food.sideDish}}</div>
-<div class="price">{{food.price}}</div>
-<button class="button"
-	type="button"
-	(click)="editFood()">Bearbeiten</button>
-
-<form #formFood="ngForm" *ngIf="formFoodVisible" class="form">
-	<label>Speise</label>
-	<input [(ngModel)]="food.Food" name="food" type="text" />
-	<label>Beilage</label>
-	<input [(ngModel)]="food.sideDish" name="sideDish" type="text" />
-	<label>Preis</label>
-	<input [(ngModel)]="food.price" name="price" type="text" />
+<div class="grid foodmenu">
+	<div class="food">{{food.Food}}</div>
+	<div class="sideDish">{{food.sideDish}}</div>
+	<div class="price">{{food.price}}</div>
 	<button class="button"
 		type="button"
-		id="editFood"
-		(click)="saveFood()">Speichern</button>
-</form>
+		[disabled]="formFoodVisible"
+		(click)="editFood()">Bearbeiten</button>
+
+	<form #formFood="ngForm" *ngIf="formFoodVisible" class="grid form">
+		<label>Speise</label>
+		<input [(ngModel)]="food.Food" name="food" type="text" />
+		<label>Beilage</label>
+		<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>
+	</form>
+</div>