fixes typo, adds flex divs for improved mobile view

This commit is contained in:
Raphael Maenle 2020-08-18 21:04:09 +02:00
parent f3ab6834fc
commit 2e81d53f9d
3 changed files with 16 additions and 10 deletions

View File

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

View File

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

View File

@ -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> <h3 style="margin-left:10rem">What Information is saved?</h3>
<div style="margin-left:10rem; margin-right:10rem;"> <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> <ul>
<li>Username and hashed password or alternatively</li> <li>Username and hashed password or alternatively</li>
<li>Google Username and Id with Google Login Token</li> <li>Google Username and Id with Google Login Token</li>