fixes typo, adds flex divs for improved mobile view

server/static/css/main.css

@@ -156,7 +156,7 @@ body
     background-color: #eaeaea;
     overflow: hidden;
     margin: auto;
-    display: flex;
+    display: block;
 }
 
 .navigation_rightside {
@@ -165,7 +165,7 @@ body
 
 .navigation a {
     float: left;
-    display: flex;
+    display: block;
     color: #333;
     text-align: center;
     padding: 14px 16px;
@@ -289,10 +289,11 @@ body
   }
 
 .container {
-    display: inline-flex;
+    display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     align-items:center;
-    flex-direction: row;
+    /* flex-direction: row; */
     padding: 0px 2rem 0px 2rem;
 }
 

server/template/calendar.html

@@ -3,8 +3,8 @@
 
 <div class="container">
     <div style="width: 4rem;margin:1rem;"></div>
-    <div style="width: 15rem; margin: 1rem; font-weight: bold">Calendar</div>
-    <div style="width: 10rem; margin: 1rem; padding-right: 5rem;font-weight: bold">Show on device</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>
 
@@ -22,10 +22,10 @@
         <div style="width: 4rem; margin: 1rem;"></div>
         {% endif %}
         <!--Name-->
-        <div style="width: 15rem; margin: 1rem;">{{ item.name }}</div>
-
+        <div style="width: 10rem; margin: 1rem;">{{ item.name }}</div>
+        <div style="display: inline-flex">
         <!--Toggle-->
-        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
+        <div style="width: 5rem; margin: 1rem; padding-right: 1rem">
             <!-- Rounded switch -->
             <label class="switch">
                 <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
@@ -40,6 +40,7 @@
                 <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
             </svg--> 
         </div>
+        </div>
         
     </div>
     {% endfor %}
@@ -48,10 +49,14 @@
     <form action="" method="post">
     <div class="container grey" style="margin-top: 3rem;">
         <div>{{ form.hidden_tag() }}</div>
+        <div style="display: flex">
         <div style="margin: 1rem">{{ form.calName.label }}</div>
         <div style="margin: 1rem">{{ form.calName(size=24) }}</div>
+        </div>
+        <div style="display: flex">
         <div style="margin: 1rem">{{ form.iCalURL.label }}</div>
         <div style="margin: 1rem">{{ form.iCalURL(size=24) }}</div>
+        </div>
         <div style="with: 8rem; margin: 1rem">{{ form.submit() }}</div>
         {% for error in form.iCalURL.errors %}
         <span style="color: red;">[{{ error }}]</span>

server/template/privacy.html

@@ -15,7 +15,7 @@ If you have any further questions or suggestions, please email us at <a href="ma
 
 <h3 style="margin-left:10rem">What Information is saved?</h3>
 <div style="margin-left:10rem; margin-right:10rem;">
-Longitude Calendar saves as little information about their users as possible. The application handles sensitive information only when directly prompted by the user or a device associated with the user. The service only provides this information to the user or a device associated with the user. The data saved in the Longidute Databas is
+Longitude Calendar saves as little information about their users as possible. The application handles sensitive information only when directly prompted by the user or a device associated with the user. The service only provides this information to the user or a device associated with the user. The data saved in the Longidute Database is
 <ul>
     <li>Username and hashed password or alternatively</li>
     <li>Google Username and  Id with Google Login Token</li>