further updates for mobile experience

as described in https://serverfault.com/questions/407612/error-2006-mysql-server-has-gone-away
the uwsgi server usually forks its workers from the parent, which already has a connection
open to the mysql database. So the new child typically inherits the same connection.
Should both workers use the same connection at the same time, the server connection throws a
'2006, server has gone away error'.
The flag --lazy creates fresh forks for each child, each creating a new connection.
This prevents the overload and after testing, the '2006' error seems to not be reproduceable.

docker/calendarwatch/docker-entrypoint.sh

@@ -1,5 +1,17 @@
 #!/bin/sh
 cd /home/calendarwatch
-uwsgi --ini wsgi.ini
+
+# use flasks own uwsgi server for debugging:
+# export FLASK_APP=/home/calendarwatch/server.py
+# python3 server.py
+
+
+# the --lazy flag forks() a new instance of the server
+# instead of forking from the parent and copying the same mysql
+# connection. If you don't do that, then multiple forks will use
+# the same connection at the same time, causing the server to throw
+# a 'connection has gone away' error.
+# more here: https://serverfault.com/questions/407612/error-2006-mysql-server-has-gone-away
+uwsgi --ini wsgi.ini --lazy
 echo "server has been started"  
 

server/static/css/main.css

@@ -69,7 +69,7 @@ body
 }
 
 .grayblock .padded {
-    padding: 3rem; 
+    padding: 0rem; 
 }
 
 .horizontal {
@@ -91,11 +91,13 @@ body
 }
 
 .vertical .content .image {
+    max-width: 90%;
     width: 25rem;
 }
 
 .vertical .content .text {
-    margin-left: 2rem;
+    max-width: 90%;
+    margin: auto;
     width: 26rem;
 }
 
@@ -106,8 +108,6 @@ body
 
 .horizontal .image {
     margin: 1rem;
-    margin-left: 4rem;
-    margin-right: 4rem;
     height: 20rem;
     border-radius: 1rem;
     width: auto;
@@ -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;
@@ -211,6 +211,7 @@ body
     display: block;
     text-align: left;
   }
+  
 }
 
 /* Style page content */
@@ -289,25 +290,27 @@ 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;
+    /*padding: 0px 2rem 0px 2rem;*/
 }
 
 .container .button {
    padding: 1rem 1.5rem 1rem 1.5rem;
    font-size: 2rem;
-   margin: 4rem;
+   margin: 4rem 1rem 1rem 1rem;
    color: black;
    text-decoration: none;
 }
 
 .container .preview {
     width: 20rem;
-    height: 20rem;
+    height: auto;
     margin: 1rem 3rem 4rem 3rem;
+    max-width: 100%;
 }
 
 .container .button.logout {
@@ -328,8 +331,9 @@ body
 }
 
 .sub.container {
-    width: 20rem;
+    width: 40%;
     justify-content: left;
+    display: flex;
 }
 
 .profile {
@@ -349,6 +353,7 @@ body
 .profile .name {
     font-size: 3rem;
     color: #333;
+    text-align: center;
 }
 
 .grey {
@@ -366,3 +371,10 @@ body
     border-radius: 5px; 
     margin-right: 1rem;
 }
+
+
+@media (max-width:800px) { 
+  .sub.container {
+    justify-content: center;
+  }
+}

server/template/calendar.html

@@ -2,25 +2,32 @@
 {% block body%}
 
 <div class="container">
-    <div style="width: 15rem; margin: 1rem">Calendar</div>
+    <div style="width: 4rem;margin:1rem;"></div>
-    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Show on device</div>
+    <div style="width: 10rem; margin: 1rem; font-weight: bold">Calendar</div>
-    <div style="width: 2rem; margin: 1rem">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;">
             <form action="" method="post">
                 <input type="hidden" name="calendar" value={{ item.calendarId }}>
                 <input type="submit" name="submit" value="Remove">
             </form> 
         </div>
+        {% else %}
+        <div style="width: 4rem; margin: 1rem;"></div>
+        {% endif %}
         <!--Name-->
-        <div style="width: 15rem; 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: 10rem; margin: 1rem; padding-right: 5rem">
+        <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)">
@@ -29,12 +36,13 @@
         </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 }} />
             </svg--> 
         </div>
+        </div>
         
     </div>
     {% endfor %}
@@ -43,10 +51,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/footer.html

@@ -1,7 +1,7 @@
 
 <div id="footer">
 
-    <div class="footer">
+    <div class="footer container">
         <p>made by Raphael Maenle </p>  
         <p><a href="mailto:raphael@maenle.net">raphael@maenle.net</a></p>
       <p><a href="/privacy">privacy policy</a></p>

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 descibes how Longitude handles your data and how the developer makes sure, that the users 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>
@@ -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>

server/template/sidebar.html

@@ -39,6 +39,8 @@
                 // content here
                 {% endblock %}
 
+          </div>
+          <div id="main">
           </div>
           {% include "footer.html" %}
     </div>

server/template/startpage.html

@@ -12,13 +12,15 @@
 <div class="grayblock horizontal">
     <div class="content padded">
         <div style='margin: 1rem'>
-            Connect your <img src='/static/res/googlelogo.png' style='height: 2.2rem; vertical-align:middle; padding-Bottom: 0.1rem'/> Calendar...
+            <!--Connect your <img src='/static/res/googlelogo.png' style='height: 3.2rem; vertical-align:middle; padding-Bottom: 0.1rem'/> Calendar...-->
+            Connect your Calendar..
         </div>
         <img class="image" src='/static/res/calendar.svg'/>
     </div>
     <div class="content padded">
         <div style='margin: 1rem'>
-            ...with your <img src='/static/res/tizenlogo.png' style='height: 2rem; vertical-align:middle; padding-Bottom:0.3rem;'/> Watchface
+            <!--...with your <img src='/static/res/tizenlogo.png' style='height: 2rem; vertical-align:middle; padding-Bottom:0.3rem;'/> Watchface-->
+            ..with your Tizen Watchface
         </div>
         <img class="image" src='/static/res/watchface.svg'/>
     </div>