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 e387a15f800f416008f5c628dc371020882fc1b0..4dacf796b9bf8ad3b12666ac211d5b2e3130913f 100644 (file)
--- 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 1ede06fd0e8daf3b284c6eb012571cb6449a2c25..08fa040c49658ba7e7deb738d05f8f032298dfb3 100644 (file)
--- 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>