Bug 1648870: Fix plan tasks list completed icons alignment

- Move style.css file in plan plugintype to sass features folder since
  the plugin is part of Mahara core
- Add classes in task related templates for future styling
- Use task-status class to apply some styles that will force task-status
  cell to be only as wide as it needs to be
- Remove styles that are not used

behatnotneeded: CSS changes only

Change-Id: Ie1704c8b54bd139ecfcbc8337fff2f3448553048

htdocs/theme/raw/plugintype/artefact/plans/style/style.css

-/**
- * CSS rules for the resume artefact plugin
- *
- * @author     Catalyst IT Ltd
- * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
- * @copyright  For copyright information on Mahara, please see the README file distributed with this software.
- */
-.planstatus a {
-    margin-left: 5px;
-}
-#container #planswrap table td.errmsg {
-   padding-left: 20px;
-}
-/* plan tasks */
-#taskslist th.completed,
-#taskslist td.completed,
-#taskslist td.incomplete {
-    text-align: center;
-    padding-top: 8px;
-}
-.plantaskdescription p {
-    margin: 0 0 5px;
-}
\ No newline at end of file

htdocs/theme/raw/plugintype/artefact/plans/templates/plan.tpl

@@ -19,10 +19,10 @@
     </div>
 {else}
 <div class="table-responsive">
-<table id="taskslist" class="listing table table-striped text-small">
+<table id="taskslist" class="task-listing table table-striped text-small">
     <thead>
         <tr>
-            <th>{str tag='completed' section='artefact.plans'}</th>
+            <th class="task-status">{str tag='completed' section='artefact.plans'}</th>
             <th>{str tag='title' section='artefact.plans'}</th>
             <th>{str tag='completiondate' section='artefact.plans'}</th>
             <th>{str tag='description' section='artefact.plans'}</th>

htdocs/theme/raw/plugintype/artefact/plans/templates/taskslist.tpl

 {foreach from=$tasks.data item=task}
     {if $task->completed == -1}
-        <tr class="incomplete danger">
-            <td class="incomplete">
-                <span class="icon icon-times icon-lg left text-danger" role="presentation" aria-hidden="true"></span>
+        <tr class="task incomplete danger">
+            <td class="incomplete task-status">
+                <span class="icon icon-times icon-lg text-danger" role="presentation" aria-hidden="true"></span>
                 <span class="sr-only">{str tag=overdue section=artefact.plans}</span>
             </td>
             <td class="plantasktitle">{$task->title}</td>
@@ -14,10 +14,10 @@
             </td>
 
     {else}
-        <tr class="complete">
+        <tr class="task complete">
             {if $task->completed == 1}
-                <td class="completed text-center">
-                    <span class="icon icon-check-square-o icon-lg left text-success" role="presentation" aria-hidden="true"></span>
+                <td class="completed task-status">
+                    <span class="icon icon-check-square-o icon-lg text-success" role="presentation" aria-hidden="true"></span>
                     <span class="sr-only">{str tag=completed section=artefact.plans}</span>
                 </td>
             {else}

htdocs/theme/raw/sass/features/_plan-task.scss

+// Forcing the cell to be as wide as TH
+.task-status {
+  width: 1px;
+  white-space: nowrap;
+  text-align: center;
+}

htdocs/theme/raw/sass/typography/_tables.scss

@@ -262,4 +262,3 @@ table.table tr {
 .table>thead>tr>th.groupshortname {
     width: 20%;
 }
-

htdocs/theme/raw/sass/utilities/_index.scss

@@ -86,6 +86,7 @@
 @import "../features/option-alt";
 @import "../features/skiplink";
 @import "../features/user-pages";
+@import "../features/plan-task";
 
 
 // Supporting sass for library code