cleaned up UI of project/task pages -- particularly list of deliverab…

…les links

resolves #62

src/marketplace/templates/marketplace/components/proj_task_deliverables_list.html

@@ -0,0 +1,41 @@
+{% if task.task_home_url %}
+<a href="{{ task.task_home_url }}" target="_blank" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+    External task home
+    <span class="material-icons d-inline-flex"><small>open_in_new</small></span>
+</a>
+{% endif %}
+
+{% if task.task_deliverables_url %}
+<a href="{{ task.task_deliverables_url }}" target="_blank" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+    External deliverables page
+    <span class="material-icons d-inline-flex"><small>open_in_new</small></span>
+</a>
+{% endif %}
+
+{% if project.deliverable_management_url %}
+<a href="{{ project.deliverable_management_url }}" target="_blank" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+    External project home
+    <span class="material-icons d-inline-flex"><small>open_in_new</small></span>
+</a>
+{% endif %}
+
+{% if project.deliverable_github_url %}
+<a href="{{ project.deliverable_github_url }}" target="_blank" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+    Project GitHub page
+    <span class="material-icons d-inline-flex"><small>open_in_new</small></span>
+</a>
+{% endif %}
+
+{% if project.deliverable_reports_url %}
+<a href="{{ project.deliverable_reports_url }}" target="_blank" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+    Project reports
+    <span class="material-icons d-inline-flex"><small>open_in_new</small></span>
+</a>
+{% endif %}
+
+{% if project.deliverable_documentation_url %}
+<a href="{{ project.deliverable_documentation_url }}" target="_blank" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+    Project documentation
+    <span class="material-icons d-inline-flex"><small>open_in_new</small></span>
+</a>
+{% endif %}

src/marketplace/templates/marketplace/proj_deliverables.html

@@ -1,31 +1,24 @@
 {% extends "marketplace/proj.html" %}
 
-{% block tabcontents %}
+{% load markdown_deux_tags %}
 
-  {% load markdown_deux_tags %}
+{% block tabcontents %}
+  <div class="col-lg-5">
+    <h4 class="section-header">Project results</h4>
 
-  <h4 class="section-header">Project results</h4>
+    {% if project.is_completed %}
+      {% if project.deliverables_description %}
+        {{ project.deliverables_description|markdown }}
+      {% else %}
+        <p>This project has been completed.</p>
+        <p>Below you can find links to all the public results, documentation, data, code, <em>etc.</em> that has been generated as part of the project.</p>
+      {% endif %}
 
-  {% if project.is_completed %}
-    {% if project.deliverables_description %}
-      {{ project.deliverables_description|markdown }}
+      <div class="list-group list-group-flush">
+        {% include 'marketplace/components/proj_task_deliverables_list.html' with project=project %}
+      </div>
     {% else %}
-      <p>This project has been completed. Below you can find links to all the public results, documentation, data, code, etc. that has been generated as part of the project.</p>
-    {% endif %}
-    {% if project.deliverable_management_url %}
-      <div><a href="{{ project.deliverable_management_url }}">Project home</a></div>
-    {% endif %}
-    {% if project.deliverable_github_url %}
-      <div><a href="{{ project.deliverable_github_url }}">Project github page</a></div>
+      <p>This project is still in progress, so no public deliverables are available.</p>
     {% endif %}
-    {% if project.deliverable_reports_url %}
-      <div><a href="{{ project.deliverable_reports_url }}">Project reports</a></div>
-    {% endif %}
-    {% if project.deliverable_documentation_url %}
-      <div><a href="{{ project.deliverable_documentation_url }}">Project documentation</a></div>
-    {% endif %}
-  {% else %}
-    <p>This project is still in progress, so no public deliverables are available.</p>
-  {% endif %}
-
+  </div>
 {% endblock %}

src/marketplace/templates/marketplace/proj_finish.html

@@ -1,29 +1,26 @@
 {% extends 'marketplace/proj.html' %}
 
 {% block tabcontents %}
-
   <form id="finishproject">
     <h4 class="section-header">Finish project</h4>
-    <p>Are you sure you want to finish this project? This will make the project completed and no more volunteering work will be allowed in it.</p>
+
+    <p>Are you sure you want to finish this project?</p>
+    <p>This will make the project completed and no more volunteering work will be allowed in it.</p>
+
     {% csrf_token %}
     {% include 'marketplace/components/standard_form_fields.html' %}
 
-    <div class="form-row">
-      <div class="col-lg-9 offset-lg-3">
-        <button type="submit"
-                form="finishproject"
-                formaction="{% url 'marketplace:proj_finish' project.id %}"
-                formmethod="post"
-                class="btn btn-success mr-3">
-          <i class="material-icons" style="vertical-align: middle">done_all</i>
-          Yes, finish this project
-        </button>
-        <a class="btn btn-outline-primary" href="{% url 'marketplace:proj_info' project.id %}">
-          <i class="material-icons" style="vertical-align: middle">close</i>
-          No, keep this project in QA
-        </a>
-      </div>
-    </div>
+    <button type="submit"
+            form="finishproject"
+            formaction="{% url 'marketplace:proj_finish' project.id %}"
+            formmethod="post"
+            class="btn btn-success mr-2">
+      <i class="material-icons" style="vertical-align: middle">done_all</i>
+      Yes, finish this project
+    </button>
+    <a class="btn btn-outline-primary" href="{% url 'marketplace:proj_info' project.id %}">
+      <i class="material-icons" style="vertical-align: middle">close</i>
+      No, keep this project in QA
+    </a>
   </form>
-
 {% endblock %}

src/marketplace/templates/marketplace/proj_info.html

@@ -68,19 +68,11 @@ <h4 class="section-header">Internal People Available During the Project</h4>
       {% if project.is_completed %}
         <div class="card mb-3 section-header">
           <div class="card-header">Project results</div>
-          <div class="card-body">
-            {% if project.deliverable_management_url %}
-              <div><a href="{{ project.deliverable_management_url }}">Project home</a></div>
-            {% endif %}
-            {% if project.deliverable_github_url %}
-              <div><a href="{{ project.deliverable_github_url }}">Project github page</a></div>
-            {% endif %}
-            {% if project.deliverable_reports_url %}
-              <div><a href="{{ project.deliverable_reports_url }}">Project reports</a></div>
-            {% endif %}
-            {% if project.deliverable_documentation_url %}
-              <div><a href="{{ project.deliverable_documentation_url }}">Project documentation</a></div>
-            {% endif %}
+
+          <div class="card-body py-1 px-0">
+            <div class="list-group list-group-flush">
+              {% include 'marketplace/components/proj_task_deliverables_list.html' with project=project %}
+            </div>
           </div>
         </div>
       {% endif %}

src/marketplace/templates/marketplace/proj_instructions_task.html

@@ -1,39 +1,24 @@
 {% extends "marketplace/proj_volunteer_task_base.html" %}
 
-{% block taskcontents %}
-
-
-
-  {% load markdown_deux_tags %}
+{% load markdown_deux_tags %}
 
+{% block taskcontents %}
   <div class="row mb-5 section-header">
     <div class="col-lg-8">
         <span class="text-muted">
           {% include 'marketplace/components/task_type_display.html' %}
         </span>
-        <h4>{{ project_task.name }}</h4>
-          {% include 'marketplace/components/task_status.html' with task=project_task %}
-
-      <p>{{ project_task.description|markdown }}</p>
-      <p>{{ project_task.onboarding_instructions|markdown }}</p>
-
-      {% if project.deliverable_management_url %}
-        <a href="{{ project.deliverable_management_url }}">External project home</a>
-      {% endif %}
-      {% if project.deliverable_github_url %}
-        <a href="{{ project.deliverable_github_url }}">Project github page</a>
-      {% endif %}
-      {% if project.deliverable_reports_url %}
-        <a href="{{ project.deliverable_reports_url }}">Project reports</a>
-      {% endif %}
-      {% if project.deliverable_documentation_url %}
-        <a href="{{ project.deliverable_documentation_url }}">Project documentation</a>
-      {% endif %}
-
 
+        <h4>{{ project_task.name }}</h4>
 
+        {% include 'marketplace/components/task_status.html' with task=project_task %}
 
+        <p>{{ project_task.description|markdown }}</p>
+        <p>{{ project_task.onboarding_instructions|markdown }}</p>
 
+        <div class="list-group list-group-flush">
+        {% include 'marketplace/components/proj_task_deliverables_list.html' with project=project task=project_task %}
+        </div>
     </div>
 
     <div class="col-lg-4">
@@ -61,7 +46,7 @@ <h4>{{ project_task.name }}</h4>
         <div class="card-header"><i class="far fa-calendar-alt"></i> Schedule</div>
         <div class="card-body">
           <p>Start: {{ project_task.estimated_start_date }} (estimated), {{ project_task.actual_start_date }} (actual)</p>
-          <p>End: {{ project_task.estimated_end_date }} (estimated), {{ project_task.actual_end_date }} (actual)</p>
+          <p>End: {{ project_task.estimated_end_date }} (estimated){% if project_task.actual_end_date %}, {{ project_task.actual_end_date }} (actual){% endif %}</p>
         </div>
       </div>
 

src/marketplace/templates/marketplace/proj_task.html

@@ -78,17 +78,17 @@ <h4>{{ project_task.name }}</h4>
               <p>Created on: {{ project_task.creation_date }}</p>
               <p>Last modified: {{ project_task.last_modified_date }}</p>
               <p>Start: {{ project_task.estimated_start_date }} (estimated), {{ project_task.actual_start_date }} (actual)</p>
-              <p>End: {{ project_task.estimated_end_date }} (estimated), {{ project_task.actual_end_date }} (actual)</p>
+              <p>End: {{ project_task.estimated_end_date }} (estimated){% if project_task.actual_end_date %}, {{ project_task.actual_end_date }} (actual){% endif %}</p>
             </div>
           </div>
           <div class="card">
             <div class="card-header"><i class="fas fa-list-ul"></i> Work details</div>
             <div class="card-body">
-              <p>Estimated effort in hours: {{ project_task.estimated_effort_hours }}</p>
-              <p>Actual effort spent in hours: {{ project_task.actual_effort_hours }}</p>
+              <p>Estimated effort in hours: {{ project_task.estimated_effort_hours|default:'(none)' }}</p>
+              <p>Actual effort spent in hours: {{ project_task.actual_effort_hours|default:'(none)' }}</p>
 
-              <p>External task home: <a href="{{ project_task.task_home_url }}">{{ project_task.task_home_url }}</a></p>
-              <p>External deliverables page: <a href="{{ project_task.task_deliverables_url }}">{{ project_task.task_deliverables_url }}</a></p>
+              <p>External task home: {{ project_task.task_home_url|default:'(none)'|urlize }}</p>
+              <p>External deliverables page: {{ project_task.task_deliverables_url|default:'(none)'|urlize }}</p>
             </div>
           </div>
           <div class="card">

src/marketplace/templates/marketplace/proj_task_finish.html

@@ -3,28 +3,31 @@
 {% block taskcontents %}
 
   {% if project_task %}
-
     <h4 class="section-header">Mark work as done</h4>
 
-    <p>Task:<a href="{% url 'marketplace:proj_instructions' project.id %}">{{ project_task.name }}</a></p>
-
-    <p>Remember to put all the results of your work in the appropriate sites
-       designed for the task:</p>
-     {% if project.deliverable_management_url %}
-       <a href="{{ project.deliverable_management_url }}">External project home</a>
-     {% endif %}
-     {% if project.deliverable_github_url %}
-       <a href="{{ project.deliverable_github_url }}">Project github page</a>
-     {% endif %}
-     {% if project.deliverable_reports_url %}
-       <a href="{{ project.deliverable_reports_url }}">Project reports</a>
-     {% endif %}
-     {% if project.deliverable_documentation_url %}
-       <a href="{{ project.deliverable_documentation_url }}">Project documentation</a>
-     {% endif %}
+    <p>Task: <a href="{% url 'marketplace:proj_instructions' project.id %}">{{ project_task.name }}</a></p>
+
+    <div class="row">
+      <div class="col-md-4">
+        <div class="d-flex align-items-center h-100">
+          <p class="align-self-center"><i class="fas fa-check-double fa-lg pr-3"></i></p>
+          <p>Remember to put all the results of your work into the appropriate documents and/or repositories
+             designated for this task.</p>
+        </div>
+      </div>
+
+      <div class="col-md-8">
+        <div class="list-group list-group-flush">
+          {% include 'marketplace/components/proj_task_deliverables_list.html' with project=project task=project_task %}
+        </div>
+       </div>
+    </div>
+
+    <hr class="mt-3 mb-4">
 
     <form id="completetask">
       {% csrf_token %}
+
       {% include 'marketplace/components/standard_form_fields.html' %}
 
       <div class="form-row">
@@ -37,14 +40,14 @@ <h4 class="section-header">Mark work as done</h4>
             <i class="material-icons" style="vertical-align: middle">check</i>
             Mark work as done
           </button>
+
           <a class="btn btn-outline-primary" href="{% url 'marketplace:proj_instructions_task' project.id project_task.id %}">
             <i class="material-icons" style="vertical-align: middle">close</i>
             Cancel
           </a>
         </div>
       </div>
     </form>
-
   {% else %}
     <p>You don't have any active task in this project.</p>
   {% endif %}

src/marketplace/templates/marketplace/proj_task_review.html

@@ -1,24 +1,40 @@
 {% extends "marketplace/proj_task_base.html" %}
 
+{% load markdown_deux_tags rules %}
+
 {% block taskcontents %}
+  <h4 class="section-header">Completed task review</h4>
 
-  {% load markdown_deux_tags %}
+  <div class="row">
+    <div class="col-md-6 mt-3">
+      <div class="row align-items-center">
+        <dt class="col-sm-5 mb-2">Task</dt>
+        <dd class="col-sm-7"><a href="{% url 'marketplace:proj_task' project.id project_task.id %}">{{ project_task.name }}</a></dd>
 
-  <h4 class="section-header">Completed task review</h4>
-  <p>Task: {{ project_task.name }}</p>
-  <p>Estimated effort in hours: {{ project_task.estimated_effort_hours }}</p>
-  <p>Total effort spent (in hours): {{ task_review.volunteer_effort_hours }}</p>
-  <p>Volunteer's comments: {{ task_review.volunteer_comment|markdown }}</p>
+        <dt class="col-sm-5 mb-2">Estimated effort (hours)</dt>
+        <dd class="col-sm-7">{{ project_task.estimated_effort_hours }}</dd>
 
-  {% if project_task.task_home_url %}
-    <p>External task home: <a href="{{ project_task.task_home_url }}">{{ project_task.task_home_url }}</a></p>
-  {% endif %}
-  {% if project_task.task_deliverables_url %}
-    <p>External deliverables page: <a href="{{ project_task.task_deliverables_url }}">{{ project_task.task_deliverables_url }}</a></p>
-  {% endif %}
-  <p>Request date: {{ task_review.review_request_date }} </p>
+        <dt class="col-sm-5 mb-2">Total effort spent (hours)</dt>
+        <dd class="col-sm-7">{{ task_review.volunteer_effort_hours }}</dd>
+
+        <dt class="col-sm-5 mb-2">Request date</dt>
+        <dd class="col-sm-7">{{ task_review.review_request_date }}</dd>
+
+        <dt class="col-sm-5 mb-2">Volunteer's comments</dt>
+        <dd class="col-sm-7">
+          <blockquote class="blockquote mt-2">{{ task_review.volunteer_comment|markdown }}</blockquote>
+      </div>
+    </div>
+
+    <div class="col-md-6">
+      <div class="list-group list-group-flush">
+        {% include 'marketplace/components/proj_task_deliverables_list.html' with project=project task=project_task %}
+      </div>
+    </div>
+  </div>
+
+  <hr class="mb-4">
 
-  {% load rules %}
   {% has_perm 'project.task_review_do' user project as perm_task_reviewer %}
 
   {% if task_review.is_pending %}