subtitle.component: change flex to grid

diff --git a/src/app/subtitle/subtitle.component.css b/src/app/subtitle/subtitle.component.css
index 7ed3e997debef8f9cfe12afe9ee2f341c53b79f7..5559713acc4d2c9c7dd7b2a6c6cd82b6c013e9c4 100644 (file)
--- 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 10e1390bdf1f822aba83461abb0a9b94051dc2a5..b5ef99a7802004915eea484857abcbea1823eb80 100644 (file)
--- 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>