From: Bastian Dehn <hhaalo@arcor.de>
Date: Sat, 13 Aug 2022 08:26:02 +0000 (+0200)
Subject: change: style for title
X-Git-Tag: v1.0.10^2~1^2~3
X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=cf01d1f7546b8654147681d035b6c9ac0e9148cf;p=speisekarten-editor.git

change: style for title
---

diff --git a/src/app/title/title.component.css b/src/app/title/title.component.css
index d45449e..8693a37 100644
--- a/src/app/title/title.component.css
+++ b/src/app/title/title.component.css
@@ -7,9 +7,14 @@
 	background-color: #fff6e6;
 }
 
+.flex {
+	display: flex;
+	justify-content: center;
+}
+
 .button {
-	display: inline-block;
-	margin: 0.5em 0;
+	flex-basis: 15%;
+	margin: 0.5em;
 }
 
 .form {
@@ -36,6 +41,10 @@ h1 {
 }
 
 @media only screen and (min-width: 46.875em) {
+	.flex {
+		justify-content: flex-start;
+	}
+
 	h1 {
 		text-align: left;
 	}
diff --git a/src/app/title/title.component.html b/src/app/title/title.component.html
index 4b8c3c8..1ede06f 100644
--- a/src/app/title/title.component.html
+++ b/src/app/title/title.component.html
@@ -1,8 +1,10 @@
 <div class="title" [class.active]="formTitleVisible">
 	<h1>{{title.Title}}</h1>
-	<button class="button"
-		type="button"
-		(click)="editTitle()">Bearbeiten</button>
+	<div class="flex">
+		<button class="button"
+			type="button"
+			(click)="editTitle()">Bearbeiten</button>
+	</div>
 	<form #formTitle="ngForm" *ngIf="formTitleVisible"
 		(keypress)="onKeypressEnter($event)"
 		class="form">
@@ -15,11 +17,13 @@
 	</form>
 	<div *ngFor="let subtitle of title.Subtitles; let i = index">
 		<app-subtitle [subtitle]="subtitle"></app-subtitle>
-		<button class="button"
-			type="button"
-			(click)="insertSubSection(i)">Einfügen Unterteil</button>
-		<button class="button"
-			type="button"
-			(click)="removeSubSection(i)">Lösche Unterteil</button>
+		<div class="flex">
+			<button class="button"
+				type="button"
+				(click)="insertSubSection(i)">Einfügen Unterteil</button>
+			<button class="button"
+				type="button"
+				(click)="removeSubSection(i)">Lösche Unterteil</button>
+		</div>
 	</div>
 </div>