From 282027ed030da7678d1cda4345446ea5754395f3 Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Thu, 18 Aug 2022 18:37:43 +0200
Subject: [PATCH] subtitle.component: change flex to grid

---
 src/app/subtitle/subtitle.component.css  | 44 ++++++++++++++----------
 src/app/subtitle/subtitle.component.html |  4 +--
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/app/subtitle/subtitle.component.css b/src/app/subtitle/subtitle.component.css
index 7ed3e99..5559713 100644
--- a/src/app/subtitle/subtitle.component.css
+++ b/src/app/subtitle/subtitle.component.css
@@ -7,28 +7,30 @@
 	background-color: #fff6e6;
 }
 
-.flex {
-	display: flex;
-	flex-direction: column;
-	margin-bottom: 0.5em;
+.grid {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
 }
 
 .button {
+	grid-column: 1/13;
 	margin-bottom: 0.5em;
 }
 
 .form {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
 	margin: 0.5em 0;
 }
 
 .form label {
-	align-self: center;
+	grid-column: 1/13;
+	text-align: center;
 	margin: 0.5em 0;
 }
 
 .form input {
+	grid-column: 1/13;
 	margin: 0.5em 0;
 }
 
@@ -39,31 +41,35 @@ h2 {
 }
 
 @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;
 	}
 
-	.form {
-		flex-direction: row;
+	.button:nth-of-type(1) {
+		grid-column: 1/3;
+	}
+
+	.button:nth-of-type(2) {
+		grid-column: 3/5;
+	}
+
+	.button:nth-of-type(3) {
+		grid-column: 5/7;
 	}
 
 	.form label {
-		flex-basis: 5%;
-		margin: 0 0.5em 0 0;
+		grid-column: 1;
+		text-align: left;
+		margin: 0;
 	}
 
 	.form input {
-		flex-basis: 75%;
-		margin: 0 0.5em 0 0;
+		grid-column: 2/11;
+		margin: 0 0.5em;
 	}
 
 	.form .button {
+		grid-column: 11/13;
 		margin: 0;
 	}
 
diff --git a/src/app/subtitle/subtitle.component.html b/src/app/subtitle/subtitle.component.html
index 10e1390..b5ef99a 100644
--- a/src/app/subtitle/subtitle.component.html
+++ b/src/app/subtitle/subtitle.component.html
@@ -4,7 +4,7 @@
 	class="subtitle"
 	[class.active]="formSubtitleVisible">
 	<h2>{{subtitle.Subtitle}}</h2>
-	<div class="flex">
+	<div class="grid">
 		<button class="button"
 			type="button"
 			(click)="editSubtitle()">Bearbeiten</button>
@@ -29,7 +29,7 @@
 
 	<div *ngFor="let food of subtitle.Foods; let i = index" cdkDrag>
 		<app-food [food]="food"></app-food>
-		<div class="flex">
+		<div class="grid">
 			<button class="button"
 				type="button"
 				(click)="insertNewFood(i)">Einfügen</button>
-- 
2.39.5