todo_app_flask/app/tasks/templates/tasks.html

59 lines
1.2 KiB
HTML

<style>
#main {
align-items: center;
}
.heading {
margin-top: 40px;
font-size: 2.3rem;
}
.taskContainer {
width: 99%;
max-width: 600px;
margin-bottom: 10px;
border-radius: 9px;
font-size: 1.3rem;
font-weight: bold;
border: 1px solid;
display: flex;
justify-content: space-between;
}
.task {
padding-left: 20px;
padding-right: 20px;
max-width: calc(100% - 70px);
word-wrap: break-word;
}
.taskAction {
background-color: black;
height: 100%;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
width: 30px;
}
.taskActionLink {
text-decoration: none;
}
</style>
{% extends "base.html" %}
{% block content %}
<h1 class="heading">{{ heading }}</h1>
{% for task in tasks %}
{% if task.done == True %}
{% set textColor = "color: grey;" %}
{% else %}
{% set textColor = "color: black;" %}
{% endif %}
<div class="taskContainer">
<div class="task" style="{{ textColor }}">
<p>{{ task.time }}</p> {{ task.markup|safe }}
</div>
<a href="{{ task.href }}" class="taskActionLink">
<button class="taskAction" style="color: white;">{{ task.priority }}</button>
</a>
</div>
{% endfor %}
{% endblock %}