food.component: change flex to grid

diff --git a/src/app/food/food.component.css b/src/app/food/food.component.css
index fe5e90ece14e63a6c43eb39f9037703f8633b5e8..02e5c4f37d480193ff41c39d7331a58a6ca92185 100644 (file)
--- a/src/app/food/food.component.css
+++ b/src/app/food/food.component.css
@@ -30,13 +30,8 @@
        margin-top: 0.5em;
 }
 
-.flex {
-       grid-column: 1/13;
-       display: flex;
-       flex-direction: column;
-}
-
 .button {
+       grid-column: 1/13;
        margin: 1em 0;
 }
 
@@ -58,6 +53,11 @@
        width: 95%;
 }
 
+.form button {
+       grid-column: 1/13;
+       margin: 1em 0;
+}
+
 @media only screen and (min-width: 46.875em) {
        .foodmenu {
                padding: 0.5em 0;
@@ -65,14 +65,6 @@
                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 5175e92a8641cdbfff9320bd4b16ecfe05bb828b..44084790d4cb56673895e61c1a42ec82d3d6e2fd 100644 (file)
--- a/src/app/food/food.component.html
+++ b/src/app/food/food.component.html
@@ -2,12 +2,10 @@
        <div class="food">{{food.Food}}</div>
        <div class="sideDish">{{food.sideDish}}</div>
        <div class="price">{{food.price}}</div>
-       <div class="flex">
-               <button class="button"
-                       type="button"
-                       [disabled]="formFoodVisible"
-                       (click)="editFood()">Bearbeiten</button>
-       </div>
+       <button class="button"
+               type="button"
+               [disabled]="formFoodVisible"
+               (click)="editFood()">Bearbeiten</button>
 
        <form #formFood="ngForm"
                *ngIf="formFoodVisible"
@@ -19,11 +17,9 @@
                <input [(ngModel)]="food.sideDish" name="sideDish" type="text" />
                <label>Preis</label>
                <input [(ngModel)]="food.price" name="price" type="text" />
-               <div class="flex">
-                       <button class="button"
-                               type="button"
-                               id="editFood"
-                               (click)="saveFood()">Speichern</button>
-               </div>
+               <button class="button"
+                       type="button"
+                       id="editFood"
+                       (click)="saveFood()">Speichern</button>
        </form>
 </div>