Prettier task edit UI

This commit is contained in:
Victor "multun" Collod 2019-02-10 18:50:32 +01:00
parent 5a26aa65ab
commit 24119b91ac
2 changed files with 89 additions and 74 deletions

View file

@ -3,8 +3,7 @@
<form action="" name="add_task" method="post"> <form action="" name="add_task" method="post">
{% csrf_token %} {% csrf_token %}
<div id="AddEditTask" class="mt-3">
<div id="AddEditTask" class="collapse mt-3">
<div class="form-group"> <div class="form-group">
<label for="id_title" name="title">Task</label> <label for="id_title" name="title">Task</label>
<input type="text" class="form-control" id="id_title" name="title" required placeholder="Task title" <input type="text" class="form-control" id="id_title" name="title" required placeholder="Task title"
@ -33,12 +32,15 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="id_notify">Notify</label> <div class="form-check">
<input type="checkbox" checked="checked" class="form-control" id="id_notify" name="notify" aria-describedby="inputNotifyHelp" <input class="form-check-input" type="checkbox" aria-describedby="inputNotifyHelp" checked="checked" id="id_notify">
value="{{ form.notify.text }}"> <label class="form-check-label" for="id_notify">
<small id="inputNotifyHelp" class="form-text text-muted"> Notify
Email notifications will only be sent if task is assigned to someone other than yourself. </label>
</small> <small id="inputNotifyHelp" class="form-text text-muted">
Email notifications will only be sent if task is assigned to someone other than yourself.
</small>
</div>
</div> </div>
<input type="hidden" name="priority" <input type="hidden" name="priority"

View file

@ -19,49 +19,46 @@
{% block content %} {% block content %}
<div class="row"> <div class="card-deck">
<div class="col-sm-8"> <div class="card col-sm-8">
<h3 class="card-title">{{ task.title }}</h3> <div class="card-body">
{% if task.note %} <h3 class="card-title">{{ task.title }}</h3>
<p class="card-text">{{ task.note|safe|urlize|linebreaks }}</p> {% if task.note %}
{% endif %} <div class="card-text">{{ task.note|safe|urlize|linebreaks }}</div>
{% endif %}
</div>
</div> </div>
<div class="col-sm-4"> <div class="card col-sm-4 p-0">
<div class="mb-2"> <ul class="list-group list-group-flush">
<li class="list-group-item">
<button <button
class="btn btn-sm btn-primary" class="btn btn-sm btn-primary"
id="EditTaskButton" id="EditTaskButton"
type="button" type="button"
data-toggle="collapse" data-toggle="collapse"
data-target="#AddEditTask" data-target="#TaskEdit">
>
Edit Task Edit Task
</button> </button>
<form method="post" action="{% url "todo:task_toggle_done" task.id %}" role="form" style="display:inline;"> <form method="post" action="{% url "todo:task_toggle_done" task.id %}" role="form" class="d-inline">
{% csrf_token %} {% csrf_token %}
<div style="display:inline;"> <div style="display:inline;">
<button class="btn btn-info btn-sm" type="submit" name="toggle_done"> <button class="btn btn-info btn-sm" type="submit" name="toggle_done">
{% if task.completed %} Mark Not Done {% else %} Mark Done {% endif %} {% if task.completed %} Mark Not Done {% else %} Mark Done {% endif %}
</button> </button>
</div> </div>
</form> </form>
<form method="post" action="{% url "todo:delete_task" task.id %}" role="form" style="display:inline;">
{% csrf_token %}
<div style="display:inline;">
<button class="btn btn-danger btn-sm" type="submit" name="submit_delete">
Delete
</button>
</div>
</form>
</div>
<ul class="list-group">
<form method="post" action="{% url "todo:delete_task" task.id %}" role="form" class="d-inline">
{% csrf_token %}
<div style="display:inline;">
<button class="btn btn-danger btn-sm" type="submit" name="submit_delete">
Delete
</button>
</div>
</form>
</li>
<li class="list-group-item"> <li class="list-group-item">
<strong>Assigned to:</strong> <strong>Assigned to:</strong>
{% if task.assigned_to %} {{ task.assigned_to.get_full_name }} {% else %} Anyone {% endif %} {% if task.assigned_to %} {{ task.assigned_to.get_full_name }} {% else %} Anyone {% endif %}
@ -89,51 +86,67 @@
{{ task.task_list }} {{ task.task_list }}
</a> </a>
</li> </li>
<li class="list-group-item">
<form action="" method="post">
{% csrf_token %}
{% for field in merge_form.visible_fields %}
<p>
{{ field.errors }}
{{ field }}
</p>
{% endfor %}
<input class="btn btn-sm btn-primary" type="submit" name="merge_task_into" value="Merge task">
</form>
</li>
</ul> </ul>
</div> </div>
</div> </div>
<div id="TaskEdit"> <div id="TaskEdit" class="collapse">
{# Task edit / new task form #} {# Task edit / new task form #}
{% include 'todo/include/task_edit.html' %} {% include 'todo/include/task_edit.html' %}
<form action="" method="post">
<div class="card border-danger">
<div class="card-header">Merge task</div>
<div class="card-body">
<div class="">
<p>Merging is a destructive operation. This task will not exist anymore, and comments will be moved to the target task.</p>
{% csrf_token %}
{% for field in merge_form.visible_fields %}
<p>
{{ field.errors }}
{{ field }}
</p>
{% endfor %}
<input class="d-inline btn btn-sm btn-outline-danger" type="submit" name="merge_task_into" value="Merge">
</div>
</div>
</div>
</form>
</div> </div>
<div class="mt-3">
<h5>Add comment</h5> <h5>Add comment</h5>
<form action="" method="post"> <form action="" method="post">
{% csrf_token %} {% csrf_token %}
<div class="form-group"> <div class="form-group">
<textarea class="form-control" name="comment-body" rows="3"></textarea> <textarea class="form-control" name="comment-body" rows="3"></textarea>
</div> </div>
<input class="btn btn-sm btn-primary" type="submit" name="add_comment" value="Add Comment"> <input class="btn btn-sm btn-primary" type="submit" name="add_comment" value="Add Comment">
</form> </form>
</div>
<div class="task_comments mt-4"> <div class="task_comments mt-4">
{% if comment_list %} {% if comment_list %}
<h5>Comments on this task</h5> <h5>Comments on this task</h5>
{% for comment in comment_list %} {% for comment in comment_list %}
<p> <div class="mb-3 card">
<strong>{{ comment.author_text }}, <div class="card-header">
<div class="float-left">
{% if comment.email_message_id %}
<span class="badge badge-warning">email</span>
{% endif %}
{{ comment.author_text }}
</div>
<span class="float-right d-inline-block text-muted">
{{ comment.date|date:"F d Y P" }} {{ comment.date|date:"F d Y P" }}
</strong> </span>
</p> </div>
{{ comment.body|safe|urlize|linebreaks }} <div class="text-monospace card-body">
{{ comment.body|safe|urlize|linebreaks }}
</div>
</div>
{% endfor %} {% endfor %}
{% else %} {% else %}
<h5>No comments (yet).</h5> <h5>No comments (yet).</h5>
{% endif %} {% endif %}
</div> </div>
{% endblock %} {% endblock %}