Merge pull request #133 from bobsilverberg/task_detail_2

Bug 1011688 - Update Task detail page
mozilla · Jun 26, 2014 · bbd953e · bbd953e
2 parents ad92940 + af23c14
commit bbd953e
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 17 deletions.
diff --git a/oneanddone/base/static/css/one-and-done.less b/oneanddone/base/static/css/one-and-done.less
@@ -201,6 +201,15 @@ footer {
         margin-left: .5rem;
         vertical-align: top;
     }
+    .without-message {
+        display: inline-block;
+        margin-left: .5rem;
+        vertical-align: top;
+        a {
+            padding-top: 7px;
+            padding-bottom: 6px;
+        }
+    }
     .with-message {
         display: inline-block;
         width: 200px;
@@ -354,7 +363,8 @@ section[class *="-section"] {
 
 /* Task edit form */
 
-.task-form {
+.task-form,
+.task-detail {
 
     width: 95%;
 
@@ -393,4 +403,8 @@ section[class *="-section"] {
       .span(25%)
     }
 
+    .two-of-three-fields {
+      .span(66%)
+    }
+
 }
diff --git a/oneanddone/tasks/models.py b/oneanddone/tasks/models.py
@@ -73,6 +73,17 @@ class Task(CreatedModifiedModel, CreatedByModel):
     start_date = models.DateTimeField(blank=True, null=True)
     why_this_matters = models.TextField(blank=True)
 
+    def _yield_html(self, field):
+        """
+        Return the requested field for a task after parsing them as
+        markdown and bleaching/linkifying them.
+        """
+        linkified_field = bleach.linkify(field, parse_email=True)
+        html = markdown(linkified_field, output_format='html5')
+        cleaned_html = bleach.clean(html, tags=settings.INSTRUCTIONS_ALLOWED_TAGS,
+                                    attributes=settings.INSTRUCTIONS_ALLOWED_ATTRIBUTES)
+        return jinja2.Markup(cleaned_html)
+
     @property
     def keywords_list(self):
         return ', '.join([keyword.name for keyword in self.keyword_set.all()])
@@ -91,15 +102,15 @@ def is_available(self):
 
     @property
     def instructions_html(self):
-        """
-        Return the instructions for a task after parsing them as
-        markdown and bleaching/linkifying them.
-        """
-        linkified_instructions = bleach.linkify(self.instructions, parse_email=True)
-        html = markdown(linkified_instructions, output_format='html5')
-        cleaned_html = bleach.clean(html, tags=settings.INSTRUCTIONS_ALLOWED_TAGS,
-                                    attributes=settings.INSTRUCTIONS_ALLOWED_ATTRIBUTES)
-        return jinja2.Markup(cleaned_html)
+        return self._yield_html(self.instructions)
+
+    @property
+    def prerequisites_html(self):
+        return self._yield_html(self.prerequisites)
+
+    @property
+    def why_this_matters_html(self):
+        return self._yield_html(self.why_this_matters)
 
     def get_absolute_url(self):
         return reverse('tasks.detail', args=[self.id])

diff --git a/oneanddone/tasks/templates/tasks/detail.html b/oneanddone/tasks/templates/tasks/detail.html
@@ -6,14 +6,82 @@
 {% set title = task.name %}
 
 {% block content %}
-<main class="billboard content-container">
+<main class="billboard content-container task-detail">
   <h1>{{ task.name }}</h1>
-  <div class="markdown">{{ task.instructions_html }}</div>
-  <p>
-    {% trans execution_time=task.execution_time %}
-      Estimated time needed for completion: {{ execution_time }} minutes
-    {% endtrans %}
-  </p>
+  <div class="row">
+    <div>{{ task.short_description }}</div>
+  </div>
+  <div class="row">
+    <div class="three-fields">
+      {{ _('Team') }}:
+      <a href="{{ url('tasks.available')|urlparams(team=task.team.name) }}">
+        {{ task.team.name }}
+      </a>
+    </div>
+    <div class="three-fields">
+      {% if task.project.name %}
+        {{ _('Project') }}:
+        <a href="{{ url('tasks.available')|urlparams(project=task.project.name) }}">{{ task.project.name }}</a>
+      {% endif %}
+    </div>
+    <div class="three-fields">
+      {% if task.type.name %}
+        {{ _('Type') }}:
+        <a href="{{ url('tasks.available')|urlparams(type=task.type.name) }}">{{ task.type.name }}</a>
+      {% endif %}
+    </div>
+  </div>
+  <div class="row">
+    <div class="three-fields">
+      {% trans execution_time=task.execution_time %}
+        Estimated time: {{ execution_time }} minutes
+      {% endtrans %}
+    </div>
+    <div class="two-of-three-fields">
+      {% if task.keyword_set.exists() %}
+        {{ _('Tags:') }}
+        {% for keyword in task.keyword_set.all() %}
+          <a href="{{ url('tasks.available')|urlparams(keyword=keyword.name) }}">{{ keyword.name }}</a>{% if keyword != task.keyword_set.all()|last %}, {% endif %}
+        {% endfor %}
+      {% endif %}
+    </div>
+  </div>
+  <div class="row">
+    <div class="three-fields">
+      {% if task.start_date %}
+        {{ _('Start date') }}: {{ task.start_date.strftime('%Y-%m-%d') }}
+      {% elif task.end_date %}
+        {{ _('Expiration date') }}: {{ task.end_date.strftime('%Y-%m-%d') }}
+      {% endif %}
+    </div>
+    <div class="two-of-three-fields">
+      {% if task.start_date and task.end_date %}
+        {{ _('Expiration date') }}: {{ task.end_date.strftime('%Y-%m-%d') }}
+      {% endif %}
+    </div>
+  </div>
+  {% if task.why_this_matters %}
+    <div class="row">
+      <div>
+        <h2>{{ _('Why this matters') }}</h2>
+        <div class="markdown">{{ task.why_this_matters_html }}</div>
+      </div>
+    </div>
+  {% endif %}
+  {% if task.prerequisites %}
+    <div class="row">
+      <div>
+        <h2>{{ _('Prerequisites') }}</h2>
+        <div class="markdown">{{ task.prerequisites_html }}</div>
+      </div>
+    </div>
+  {% endif %}
+  <div class="row">
+    <div>
+      <h2>{{ _('Steps') }}</h2>
+      <div class="markdown">{{ task.instructions_html }}</div>
+    </div>
+  </div>
 
   <div class="actions-container">
     {% if attempt %}
@@ -52,6 +120,11 @@ <h1>{{ task.name }}</h1>
         {% endif %}
       {% endif %}
     {% endif %}
+    {% if user.is_staff %}
+      <div class="without-message">
+          <a href="{{ task.get_edit_url() }}" class="button" id="edit-task">{{ _('Edit task') }}</a>
+      </div>
+    {% endif %}
   </div>
 </main>
 {% endblock %}