change: style for subtitle

diff --git a/src/app/subtitle/subtitle.component.css b/src/app/subtitle/subtitle.component.css
index a8209b8495636a9527c460f1ae29bb1dc8d4c7c3..6e661797dd0c717eab92e87f3b264e3d77c5c22a 100644 (file)
--- a/src/app/subtitle/subtitle.component.css
+++ b/src/app/subtitle/subtitle.component.css
@@ -7,9 +7,15 @@
        background-color: #fff6e6;
 }
 
+.flex {
+       display: flex;
+       justify-content: center;
+}
+
 .button {
-       display: inline-block;
-       margin: 0.5em 0;
+       display: block;
+       margin: 0.5em;
+       flex-basis: 15%;
 }
 
 .form {
@@ -35,6 +41,10 @@ h2 {
 }
 
 @media only screen and (min-width: 46.875em) {
+       .flex {
+               justify-content: flex-start;
+       }
+
        h2 {
                text-align: left;
        }

diff --git a/src/app/subtitle/subtitle.component.html b/src/app/subtitle/subtitle.component.html
index 2918705a07cd885def0dd59d71da890dca6a77cc..10e1390bdf1f822aba83461abb0a9b94051dc2a5 100644 (file)
--- a/src/app/subtitle/subtitle.component.html
+++ b/src/app/subtitle/subtitle.component.html
@@ -4,13 +4,15 @@
        class="subtitle"
        [class.active]="formSubtitleVisible">
        <h2>{{subtitle.Subtitle}}</h2>
-       <button class="button"
-               type="button"
-               (click)="editSubtitle()">Bearbeiten</button>
-       <button class="button"
-               type="button"
-               id="buttonFood"
-               (click)="insertNewFood(subtitle.Foods.length)">Speise hinzufügen</button>
+       <div class="flex">
+               <button class="button"
+                       type="button"
+                       (click)="editSubtitle()">Bearbeiten</button>
+               <button class="button"
+                       type="button"
+                       id="buttonFood"
+                       (click)="insertNewFood(subtitle.Foods.length)">Speise hinzufügen</button>
+       </div>
 
        <form #formSubtitle="ngForm" *ngIf="formSubtitleVisible"
                (keypress)="onKeypressEnter($event)"
@@ -27,14 +29,16 @@
 
        <div *ngFor="let food of subtitle.Foods; let i = index" cdkDrag>
                <app-food [food]="food"></app-food>
-               <button class="button"
-                       type="button"
-                       (click)="insertNewFood(i)">Einfügen</button>
-               <button class="button"
-                       type="button"
-                       (click)="duplicateFood(i)">Duplizieren</button>
-               <button class="button"
-                       type="button"
-                       (click)="removeFood(i)">Löschen</button>
+               <div class="flex">
+                       <button class="button"
+                               type="button"
+                               (click)="insertNewFood(i)">Einfügen</button>
+                       <button class="button"
+                               type="button"
+                               (click)="duplicateFood(i)">Duplizieren</button>
+                       <button class="button"
+                               type="button"
+                               (click)="removeFood(i)">Löschen</button>
+               </div>
        </div>
 </div>