change: style for app

diff --git a/src/app/app.component.css b/src/app/app.component.css
index c43b53e728cbcf2647c5a699d7757ab5965aab04..c02b93b7c8234ad9583207f7c85b488528c3f148 100644 (file)
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -3,10 +3,34 @@
        margin: 0 auto;
 }
 
+.flex {
+       display: flex;
+       flex-direction: column;
+       justify-content: center;
+}
+
+input {
+       margin: 0.2em
+}
+
+.button {
+       margin: 0.2em;
+}
+
 h1 {
-       text-align: left;
+       text-align: center;
 }
 
 .version {
        text-align: center;
 }
+
+@media only screen and (min-width: 46.875em) {
+       .flex {
+               flex-direction: row;
+       }
+
+       .button {
+               
+       }
+}

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6d118d7ff30a990b8f509409a76bdc9c25d83a7e..36177f5147e40a35ac1ce9e1960cfc4956383e95 100644 (file)
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,30 +1,32 @@
 <div class=foodcardeditor>
        <h1>Speisekarten-Editor</h1>
-       <input type="file"
-               name="fileupload"
-               (change)="fileEvent($event)" />
-       <button class="button"
-               type="button"
-               id="exportJson"
-               (click)="exportJson()">Export Json</button>
-       <a #exportJsonLink
-               id="exportJsonLink"
-               [href]="downloadJsonHref"
-               hidden="hidden"
-               download="speisekarte.json">Json</a>
-       <button class="button"
-               type="button"
-               id="exportHtml"
-               (click)="exportHtml()">Export Html</button>
-       <a #exportHtmlLink
-               id="exportHtmlLink"
-               [href]="downloadHtmlHref"
-               hidden="hidden"
-               download="speisekarte.html">Html</a>
-       <button class="button"
-               type="button"
-               id="addTitle"
-               (click)="addTitle()">Titel Hinzufügen</button>
+       <div class="flex">
+               <input type="file"
+                       name="fileupload"
+                       (change)="fileEvent($event)" />
+               <button class="button"
+                       type="button"
+                       id="exportJson"
+                       (click)="exportJson()">Export Json</button>
+               <a #exportJsonLink
+                       id="exportJsonLink"
+                       [href]="downloadJsonHref"
+                       hidden="hidden"
+                       download="speisekarte.json">Json</a>
+               <button class="button"
+                       type="button"
+                       id="exportHtml"
+                       (click)="exportHtml()">Export Html</button>
+               <a #exportHtmlLink
+                       id="exportHtmlLink"
+                       [href]="downloadHtmlHref"
+                       hidden="hidden"
+                       download="speisekarte.html">Html</a>
+               <button class="button"
+                       type="button"
+                       id="addTitle"
+                       (click)="addTitle()">Titel Hinzufügen</button>
+       </div>
        <app-foodcard [foodcard]="foodcard"></app-foodcard>
        <div class="version">{{version}}</div>
 </div>