From 00eeaa4dd43e39b19ef05671f8ecc98ffe22cbb2 Mon Sep 17 00:00:00 2001
From: Krehan Tim <mail@timkrehan.de>
Date: Mon, 29 Oct 2018 08:45:49 +0100
Subject: [PATCH] added export layout

---
 cont/settings.php  |  9 +++++++--
 style/master.css   |  9 +++++++++
 style/settings.css | 28 +++++++++++++++++++++-------
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/cont/settings.php b/cont/settings.php
index faeedc2..164e5f0 100644
--- a/cont/settings.php
+++ b/cont/settings.php
@@ -1,6 +1,5 @@
 <link rel="stylesheet" href="/style/settings.css">
 <h1>Settings</h1>
-<h2>User</h2>
 <?php
   include $_SESSION["docroot"].'/php/connect.php';
   $token = $_COOKIE["token"];
@@ -9,7 +8,8 @@
   $user = $result->fetch_assoc();
 ?>
 <div class="settings">
-  <div class="userprofile-pane">
+  <h2>User</h2>
+  <div class="userprofile-pane pane">
     <div class="userprofile">
       <span><font class="attribute">Benutzername</font><input class="change-attribute-input" type="text" name="username" value="<?php echo $user["username"]; ?>"></span>
       <span><font class="attribute">Email</font><input class="change-attribute-input" type="text" name="username" value="<?php echo $user["email"]; ?>"></span>
@@ -17,4 +17,9 @@
     </div>
     <button class="button" id="saveButton">Speichern</button>
   </div>
+  <div class="import-export-pane">
+    <h2>Import / Export</h2>
+    <p>Hiermit werden alle Rezepte und sich zurzeit auf der Shoppingliste befindlichen Einträge als Download zur Verfügung gestellt. Diese Datei kann dann an anderer Stelle wieder Importiert werden, oder als Backup abgespeichert werden.</p>
+    <button type="button" name="button" class="button">Export</button>
+  </div>
 </div>
diff --git a/style/master.css b/style/master.css
index 864a674..bb4d180 100644
--- a/style/master.css
+++ b/style/master.css
@@ -26,6 +26,15 @@ h2 {
   width: 80%;
 }
 
+h3 {
+  font-size: 1.5em;
+  text-align: left;
+  margin-top: .5em;
+  padding-bottom: .5em;
+  border-bottom: 1px solid grey;
+  width: 75%;
+}
+
 .even {
   background-color: #565656;
 }
diff --git a/style/settings.css b/style/settings.css
index 2ce0911..a89a802 100644
--- a/style/settings.css
+++ b/style/settings.css
@@ -1,12 +1,26 @@
-.userprofile {
-  width: 30em;
-  max-width: 90%;
-  margin: 0 auto;
+.settings {
   display: flex;
+  justify-content: flex-start;
   flex-direction: column;
+  flex-wrap: wrap;
+}
+.pane {
   border: 1px solid grey;
   border-radius: 5px;
   background-color: #ddd;
+  margin: 1em;
+  min-width: max-content;
+  max-width: 50%;
+}
+.userprofile-pane {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.userprofile {
+  width: 22em;
+  display: flex;
+  flex-direction: column;
 }
 .userprofile span {
   display: flex;
@@ -18,13 +32,13 @@
   padding: 1em;
 }
 .change-attribute-input {
-
+  text-indent: 1em;
+  color: grey;
 }
 .value {
   padding: 1em;
 }
 #saveButton {
+  align-self: flex-end;
   margin: 1em;
-  width: min-content;
-  float: right;
 }