From a83c28f87391ab734fcc74680d6a0022b29c92e7 Mon Sep 17 00:00:00 2001
From: Raphael Maenle <raphael@maenle.net>
Date: Wed, 26 Aug 2020 13:44:01 +0200
Subject: [PATCH] updates calendar webpage flex container

---
 server/template/calendar.html | 14 ++++++++------
 server/template/privacy.html  |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/server/template/calendar.html b/server/template/calendar.html
index d1b7f52..ed48a3d 100644
--- a/server/template/calendar.html
+++ b/server/template/calendar.html
@@ -4,12 +4,14 @@
 <div class="container">
     <div style="width: 4rem;margin:1rem;"></div>
     <div style="width: 10rem; margin: 1rem; font-weight: bold">Calendar</div>
-    <div style="width: 5rem; margin: 1rem; padding-right: 1rem;font-weight: bold">Show on device</div>
-    <div style="width: 2rem; margin: 1rem;font-weight: bold">Color</div>
+    <div style="display: inline-flex">
+        <div style="width: 5rem; margin: 1rem; padding-right: 1rem;font-weight: bold">Show on device</div>
+        <div style="width: 2rem; margin: 1rem;font-weight: bold">Color</div>
+    </div>
 </div>
 
     {% for item in calendars %}
-    <div class="container">
+    <div class="container" style="margin-top: 1.5rem">
         <!--action button-->
         {% if "ical" == item.calType %} 
         <div style="width: 4rem; margin: 1rem;">
@@ -22,10 +24,10 @@
         <div style="width: 4rem; margin: 1rem;"></div>
         {% endif %}
         <!--Name-->
-        <div style="width: 10rem; margin: 1rem;">{{ item.name }}</div>
+        <div style="width: 10rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem">{{ item.name }}</div>
         <div style="display: inline-flex">
         <!--Toggle-->
-        <div style="width: 5rem; margin: 1rem; padding-right: 1rem">
+        <div style="width: 5rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem; padding-right: 1rem">
             <!-- Rounded switch -->
             <label class="switch">
                 <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
@@ -34,7 +36,7 @@
         </div>
 
         <!--Color Selector-->
-        <div style="width: 2rem; margin: 1rem;">
+        <div style="width: 2rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem">
         <div class="colorPickSelector" id={{item.calendarId}}  defaultColor={{item.color}}></div>
             <!--svg height="20" width="20">
                 <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
diff --git a/server/template/privacy.html b/server/template/privacy.html
index b6eb9d8..c532a07 100644
--- a/server/template/privacy.html
+++ b/server/template/privacy.html
@@ -7,7 +7,7 @@
 </div>
 
 <h3 style="margin-left:10rem">Summary</h3>
-<div style="margin-left:10rem; margin-right:10rem;">This Privacy Statement desrcibes how Longitude handles your data and how the developer makes sure, that the user's information remains as secure as possible.
+<div style="margin-left:10rem; margin-right:10rem;">This Privacy Statement describes how Longitude handles your data and how the developer makes sure, that the user's information remains as secure as possible.
 This application does not share any user information with third parties and takes care to only save the minimum amount of information about the user.
 The following chapters cover all essential points of interest about which information is saved and when it is removed from the server.
 If you have any further questions or suggestions, please email us at <a href="mailto:raphael@maenle.net">raphael@maenle.net</a>.</div>