From: Bastian Dehn <hhaalo@arcor.de>
Date: Thu, 18 Aug 2022 16:25:33 +0000 (+0200)
Subject: title.component: change: buttons and form to grid
X-Git-Tag: v1.0.13^2~1^2~2
X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=d2d017885debedc237617a15f3504ef711e8a689;p=speisekarten-editor.git

title.component: change: buttons and form to grid
---

diff --git a/src/app/title/title.component.css b/src/app/title/title.component.css
index e387a15..4dacf79 100644
--- a/src/app/title/title.component.css
+++ b/src/app/title/title.component.css
@@ -7,32 +7,34 @@
 	background-color: #fff6e6;
 }
 
-.flex {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+.grid {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
 	margin: 0.5em 0;
 }
 
 .button {
+	grid-column: 1/13;
 	margin-bottom: 0.5em;
 }
 
 .form {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
 	margin: 0.5em 0;
 }
 
+.form label {
+	grid-column: 1/13;
+	margin: 0.5em 0;
+	text-align: center;
+}
+
 .form input {
+	grid-column: 1/13;
 	margin-bottom: 0.5em;
 }
 
-.form label {
-	align-self: center;
-	margin: 0.5em 0;
-}
 
 h1 {
 	font-family: 'Tangerine', serif;
@@ -42,34 +44,35 @@ h1 {
 }
 
 @media only screen and (min-width: 46.875em) {
-	.flex {
-		flex-direction: row;
-		justify-content: flex-start;
-	}
-
 	.button {
-		flex-basis: 20%;
 		margin: 0.5em 0.5em 0.5em 0;
 	}
 
+	.button:nth-of-type(1) {
+		grid-column: 1/3;
+	}
+
+	.button:nth-of-type(2) {
+		grid-column: 3/5;
+	}
+
 	.form {
-		flex-direction: row;
-		justify-content: flex-start;
 		margin: 0.5em;
 	}
 
 	.form label {
-		flex-basis: 5%;
-		margin: 0 0.5em 0 0;
+		grid-column: 1;
+		text-align: left;
+		margin: 0;
 	}
 
 	.form input {
-		flex-basis: 75%;
+		grid-column: 2/11;
 		margin: 0 0.5em 0 0;
 	}
 
 	.form .button {
-		flex-basis: 20%;
+		grid-column: 11/13;
 		margin: 0;
 	}
 
diff --git a/src/app/title/title.component.html b/src/app/title/title.component.html
index 1ede06f..08fa040 100644
--- a/src/app/title/title.component.html
+++ b/src/app/title/title.component.html
@@ -1,6 +1,6 @@
 <div class="title" [class.active]="formTitleVisible">
 	<h1>{{title.Title}}</h1>
-	<div class="flex">
+	<div class="grid">
 		<button class="button"
 			type="button"
 			(click)="editTitle()">Bearbeiten</button>
@@ -17,7 +17,7 @@
 	</form>
 	<div *ngFor="let subtitle of title.Subtitles; let i = index">
 		<app-subtitle [subtitle]="subtitle"></app-subtitle>
-		<div class="flex">
+		<div class="grid">
 			<button class="button"
 				type="button"
 				(click)="insertSubSection(i)">Einfügen Unterteil</button>