change: food buttons styles

diff --git a/src/app/food/food.component.css b/src/app/food/food.component.css
index c770560d2a605b1b71a2aec10457869f562c43fd..fe5e90ece14e63a6c43eb39f9037703f8633b5e8 100644 (file)
--- 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 44084790d4cb56673895e61c1a42ec82d3d6e2fd..5175e92a8641cdbfff9320bd4b16ecfe05bb828b 100644 (file)
--- 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>