From 24119b91acf1b9aaa3503c629f1c78c75b5ed3ea Mon Sep 17 00:00:00 2001
From: "Victor \"multun\" Collod" <victor.collod@epita.fr>
Date: Sun, 10 Feb 2019 18:50:32 +0100
Subject: [PATCH] Prettier task edit UI

---
 todo/templates/todo/include/task_edit.html |  18 +--
 todo/templates/todo/task_detail.html       | 145 +++++++++++----------
 2 files changed, 89 insertions(+), 74 deletions(-)

diff --git a/todo/templates/todo/include/task_edit.html b/todo/templates/todo/include/task_edit.html
index cabee0c..3713958 100644
--- a/todo/templates/todo/include/task_edit.html
+++ b/todo/templates/todo/include/task_edit.html
@@ -3,8 +3,7 @@
 <form action="" name="add_task" method="post">
   {% csrf_token %}
 
-
-  <div id="AddEditTask" class="collapse mt-3">
+  <div id="AddEditTask" class="mt-3">
     <div class="form-group">
       <label for="id_title" name="title">Task</label>
       <input type="text" class="form-control" id="id_title" name="title" required placeholder="Task title"
@@ -33,12 +32,15 @@
     </div>
 
     <div class="form-group">
-      <label for="id_notify">Notify</label>
-      <input type="checkbox" checked="checked" class="form-control" id="id_notify" name="notify" aria-describedby="inputNotifyHelp"
-        value="{{ form.notify.text }}">
-      <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 class="form-check">
+        <input class="form-check-input" type="checkbox" aria-describedby="inputNotifyHelp" checked="checked" id="id_notify">
+        <label class="form-check-label" for="id_notify">
+          Notify
+        </label>
+        <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>
 
     <input type="hidden" name="priority"
diff --git a/todo/templates/todo/task_detail.html b/todo/templates/todo/task_detail.html
index cfde051..05338aa 100644
--- a/todo/templates/todo/task_detail.html
+++ b/todo/templates/todo/task_detail.html
@@ -19,49 +19,46 @@
 
 
 {% block content %}
-  <div class="row">
-    <div class="col-sm-8">
-      <h3 class="card-title">{{ task.title }}</h3>
-      {% if task.note %}
-        <p class="card-text">{{ task.note|safe|urlize|linebreaks }}</p>
-      {% endif %}
+  <div class="card-deck">
+    <div class="card col-sm-8">
+      <div class="card-body">
+        <h3 class="card-title">{{ task.title }}</h3>
+        {% if task.note %}
+        <div class="card-text">{{ task.note|safe|urlize|linebreaks }}</div>
+        {% endif %}
+      </div>
     </div>
 
-    <div class="col-sm-4">
-      <div class="mb-2">
-
-        <button
-          class="btn btn-sm btn-primary"
-          id="EditTaskButton"
-          type="button"
-          data-toggle="collapse"
-          data-target="#AddEditTask"
-        >
+    <div class="card col-sm-4 p-0">
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">
+          <button
+            class="btn btn-sm btn-primary"
+            id="EditTaskButton"
+            type="button"
+            data-toggle="collapse"
+            data-target="#TaskEdit">
             Edit Task
-        </button>
+          </button>
 
-        <form method="post" action="{% url "todo:task_toggle_done" task.id %}" role="form" style="display:inline;">
-          {% csrf_token %}
-          <div style="display:inline;">
-            <button class="btn btn-info btn-sm" type="submit" name="toggle_done">
-              {% if task.completed %} Mark Not Done {% else %} Mark Done {% endif %}
-            </button>
-          </div>
-        </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:task_toggle_done" task.id %}" role="form" class="d-inline">
+            {% csrf_token %}
+            <div style="display:inline;">
+              <button class="btn btn-info btn-sm" type="submit" name="toggle_done">
+                {% if task.completed %} Mark Not Done {% else %} Mark Done {% endif %}
+              </button>
+            </div>
+          </form>
 
+          <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">
           <strong>Assigned to:</strong>
           {% if task.assigned_to %} {{ task.assigned_to.get_full_name }} {% else %} Anyone {% endif %}
@@ -89,51 +86,67 @@
             {{ task.task_list }}
           </a>
         </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>
     </div>
   </div>
 
-  <div id="TaskEdit">
+  <div id="TaskEdit" class="collapse">
     {# Task edit / new task form #}
     {% 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>
 
-
-  <h5>Add comment</h5>
-  <form action="" method="post">
-    {% csrf_token %}
-    <div class="form-group">
-      <textarea class="form-control" name="comment-body" rows="3"></textarea>
-    </div>
-    <input class="btn btn-sm btn-primary" type="submit" name="add_comment" value="Add Comment">
-  </form>
+  <div class="mt-3">
+    <h5>Add comment</h5>
+    <form action="" method="post">
+      {% csrf_token %}
+      <div class="form-group">
+        <textarea class="form-control" name="comment-body" rows="3"></textarea>
+      </div>
+      <input class="btn btn-sm btn-primary" type="submit" name="add_comment" value="Add Comment">
+    </form>
+  </div>
 
   <div class="task_comments mt-4">
     {% if comment_list %}
       <h5>Comments on this task</h5>
       {% for comment in comment_list %}
-        <p>
-          <strong>{{ comment.author_text }},
+      <div class="mb-3 card">
+        <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" }}
-          </strong>
-        </p>
-        {{ comment.body|safe|urlize|linebreaks }}
+          </span>
+        </div>
+        <div class="text-monospace card-body">
+          {{ comment.body|safe|urlize|linebreaks }}
+        </div>
+      </div>
       {% endfor %}
     {% else %}
         <h5>No comments (yet).</h5>
     {% endif %}
   </div>
-
 {% endblock %}