fixes typo, adds flex divs for improved mobile view

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

View File

@ -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>