add: food edit form design

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 53125d5f47f1f392e96c9a06e42307612bf93536..7fd2219433d5f628df9e5c73e151e685abad9146 100644 (file)
--- 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 89e9f6bf0e88e5d1c6e692cc3d85f6dcd77b060f..145c408af840d014408c2cb0be2e375c4d22b249 100644 (file)
--- 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..cbb9d86a1fab5d1c77e58adae35c87b0b72612f0 100644 (file)
--- 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 cfba741377195181306c5e340c3af2cb4e0940c1..eeac428e131037b06977ab7907f2aeb8429fe313 100644 (file)
--- 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>